Break away from generic AI frontends: reshape UI with UX research specs and design systems

AI-generated frontend code often lacks aesthetic depth, resulting in repetitive, cookie-cutter applications. By translating real UX research into concrete numbers, establishing a design system, and reviewing after every screen, you can significantly elevate the quality of AI-generated frontends.

X (Twitter)@Av1dlive10

ClaudeClaude Code

Added 2026-11-03 · originally published 2026-11-02

Key points

Set concrete numbers for click targets, rate limits, and default values instead of relying on intuition.
Establish a design system comprising tokens, 2 font weights, and a unified icon set.
Implement a review process after each screen is completed to ensure every section includes loading, empty, and error states.

Pitfalls

AI-generated frontend applications look and feel generic, lacking aesthetic quality.
Developing blindly while ignoring loading, empty, and error states.

.cursorrules

- Use actual numbers for tap targets, speed limits, and defaults, avoiding vague values.
- Strictly follow the design system with defined tokens, 2 font weights, and one icon set.
- Perform a review pass after every screen to ensure loading, empty, and error states are implemented on every block.

Copy-ready prompt

Please write the frontend code for [project name/feature module] based on the following specifications: 1. Click targets, rate limits, and default values must use exact numerical values; vague estimates are not allowed. 2. Follow a unified design system that includes specified tokens, uses only 2 font weights, and relies on a single icon set. 3. Upon completing the development of each screen or section, you must include complete loading states, empty states, and error states.

View original post

#AI Frontend#UI Enhancement#Best Practices#UX Design

Build high-quality 3D websites quickly with Claude

Generate working Three.js scenes in a single pass using refined prompts that strictly filter out useless output with Claude Code. The core technique is fast filtering rather than blindly generating numerous random versions, cutting a week of development down to a single afternoon.

Boost mobile AI development efficiency with official Expo skills

Expo has released a set of official skills for AI coding assistants, covering routing, animations, native-style interfaces, design systems, SDK upgrades, and deployment. By installing the corresponding plugins or tools, you allow AI to automatically select and complete development and upgrade tasks.

Figma to Claude Code design workflow

Design freely in Figma using raw values while focusing on craft and interaction, then use Claude Code to turn those values into a real system structure. This reduces manual cleanup and back-and-forth communication.

Found this useful? Get daily updates on Telegram or X.

Join on Telegram Follow @CaiXiang23766

Found this useful? Buy me a coffee ☕

nebu.life is free to use. If it helped you, a small tip keeps it going. Payments go straight to the author's personal account; this site never handles any funds.

Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.

Key points

Pitfalls

Related techniques