One way to make AI design look good
让 AI 设计变好看的一个方法- My way of getting good-looking design out of AI is to break the job into steps: general agents set the framework early, design agents do the UI/UX in the middle, coding agents build it at the end, and each step gets the tool best suited to it.
- I split the process into six layers, L1 to L6 — from PRD, IA / UX spec, visual exploration and DESIGN.md to design implementation and coding — each with its own input, output and acceptance criteria, aligning as I go so the result doesn’t drift.
- Different tools can also cross-check each other and give each other design critique.
The core idea is to break one task into steps, pick the relatively best tool for each step, set input / output / acceptance criteria layer by layer, and align along the way, so the final result doesn’t drift too far.
Different tools can cross-check each other and do design critique.
Do one thing well at a time
Early: general agents set the framework — Claude, ChatGPT
Middle: design agents do the UI/UX — Claude Design, Figma Make, Google Stitch
Late: coding agents do the development — Claude Code, Codex
L1. Product document | Product foundation. Tool: general agents. Input: who it’s for, what approach it takes, what problem it solves. Output: product-foundation.md. Acceptance: think of it as the project background file or PRD, a file the project files need to have.
L2A. Information architecture | Landing page IA. Tool: general agents. Input: product-foundation.md. Output: landing-page-ia.md. Acceptance: good storytelling.
L2B. Product architecture | Product system UX spec. Tool: general agents. Input: functional requirements, user flows, pages, states, data objects. Output: user-flow / object-model / page-specs / state-specs. Acceptance: the core task flows run smoothly and the paths make sense.
L3. Visual exploration | Visual discovery. Tool: design agents. Input: visual references you like and dislike (pasted images), plus your own gut comments. Output: visual-direction.md (optional). Acceptance: check the tone.
L4. Design system | Design tokens. Tool: design agents. Input: the three documents above; if part of the product is already built, connecting GitHub makes it easier for the agents to understand existing component styles / product structure / data. Output: DESIGN.md. Acceptance: turn the “feel” from the previous layer into specific colors / fonts / visual style.
L5. Design implementation | UI exploration. Tool: design agents. Input: IA / UX specs + DESIGN.md. Output: one or more visual versions, and once finalized, a handoff bundle (with Claude Design -> Claude as the example, this is the best way). Acceptance: review of the design result.
L6. Coding implementation | Implementation & QA. Tool: coding agents. Input: the handoff bundle. Output: the implemented pages. Acceptance: review of the implemented design.
L1 - PRD
L2 - Landing page - IA; product - UX spec
L3 - Visual exploration
L4 - DESIGN.md
L5 - Final UI/UX
L6 - Coding
Written in Chinese and translated into English with the help of AI. Read the original