How to Do UI Design with AI: Prompts, Design Systems, and Interactive State Practice

Reading Guide

To do UI design with AI, you can first clarify the tasks users need to complete, then provide reference images and visual rules, and finally check interactive states such as loading, empty, and error states. Simply asking for "something nice-looking" is usually not enough to constrain information hierarchy and functional experience.

Start from scratch with Sections 1 to 3: define judgment criteria, select references, and extract the design system. If you have pages but incomplete states, see Section 5; if you need buttons and error prompts, see Section 6; if you need to start building from screenshots, see Section 7, then use Section 9 to check small-screen adaptation.

First do a test run with a real page: clearly state the user tasks and existing constraints, generate a version, check the visual hierarchy, operation entries, and abnormal states item by item, then decide whether to adopt it. This article retains the tools and prompts from the original materials; they are reference methods, and the output still requires actual inspection.

1. First build the judgment framework: what good experience/interface/interaction looks like + where the bottlenecks of bad UI are

Source: What is good experience design / What makes a good interface design / What makes good interaction design / What makes designers stagnate When to use: Before you ask AI to produce any draft, you must first have a ruler; otherwise, even if AI gives you ten versions, you won't know which one is right. This section does not produce UI; it produces the judgment criteria you use when reviewing drafts and writing prompts.

1.1 Four characteristics of experience design (for judging "whether this product actually works")

Characteristic	One-sentence description	Ask yourself
Usable	Is it easy to use and easy to learn	Are functions easy to find? Can tasks be completed smoothly?
Equitable	People of different abilities/backgrounds can all use it well	Are overlooked groups taken care of (e.g., emojis with different skin tones)?
Enjoyable	Pleasant to use, with an emotional connection	Is there personalization, or something that makes people smile knowingly?
Useful	Actually solves real problems	Does it add value to users? (Note: usability ≠ usefulness — being easy to use but useless is still a failure)

1.2 The "causal chain" of a good interface (think along this chain when writing visual prompts)

An interface is not a "style choice", but a chain:Design goal (user cognition) → Visual principles (how to guide) → Design variables (what to use to implement) → Visual result (final appearance).

Design goal First ask three things: what does the user need to see (cognition), what do they need to do (behavior), and what should they feel after doing it (emotion). If the goal is unclear, everything after will drift.
Visual principles: Emphasis (highlight what deserves the most attention), hierarchy (guide visual flow), proportion (coordinated element sizes), consistency and variety (unity with variation).
Design variables(6 truly adjustable parameters): color (differentiation/emphasis/emotion), typography (hierarchy skeleton), spacing (expressing relationships — close = same group, separated = apart), shape and border radius (large radius = friendly, right angles = serious), layers and shadows (who is in front and who is behind), motion timing (animation is navigation, not decoration).

Usage tips for PMs: When writing prompts, instead of saying "make it look nice", give constraints along this chain — "The main path (placing an order) should visually outweigh other elements (emphasis), using large font size + primary color; secondary actions should be weakened into gray text buttons (hierarchy); cards should use 12px border radius to convey friendliness (shape)". When AI receives such structured constraints, the quality of its drafts is an order of magnitude higher than when told to "make it pretty".

1.3 Four principles of good interaction (for reviewing interactions/writing state prompts)

Reachability (tasks have complete, unbroken paths), perceptibility (every action has feedback — clicks have responses, loading has progress, errors have explanations), recoverability (assume users will definitely make mistakes: confirm before deletion, actions can be undone, processes can be resumed), supportability (provide help on demand when users get stuck; timing is more important than content). Judgment criteria: efficiency (how many steps to complete), accuracy (probability and cost of misoperation), cognitive load (how much needs to be remembered), emotional curve (which node is most likely to cause frustration).

1.4 The real bottlenecks of bad UI (diagnose blind spots in your own/your team's/AI's output)

On this page, Will points out something counterintuitive:Bad UI is essentially not due to "insufficient skills", but to an inability to "make decisions". There are four layers of gaps:

