Back to Details

design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design: Build It With a Point of View

设计：打造具备独特主张的界面

Production-grade UI with a committed visual direction. If it could have been generated by a default prompt, it is not good enough.
具备明确视觉方向的生产级UI。如果用默认提示词就能生成，说明它还达不到要求。

Lock the Direction First

先锁定设计方向

Before writing a single line of code, use AskUserQuestion to get answers to these four questions:
  1. Who uses this, and in what context? A dashboard reviewed by analysts differs from a landing page or an onboarding flow.
  2. What is the aesthetic direction? Name it precisely: dense editorial, raw terminal, layered glassmorphism, ink-on-paper, brutalist grid, warm analog. "Clean and modern" is not a direction.
  3. What is the one thing this leaves in memory? A distinctive typeface, an unexpected color system, a motion that surprises, an asymmetric layout. Pick one and make it obvious.
  4. What are the hard constraints? Framework, bundle size, contrast minimums, keyboard accessibility.
Do not proceed until all four are answered. State the chosen direction in one sentence before writing any code.
Then load 
references/design-reference.md
and check the tech stack conflicts table. Name the single CSS strategy before writing the first component.
在编写任何代码之前，使用AskUserQuestion获取以下四个问题的答案：
  1. 目标用户是谁，使用场景是什么？ 分析师使用的仪表盘与落地页或新手引导流程的设计要求截然不同。
  2. 美学方向是什么？ 要精准命名：高密度编辑风、原生终端风、分层glassmorphism、墨水纸质风、野兽派网格、温暖模拟风。「简洁现代」不属于明确的设计方向。
  3. 产品要留给用户的核心记忆点是什么？ 特色字体、出其不意的配色体系、惊喜动效、非对称布局。选一个并将其突出呈现。
  4. 硬性约束有哪些？ 开发框架、包体积限制、最低对比度要求、键盘可访问性要求。
所有四个问题未得到答案前不要推进开发。编写代码前，先用一句话明确说明选定的设计方向。
随后加载
references/design-reference.md
，查看技术栈冲突表。编写第一个组件前，先确定唯一的CSS策略。

Typography

排版

The typeface is the loudest design decision. Pair one display font with one text font. The display font should carry the aesthetic weight of the whole page: something with a clear personality that was chosen, not defaulted to.
Do not use Inter, Roboto, or system-ui as the primary display typeface. They are invisible.
字体选择是最具辨识度的设计决策。将一款展示字体与一款正文字体搭配使用。展示字体应承载整个页面的美学权重：要选择有清晰个性的字体，而非默认字体。
不要将Inter、Roboto或system-ui作为主展示字体，这类字体辨识度太低。

Color

配色

Build a system, not a collection of hex values. Use CSS variables. A single dominant color with one or two sharp accents is almost always stronger than an evenly distributed palette. Avoid colors that do not commit to anything.
要构建一套配色体系，而非零散的十六进制颜色值集合。使用CSS变量。单一主色搭配1-2个高亮强调色的效果，几乎总是优于色彩均匀分布的调色板。避免使用没有明确风格倾向的颜色。

Motion and Interaction

动效与交互

One coordinated entrance beats ten scattered hover states. If using React, reach for a motion library. For plain HTML, CSS transitions and 
@keyframes
are enough. Put animation budget where attention is: the first thing the user sees, and the most important interaction state.
Timing: entrance animations 200-400ms, exits 150-250ms. Ease-out for entrances, ease-in for exits. The test: if removing the animation changes nothing about how the page feels to use, the animation is decoration. Remove it.
一个协调统一的入场动效，远胜十个零散的hover状态。如果使用React，可选用合适的动效库。对于纯HTML项目，CSS过渡和
@keyframes
就足够。将动画资源投入到需要吸引用户注意力的地方：用户第一眼看到的内容，以及最重要的交互状态。
时间控制：入场动画200-400ms，退场动画150-250ms。入场用ease-out缓动函数，退场用ease-in缓动函数。检验标准：如果移除动画后，页面的使用感受没有任何变化，那这个动画就是多余的装饰，直接删掉。

Layout

布局

The grid is a starting point, not a rule. Controlled asymmetry, overlapping elements, and diagonal emphasis create interfaces that feel designed. Choose a spatial approach: generous breathing room or tight information density. Do not split the difference.
Backgrounds should have atmosphere: mesh gradients, subtle noise, geometric texture, layered depth. Flat white or flat black is rarely the right choice.
If the aesthetic direction conflicts with mobile constraints (e.g., glassmorphism on low-power devices, dense editorial on small screens), name the tradeoff explicitly and decide which wins.
网格是起点，而非硬性规则。可控的非对称设计、元素重叠、斜向强调能打造出具有设计感的界面。选择一种空间策略：宽松的留白空间，或是紧凑的信息密度，不要两者折中。
背景需要有氛围感：网格渐变、细微噪点、几何纹理、分层深度。纯白色或纯黑色很少是正确选择。
如果美学方向与移动端约束存在冲突（比如低功耗设备上的glassmorphism效果、小屏幕上的高密度编辑风设计），要明确说明权衡方案，确定优先项。

Code Quality

代码质量

  • CSS variables for every design token: color, spacing, type scale, radius
  • No placeholder content without a comment explaining what replaces it
  • Semantic HTML throughout
  • Responsive from the start: state whether mobile-first or desktop-first
  • Contrast ratios that pass WCAG AA at minimum
The implementation complexity must match the visual ambition. Do not write sparse code for a layered design, or over-engineer a minimal one.
Before submitting, reload 
references/design-reference.md
and check the common traps list. Then ask the user to open the result in a browser and confirm it looks right. Code that looks correct in your head but wrong in the browser is not done.
  • 所有设计token都使用CSS变量：颜色、间距、字号体系、圆角
  • 占位内容必须附带注释，说明替换规则
  • 全程使用语义化HTML
  • 从一开始就支持响应式：明确说明是移动端优先还是桌面端优先
  • 对比度至少达到WCAG AA标准
实现复杂度要与视觉目标匹配。不要为分层设计编写过于简略的代码，也不要为极简设计过度工程化。
提交前，重新加载
references/design-reference.md
，检查常见陷阱列表。随后请用户在浏览器中打开结果，确认显示效果符合预期。只有你脑海中认为正确但浏览器中显示错误的代码不算完成。

Handoff

交付

End with:
  • The aesthetic direction, named and justified in two or three sentences
  • Any non-obvious choices explained: typeface selection, color decisions, layout logic
  • Clear instructions for replacing placeholder content with real content
After Handoff, stop. Do not iterate further unless the user requests changes.
交付时需包含以下内容：
  • 美学方向说明，用2-3句话命名并说明理由
  • 所有非常规选择的解释：字体选择、配色决策、布局逻辑
  • 替换占位内容为真实内容的清晰指引
交付完成后就停止迭代，除非用户明确要求修改。