Visual ability → Information understanding ability: Inability to make trade-offs → information density gets out of control, key points are unclear. The bottleneck manifests as repeatedly agonizing over "should this be emphasized/how to sort things/should this button exist". The remedy: split content into primary/secondary/noise, and dare to delete noise.
Layout ability → Behavior design ability: The page "looks fine" but users don't know what to do next. The remedy: treat the interface as a guidance system, make the main path prominent, and push secondary actions to the background.
Component ability → System ability: Individual pages are OK but the whole is chaotic (each page looks redesigned). The remedy: unify spacing/font size/weight rules,upgrade local correctness to overall consistency.
Design thinking → Business judgment: Not knowing "why it is designed this way", unable to tie design to conversion/retention/trust. The remedy: be able to choose among multiple options and clearly explain the goals, costs, and expectations.

Why this section comes first: AI can help you cross layers 1 and 3 (it is very good at trade-off checklists and system consistency), but layers 2 and 4 (behavior paths, business judgment) cannot be replaced by AI — you must bring this ruler to set constraints for AI and do acceptance checks.Counterexample: Directly throwing out "help me make a nice homepage" is equivalent to handing all four layers of decisions to AI; what comes out will inevitably be a pretty useless draft that "looks fine but leaves users not knowing what to do next".

2. Generate beautiful UI: first establish a "visual baseline" (Beautiful UI Design)

When to use: You first need to know "what internationally advanced UI looks like", and make the drafts produced by AI align with that line. Why: This page by Will is essentially a visual benchmark library(Mobbin-level cases: Airbnb / Spotify / Notion / Stripe / Linear / Fey / World App, etc.). Its subtext is —if your work's UI is similar to these products, this ability has reached an internationally advanced level. This "baseline" is the passing line for all subsequent AI drafts.

Actionable practices for PMs(The original page is an image library; here are implementable usages):

Feed references to AI: Use screenshots of your favorite benchmark products as reference images (follow the "extract tokens from reference images" process in Sections 3 and 8), instead of saying "make it look nice" with no basis.
Reverse-engineer passing standards from the baseline: Common traits of good UI are — restrained color palettes (1-2 primary colors + lots of neutral grays), clear hierarchy (key points visible at a glance), ample whitespace, and unified border radius/shadow systems. Use these points to review AI's output.
Fallback: If the overall visuals produced by AI are poor and you don't feel like adjusting, directly use the "Figma default visual system fallback" in Section 7 — one click to pull it back close to the quality baseline of Untitled UI (a $300+ commercial UI library).

3. Generate design systems for reference websites / reference images (turn "feel" into reusable Tokens)

Source: Generate a design system for a reference website / Optimize UI visuals by analyzing reference images When to use: You have a website you like (e.g., Apple, Stripe) or a few reference images, and you want to turn its visual style into a set of rules you can reuse(color/font/spacing/border radius/shadow variables), so that all subsequent pages have consistent visuals. Why: This is the "foundational technique" of this section.Once you have tokens, every page generated afterwards references the same set of variables, and visuals stay consistent automatically—that is exactly the leap from "component capability → system capability" discussed in the first section.

Path A: Generate an interactive design system site from a reference website

第一步(生成 token 化的 HTML):
[www.apple.com](替换成你的目标网站)
Create an HTML for an Apple UI design system using pure CSS variables (:root + dark)
创建一个 Apple UI 设计系统的 HTML,纯 CSS variables(:root + 深色)

第二步(把它变成可浏览的设计系统站):
根据第一步代码,生成带有可切换左侧边栏的交互式 HTML UI 设计系统(英文)

Output: an interactive webpage containing colors / typography / spacing and border radius / shadows / motion / hierarchy / buttons / badges / input fields / cards / overlays / skeleton loaders / token browser and other components for a complete design system.

Path B: Extract style genes from reference images + generate Design Tokens (better suited for "I have a few screenshots I like")

[上传参考图1:整体风格参考]
[上传参考图2:某个组件细节参考,可选]

请做两件事:
第一,从参考图中提取视觉决策:
- 我想借鉴的:整体色调、空间感、组件风格
- 我不想照搬的:[你填,如"它的布局太复杂"]
- 情绪基调:[你填,如"专业、克制、现代"]
第二,基于上面的决策生成 Design Tokens:
- 主色、辅助色、背景色、文字色
- 字号层级(typography scale)
- 间距规则
- 圆角、阴影

输出:DESIGN_BRIEF.md + tokens.css

Outputs two files:DESIGN_BRIEF.md(turning the "vibe" into rules) + tokens.css(variables that can be directly imported).

Key technique: in the prompt write both "what you want to borrow" and "what you do not want to copy outright"—this two-way positive and negative constraint is the core to keeping AI from going off track.Counterexample: if you only say "imitate Stripe's style", AI will copy its complex layouts along with everything else; clearly stating "borrow its color palette and whitespace, but do not use its multi-column complex layouts" is how you get a clean extraction.

4. Exploring Brand Colors and Color Meanings

Select brand colors: have AI propose candidate primary colors based on "product tone + target emotion + industry conventions", and directly generate color scales(e.g., nine shades from primary 100 → 900)—this way there are corresponding colors for light/dark states, hover, and disabled states, instead of just one isolated primary color (this point is fully consistent with Refactoring UI, a practical UI handbook for non-designers (hierarchy, whitespace and spacing, color systems, typography, depth and shadows, image handling, final polish, practical breakdowns) and its rule that "a color set needs 9 steps", as well as Google Material Design 3 design system (core propositions and rules for dynamic color / Type Scale / Tonal Elevation / shape / adaptivity / motion / accessibility) and its "0–100 tonal palette").
Color meaning validation: before writing microcopy or choosing colors, have AI explain psychological mappings such as "warm colors promote action, cool colors build trust" to ensure color usage aligns with emotional goals(corresponding to the "emotional goal" in the causal chain from Section 1).
Implementation: write the confirmed brand colors directly into the tokens.css from Section 3, and reference them across the entire product.

When to use: when defining the primary brand color, or when you want to know what emotion a specific color conveys in your product context. Note: These two pages from Will are themselves reference image libraries (color swatches/cases) with no standalone prompts. Combined with the methods in this section,actionable practices for PMs:

5. Exhaustive Enumeration of Boundary Interaction States: Force AI to List All States

Source: Boundary Interaction States / UI State Reference Table When to use: before building any feature that involves input/submission/loading, make sure no state is missed—this is the work PMs most often drop, and a major source of post-launch bugs and negative reviews. Why: when people design interfaces, they only draw the "normal state", but in the real world 80% of experience failures happen in exception states (offline, timeout, format errors, empty states, leaving without saving). What AI is best at is exhaustive enumeration by checklist, listing all the boundary states you cannot think of in one go.

Reusable prompt skeleton (state enumeration):

上下文
- 我正在构建的功能:[功能名]
- 技术框架:[React / SwiftUI / Flutter / 原生 HTML]
- 用户行为:[如"提交支付表单""上传头像"]
- 当前已覆盖状态:[列出已有,或写"无"]

任务
你是资深交互设计师。为该功能生成完整的 UI 状态覆盖清单。
每个状态输出一行 5 列表格:| 状态 | 触发条件 | UI 组件 | 文案/标签 | 是否可恢复 |
规则:
- 文案必须可直接上线,禁止占位符(不许写 [X] 或 [错误信息])
- UI 组件要具体(内联错误/Toast/Modal/Skeleton/进度条/Banner/空状态/引导/禁用按钮)
- 可恢复:Yes / No / Limited(附一个词说明)

必须逐类检查(不适用才跳过):
1 正常路径:默认、输入中、成功、异步提交完成
2 用户错误:必填未填、格式错误、规则校验失败、内容错误、超限、多次失败锁定、未勾选协议
3 系统错误:无网络、请求失败、超时、服务异常、数据异常、会话过期、无权限、限流
4 加载/处理中:首屏骨架屏、局部加载、提交锁定、慢响应、上传/下载进度
5 边界/决策态:空状态、搜索无结果、首次引导、危险操作确认、覆盖确认、未保存离开、功能降级、复制/粘贴、敏感信息提示、权限请求

输出后追加一节"你可能遗漏的状态(States You Might Have Missed)",指出本功能特别易漏的状态。
所有文案用同一种语言:[中文/英文,选一]。

Supporting lookup table: UI state reference table (5 major categories; filter before building components)

Category	Typical states (each requires copy + UI form to be thought through)
01 Happy path	Default state (Placeholder), typing (inline hints/character count), submitting (button Loading), operation successful (Toast "Saved"), async submitted ("Submitted, you will be notified of the result")
02 User errors	Missing required field, format error (provide example name@mail.com), rule validation failure ("At least 8 characters including numbers and letters required"), verification code error, limit exceeded, lockout after consecutive errors ("Failed 5 times, locked for 30 minutes" + recovery entry), agreement not checked (highlight + shake), unsupported file type
03 System errors	No network, request failed (with error code), request timeout, service unavailable (provide estimated recovery time), data anomaly (+ refresh button), login session expired (auto-redirect to login), no permission (+ back), risk control interception ("Too frequent operations, try again in X minutes")
04 Loading/waiting	First-screen skeleton loader, partial refresh, submission lock (disabled + Spinner to prevent repeated clicks), slow response prompt (over 3s), upload progress ("64% uploaded", cancellable)
05 Boundary/decision	Empty state ("No content yet" + guiding CTA), no search results, onboarding coach mark, dangerous action confirmation ("Cannot be recovered after deletion"), overwrite confirmation, leaving with unsaved changes, feature degradation, copy success/failure, incompatible paste format, sensitive information reminder

How to use: before building any component, filter relevant states from the table above → fill in specific copy and visual form for each state.Counterexample: launching with only a "success Toast" results in no feedback at all when the user is offline (a black hole), and users frantically clicking the submit button causes duplicate orders—this is exactly the cost of missing "perceivability" and "submission locking".

6. General UX Microcopy Generator

When to use: when writing "small but critical" copy such as button text, error prompts, empty states, success feedback, and titles, and you want professional versions with A/B testing directions. Why: microcopy is the final nudge on the user's decision chain. "Submit" vs "Claim your coupon now", "Input error" vs "Incorrect phone number format, please check the digit count"—changing one word can make a big difference in conversion rate. AI can stably output professional-grade copy + multi-version comparisons for this task.

Reusable prompt skeleton (microcopy):

你是资深 UX Writing 专家。每句微文案都建立在 3C 原则上:
- Clarity 清晰:用户一眼知道发生了什么、下一步做什么
- Concision 简洁:删掉一切多余的字
- Character 有个性:符合品牌语气,不像机器说话

写作前先分析:用户此刻的情绪状态?核心 JTBD(真正想完成的事)?
处于决策链哪个阶段(认知/考虑/行动/留存)?有什么顾虑/摩擦要消除?

我要写的文案背景:
【场景类型】(标题/正文/按钮/错误提示/空状态/成功反馈/落地页标题…)
【我想表达的意思】(用大白话说清即可,不需写得好)
【品牌语气】(友好自然/专业严谨/轻松活泼/极简克制,或描述品牌感觉)
【目标用户】(可选)

请按结构输出:
1. 用户分析(3-4句:情绪、JTBD、决策阶段、主要摩擦点)
2. 版本 A / B / C(三个风格各异),每版含:文案正文 + 写作策略(命中什么心理、适合什么场景) + A/B 测试建议
3. 写作分析:核心难点、处理思路、可读性是否匹配目标用户认知成本

Key technique: have AI do "user analysis" first before writing copy, instead of giving copy directly—this step forces it to think through context such as "the user is anxious/in a hurry right now", so the copy does not go off track. Three versions + A/B suggestions exactly match the PM workflow (pick one version to launch, keep one for experimentation).Counterexample: if you directly ask "give me better button copy", AI will give you a line and you will not know why it chose it or whether it can be tested.

7. UI Screenshot to Code / to Figma (Let AI Turn Images into Editable Assets)

Source: Image UI to code Figma design mockup / From UI to product prototype / HTML to Figma / Restore Figma's default UI visual system When to use: when you have an interface screenshot (competitor, inspiration, hand-drawn sketch) and want to turn it into an editable Figma file or code instead of redrawing it from scratch. This is one of the most dramatic time-savers in AI-assisted design.

7.1 Screenshot → Figma Make restoration prompt (high-fidelity reproduction)

请分析这张 UI 截图,生成一份可直接粘进 Figma Make 的还原提示词。要求:
1. 用英文输出(Figma Make 对英文响应更准)
2. 识别所有控件,用 Figma 标准命名(Frame, Auto Layout, Button, Input, Icon, Chip, Card, Divider)
3.【重点】描述每个区域的"容器形态":是圆角卡片?色块背景?细线分隔?虚线?无边框留白?
   明确每个容器的:背景色/边框色/边框粗细/圆角(large/medium/none)/有无阴影
4. 提取色值给 hex:主背景/卡片背景/边框/主文字/次文字/强调色/按钮色
5. 描述字号关系(large/medium/small/xs 或相对比例)
6. 描述间距(padding/gap/margin 相对关系)
7. 提示词开头加"还原模式声明",禁止 Figma Make 自由发挥、禁止替换容器形态
8. 按区域分块,从上到下从左到右,每区一段
输出:直接给提示词正文,复制即用。

Why "no free improvisation" is key: AI will by default "beautify" your image, causing inaccurate restoration. Explicitly writing "restoration mode" and "do not replace container forms" is what makes it faithfully reproduce instead of creating a second version.

7.2 Screenshot → low-fidelity wireframe (confirm structure first, then reskin)

你是资深产品设计师,专长把高保真 UI 还原成"无视觉风格的低保真线框图"。
把我给的 UI 截图转成纯结构线框,输出单文件 HTML。
必须剥离:品牌色/渐变→全灰度;圆角/阴影/美化→去掉,只用 1px 实线;
  真实图标→占位标记 [icon];头像/图片→ [avatar]/[image]/[preview]。
必须保留:所有文字逐字保留(不改写不省略);信息层级;布局结构与相对位置;
  各区相对大小;交互逻辑(标注可点/可拖/Tab/筛选)。
为后续换设计系统做准备:
- HTML 与 CSS 严格分离;class 按"功能角色"命名(.metric-card 不用 .purple-box)
- 样式集中在一个 <style> 块,顶部注释 /* wireframe skin — to be replaced by design system */
- 用 data-* 或注释记录原图"语义意图"(某标签原是状态色),当前不渲染颜色
- 看不清/被遮挡的内容用 [?] 标注,绝不编造
- 全程纯英文,无任何中文

Why do wireframes first: solve "is the structure correct?" and "does it look good?" in two separate steps. After the wireframe confirms the information architecture is correct, swap the CSS skin separately (applying the design system from Section 3), changing the skin without touching the structure.When to use: for complex pages, or when you want to align with the team on "how information is arranged" before worrying about visuals.

7.3 HTML → Figma (have AI write the interface, then fine-tune in Figma)

Tool: Figma Community plugin html.to.design(figma.com/community/plugin/1159123024924461424).
Workflow: generate an HTML file with Claude / Codex / Gemini → import it with this plugin → obtain an editable Figma source file, and do final pixel-level fine-tuning in Figma.
Why: AI is fast at producing overall structure, Figma is precise at adjusting details—each plays to its strengths.

7.4 Figma default visual system fallback (if AI-generated drafts look ugly overall, pull them back to baseline in one click)

忽略所有外部参考和之前的设计约束。
使用你自己最擅长的、默认的设计系统,为 [产品名] 创建一个现代化的企业级仪表板。
要求:用你认为最好的配色/间距/排版/组件样式;专注清晰度和可用性;
不要试图匹配任何特定产品的风格。

Why this trick is valuable: when the page is complex, there are too many elements, and AI still produces ugly results after repeated adjustments, this is the fastest, lowest-cost way to pull AI visuals back to baseline. Figma Make's default UI system is very high quality (close to Untitled UI, the commercial UI kit priced at $300+).When to use: for back-offices/dashboards where you do not need a specific brand style and only want something "professional and not ugly".

8. Figma Visual Optimization: Reskin Only, Do Not Touch Structure

Source: Generated results for visual optimization in Figma When to use: when structure and functionality are finalized (wireframe/prototype confirmed), and you only want to do one round of pure visual layer upgrade—swap in a better-looking skin, but absolutely do not change layout, functionality, copy, or flows. Why: decoupling "visuals" from "product logic" is the core of reducing revision risk. This step explicitly tells AI "this is only a visual upgrade, not a UX redesign", preventing it from casually altering your information architecture.

Reusable prompt skeleton (reskin only):

角色:资深 UI 设计师,只基于参考图片做视觉层面的改版。
目标:采用参考图的视觉风格,同时严格保留原产品的 信息架构/布局结构/内容/功能逻辑。
这只是视觉层升级,不是 UX 或产品层面的重新设计。

严格约束(不要违反):
- 不改布局层级 / 不增删功能 / 不改任何文字 / 不重组信息结构 / 不重设计流程交互 / 保持间距逻辑与网格一致

视觉系统提取(从参考图提取一套可复用 tokens):
色彩(主/辅/中性/语义)、渐变(方向/混合/强度)、字体(字体/字重/字号层级)、
间距节奏、圆角体系、阴影与层级、边框样式、背景处理(纯色/渐变/玻璃/模糊/噪点)、
图标风格、视觉层级规则(对比/不透明度/强调)。
要求:整理成统一系统,不要零散套用。

风格外推(重要):参考图可能只含部分组件。你必须识别其底层设计规则,
把这套系统扩展到所有缺失组件,确保每个组件都遵循同一套视觉语言,替换不一致的旧样式。

组件应用:把视觉系统应用到全部组件(出现的对齐其样式,未出现的按相似组件+系统规则推断):
Button / Checkbox / Tab / Text Field / Card / Chip / Divider / Toast / Tooltip / Dialog /
Drawer / Avatar / Icon / Skeleton / Table / Top Navigation Bar … (按你的产品组件清单列全)

Key technique: "style extrapolation"—reference images often only show a few components, but your product has dozens. Explicitly requiring AI to "identify the underlying syntax and infer missing components" is the only way to ensure consistent visuals across the whole product, instead of having only those few components look good while the rest sit outside the system.Counterexample: if you directly say "optimize my page with reference to this image" without constraints, AI is very likely to even change the layout, breaking product logic.

9. Responsive Multi-Platform Design

When to use: when you have a desktop screenshot and want to directly get a page that adapts to mobile/tablet/desktop. Why: many designs look perfect on desktop, but become crowded and misaligned when shrunk to mobile, with text too small to tap. Have AI produce mobile-first responsive code in one step, saving the work of manually adjusting breakpoints.

Minimal prompt:

Convert this UI screenshot into semantic responsive HTML + CSS.
Use a mobile-first approach, utilize CSS variables to define colors,
and ensure compliance with WCAG AA contrast standards.

将此 UI 截图转换为语义化的响应式 HTML + CSS。使用移动优先的方法,
利用 CSS 变量定义颜色,并确保符合 WCAG AA 对比度标准。

Why these three keywords:

mobile-first: ensure the small screen works well first, then add content for larger screens—less prone to misalignment than "design desktop first then compress".

CSS variables to define colors: all output colors are variables (tokens), which can seamlessly connect with the design system from Section 3.

WCAG AA contrast: a hard accessibility constraint (body text contrast ≥ 4.5:1), which is also repeatedly emphasized as a non-negotiable requirement in Google Material Design 3 design system (core propositions and rules for dynamic color / Type Scale / Tonal Elevation / shape / adaptivity / motion / accessibility)—if AI does not add it proactively, you must explicitly require it.

If AI does not adapt it well in one pass, you can stack the adapt(responsive adaptation) command from Section 11 Impeccable to specifically fix cross-device breakages.

10. Presentation and Decision-making of Multiple Local Options

When to use: when a page feels "off" but you cannot articulate the problem, and you want AI to act like a senior PM / UX Lead and first systematically diagnose the problem, then provide three tiers of fixes: conservative/moderate/radical, instead of directly outputting one version for you to bet on. Why: AI by default only gives "surface-level visual judgments" (whether it looks good). This set of prompts forces it to perform deep diagnosis starting from real user tasks + scenarios + interaction priority + decision cost—the output is "why it is designed this way / where the problem is / why it is serious / how to fix it", rather than aesthetic opinions.

Process (two steps):

Diagnosis: provide a single-page UI screenshot + the prompt below → output a written problem analysis report (including conservative/moderate/radical tiers of fixes).
Generate solutions: Feed the "explanation of the three-tier revision approach from Step 3 + partial page screenshot" back in → produce the corresponding local optimization plan (image).

Diagnostic prompt skeleton (key steps):

你是资深 UX/产品体验专家。不要只做表层视觉评价,必须从
「用户真实任务 + 使用场景 + 交互优先级 + 决策成本」出发系统分析。
我给你一张界面图(车机/APP/网页/后台/支付页/B端工具/智能硬件均可)。
严格按步骤、不跳步、不泛泛而谈、必须具体:

第一步 判断场景(很重要):核心使用场景是什么?用户此刻什么状态(赶时间/焦虑/低注意力/
  高风险…)?最核心任务是什么(只能有一个第一优先级)?
  (示例:不是"用户在用车机",而是"驾驶中持续做路径决策,核心任务是下一步往哪开")
第二步 按用户任务拆模块(不按视觉拆):拆出 5-8 个核心模块,每个说明
  模块名称 / 用户为什么需要它 / 它解决什么任务。
第三步 逐模块分析(核心):每模块输出 用户真实任务(不是功能是什么,是用户真正想解决什么)/
  当前设计问题 / 问题为什么严重 / 改进方向。
（最后按 保守 / 中度 / 彻底 三档给改法,供我选)

Key technique: "Break down by task, not by visual elements"——Force the AI to say "quick launch navigation module" instead of "a card in the top-left corner"; only then does the analysis carry product value.Counterexample: If you directly ask "How should I optimize this page?", the AI will give a bunch of superficial suggestions like "add some white space here, change the color there", which never touches the real experience problems (what exactly the user is trying to do at this step, and where they get stuck).

XI. UI Skill: Package "optimizing a certain type of UI problem" into reusable commands

Source: UI skills - Optimize the UI visuals (Impeccable / Awesome-design) When to use: You already have a version of an HTML/interface (AI-generated or existing), and you want to perform a specific type of targeted optimization according to a unified standard, with the process being reusable and repeatable. Why: The previous sections cover "generating from scratch"; this section is about "refining existing interfaces". Solidify operations such as "amplify visual tension", "revise copy", and "minimalist distillation" into commands, feed them to a code-capable AI (Claude/Codex), and you can optimize stably and in batches, instead of re-describing requirements every time.

11.1 Impeccable — 21 atomic optimization commands(Open source:impeccable.style,GitHub pbakaus/impeccable). Each command solves one specific type of problem:

Command	What problem it solves
`adapt` Responsive adaptation	Looks perfect on desktop but is crowded and misaligned on mobile → add breakpoints, fluid layouts, adjust font sizes and touch target sizes for small screens
`animate` Motion micro-interactions	Completely static interface feels cheap → entrance choreography, hover/press feedback, staggered list appearance, GPU acceleration (respect reduce-motion)
`arrange` Layout rhythm	All elements are present but something feels "off" → unify spacing system, fix alignment, sort out visual flow
`audit` Quality checkup (generates report without modifying code)	Comprehensively inspect issues → accessibility/performance/responsive gaps/code anti-patterns, provide a prioritized checklist
`bolder` Amplify tension	Design is too bland, like a generic PPT with no stance → enlarge headings, increase font weight, strengthen contrast, make core information stand out above everything else
`clarify` Copy clarification	"Submit" or "Operation failed" leaves users confused → change to action-oriented copy ("Claim coupon now"), specific guidance, guided empty states
`colorize` Introduce color	All black, white and gray feels cold and lacks hierarchy → strategically introduce color to mark key points, distinguish content types, use color temperature to convey emotion
`critique` UX design review (generates report)	Subjective evaluation from a designer's perspective (different from technical audits)
`delight` Delight moment	Add just the right amount of small surprises
`distill` Minimalist distillation	Remove redundancy, practice subtraction
`extract` Component extraction	Extract reusable components from the page
`frontend-design` Core skill foundation	Foundational base of front-end design fundamentals
`harden` Robustness hardening	Strengthen boundary/exception robustness
`normalize` Design system alignment	Bring scattered styles in line with a unified system
`onboard` Onboarding design	Design first-use onboarding guidance
`optimize` Performance optimization	Optimize at the performance level
`overdrive` Ultimate visual effects	Max out visual effects
`polish` Pre-launch polish	Final-mile refinement before launch
`quieter` Restraint and convergence	Dial back when it is overly flashy
`teach-impeccable` Initialize context	Load Impeccable's methodology context for the AI
`typeset` Typography system	Establish/correct the typography system

How to use: These are .md-format SKILL files (Claude animate comes with them by default). Feed the corresponding SKILL.md to a code-writing AI along with your HTML, and it will make modifications according to the standard of that command.Pairing logic: First run audit/critique to check up and identify issues → then use targeted fixes such as bolder/clarify/arrange → finish with polish for final polish.

11.2 Awesome-design — Break down big-tech design languages into transferable design assets(Open source:VoltAgent/awesome-design-md).

What problem it solves: The problem is not "not enough references", but "inability to abstract and transfer". It breaks down the design languages of products such as Apple / Stripe / Linear / Airbnb / Notion / Spotify / Claude / Webflow / Framer into structured DESIGN.md / SKILL-xxx.md— which contain executable design rules (color tokens, typography, component styles, interaction patterns, system constraints), not just screenshots.
Example (Linear's SKILL looks like this): One-sentence core DNA (dark-mode-native precision engineering dark, precision engineering feel) + color palette (background #08090a→#28282c stacked by brightness, text #f7f8f8 near-white but never pure white to prevent eye fatigue, brand indigo #5e6ad2 as the only chromatic color, all borders semi-transparent white) + typography (Inter Variable weight 510) + explicit taboos (never use pure #ffffff).
How to use: Take a product's SKILL-xxx.md as design system tokens and feed them to the AI — "Generate my dashboard according to this set of Linear rules", and the AI can produce an interface with a unified style that fits the brand language at a pixel level. This is essentially the ready-made high-quality version of Section 3 "Generating a design system from reference websites" (someone else has already extracted the tokens for you).

Why this is the "capstone" of this section: It strings together all the previous techniques — Awesome-design provides you with ready-made high-quality tokens (Sections 3 and 8), and Impeccable provides you with standard commands for optimizing existing interfaces (Sections 2 and 9). With the two working together, a PM can stably produce UI close to big-tech standards without drawing talent.Counterexample: Still telling the AI based on gut feeling to "make it as cool as Linear" — while SKILL-linear.md has long translated "cool" into sheets of executable hex values and rule tables, which you can feed directly to it.

Appendix: Pages in this section that are purely "gallery/demo" in nature with no independent methodology

For completeness: There are several other pages in this section that are pure reference galleries or video demos, with no independent prompts or methodology (they have been incorporated into relevant chapters for understanding): Beautiful UI Design (visual benchmark gallery, see Section 2), Explore Brand Colors / Explore Color Meanings (color card libraries, see Section 4), Design System (design system example images), VisionCraft / TypeLayout / UI MockupCanvas (demo videos/placeholders). Their value is serving as reference inputs, not as methodology itself.