• 验证: 可以 新的 用户 complete core task faster? 如果 不, 您 removed wrong things.

之前 → 之后 示例:

• 5-section landing page → 2 sections: hero 带有 值 prop + single CTA
• Dashboard 带有 12 metric cards → 3 键 metrics large + "Show 所有" expandable
• Nav 带有 8 items → 4 primary + overflow 菜单

更改 样式

Remix colors

• Analogous 到 current — shift hue ±30°, adjust chroma
• Complementary contrast — opposite hue, rebalanced lightness
• Unexpected/left-字段 — completely 不同 mood

Always tint neutrals toward the brand hue. Never use pure gray, pure black (#000), or pure white (#fff).

之前 → 之后 示例 (palette 3, unexpected):

• Dark indigo tech dashboard → Warm cream editorial palette 带有 rust accent
• 所有 neutrals shift 从 cool blue-gray → warm stone-tinted

Shuffle 布局

之前 → 之后 示例:

• Centered hero + 3-列 grid → 满-bleed left-aligned hero + asymmetric 2-列 带有 oversized feature

Polish

• Typography (references/design-system/typography.md): vertical rhythm, modular scale, OpenType features (tabular-nums 对于 data, proper fractions), font-display: swap, size-adjust fallback metrics
• Spatial (references/design-system/spatial-design.md): squint test, hierarchy 通过 multiple dimensions, optical alignment (text negative margin -0.05em, icon center offsets)
• Interaction (references/design-system/interaction-design.md): 所有 8 interactive states (默认/hover/focus/活跃/已禁用/loading/错误/成功), focus-visible rings, proper 表单 design (visible labels, blur validation, aria-describedby errors)
• Motion (references/design-system/motion-design.md): 100/300/500 rule, ease-out-expo 对于 enters, exit 在 75% 的 enter 持续时间, staggered animations 带有 CSS custom properties
• UX Writing (references/design-system/ux-writing.md): specific 按钮 labels (verb + 对象), 错误 formula (什么 → 为什么 → fix), 空 states teach 接口, 链接 text 带有 standalone meaning
• Clarify 复制: Scan 所有 visible text — 替换 vague labels 带有 specific ones, 移除 redundant intros, ensure every word earns place. "Submit" → "创建 账户". "错误" → "Email needs 到 在...中 name@示例.com 格式."

Critique

• Typography: hierarchy 清除? Scale ratio consistent? Fonts distinctive? Vertical rhythm locked?
• Color: WCAG contrast passing? Neutrals tinted? 60-30-10 balance? 否 pure black/white?
• 布局: Passes squint test? Varied spacing creates rhythm? Cards justified? 否 nested cards?
• Motion: Durations appropriate (100/300/500)? Ease-out 对于 enters? Reduced motion respected? 仅 transform+opacity animated?
• Interaction: 所有 8 states designed? Focus rings present? Touch targets ≥44px? Skeleton > spinner?
• Responsive: Mobile-第一个? Content-driven breakpoints? 输入框 方法 detected (pointer/hover)? Safe areas?
• Writing: Specific 按钮 labels? Helpful errors (什么/为什么/fix)? 空 states teach? 否 redundant 复制?
• Resilience: Text truncation handled? Long content graceful? Loading/错误 states present? i18n-就绪 spacing?

Extract tokens

CSS Custom Properties (默认):

:root {
  / Primitives /
  --blue-500: oklch(55% 0.2 260);
  --stone-100: oklch(95% 0.01 60);
  / Semantic /
  --color-primary: var(--blue-500);
  --color-surface: var(--stone-100);
  / Typography /
  --font-display: 'Fraunces', serif;
  --font-body: 'Instrument Sans', sans-serif;
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-xl: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  / Spacing /
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 48px; --space-2xl: 96px;
  / Motion /
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 350ms;
}

JSON (对于 design tools / Figma): 相同 structure 作为 flat 键-值 JSON.

Tailwind 配置: Extend 主题 带有 colors, fontFamily, spacing, transitionTimingFunction.

See 其他 views

• 空 state — 不 只是 "否 items." Design 作为 onboarding moment:

• Data-filled state — realistic volume: 3–7 items 对于 lists, 6–12 months 的 data 对于 charts, edge cases included (one very long name, one 空 可选 字段)

• Mobile viewport — 不 shrunk desktop. Per references/design-system/responsive-design.md:

• Dark ↔ Light 切换 — per references/design-system/color-和-contrast.md:

• Onboarding flow — per Impeccable onboard principles:

• Hover / 活跃 / focus states — 所有 interactive elements 带有 visible state changes

Variation 循环

After any variation action, always:

• Present updated design (labelled 带有 action taken, e.g. "Variation — Distill")
• Offer 满 action 菜单 again — 循环 never ends until 用户 moves 在...上
• 如果 用户 有 iterated 3+ 乘以 在...上 相同 direction, proactively suggest: "Want 到 branch? I 可以 apply 到 one 的 其他 variations."

Design Principles

Grounded in the Impeccable design system. Consult individual references for deep implementation guidance.

Content & Intent

• Real content wins. Plausible headlines, real data values, actual 复制. Makes designs feel alive.
• Commit fully. Half-executed aesthetics look worse 比 simple ones. Bold maximalism 和 refined minimalism both work — 键 intentionality, 不 intensity.
• Never converge. 如果 dark, B cannot 也 dark. 每个 必须 feel 点赞 不同 studio.
• Match 类型 到 domain. Don't 默认 到 generic app UI — 加载 right reference.

Typography (→ references/design-system/typography.md)

• Distinctive display + reliable body. 使用 Google Fonts @导入, always specify weights.
• Banned display fonts: Inter, Roboto, Arial, 打开 Sans, Lato, Montserrat, system-ui, system defaults.
• Better alternatives: Instrument Sans, 加上 Jakarta Sans, Outfit, Onest, Figtree, Urbanist, Fraunces, Newsreader, Lora.
• Modular scale: 使用 fewer sizes 带有 更多 contrast (5-size system: xs/sm/base/lg/xl+). Popular ratios: 1.25, 1.333, 1.5.
• Fluid 类型: 使用 clamp(min, preferred, max) 对于 responsive sizing. 不 对于 buttons/labels.
• Vertical rhythm: Line-height 作为 base unit 对于 所有 vertical spacing.
• OpenType features: tabular-nums 对于 data tables, diagonal-fractions 对于 recipes, 所有-small-caps 对于 abbreviations.
• Never mix 更多 比 2 typefaces. One well-chosen family 在...中 multiple weights often suffices.

Color (→ references/design-system/color-和-contrast.md)

• 使用 OKLCH 对于 perceptually uniform palettes. 归约 chroma 作为 您 approach white/black.
• Tint neutrals toward brand hue — 甚至 chroma 0.01 creates subconscious cohesion.
• 60-30-10 rule: 60% neutral, 30% secondary, 10% accent. Accent colors work 因为 它们're rare.
• Never pure black/white. Always tint. Pure black/white never appears 在...中 nature.
• Never gray 在...上 color. Gray text 在...上 colored backgrounds looks washed out — 使用 darker shade 的 background color.
• Two-layer tokens: Primitive (--blue-500) + semantic (--color-primary: var(--blue-500)). Dark mode redefines semantic 仅.

布局 & Space (→ references/design-system/spatial-design.md)

• 4pt base grid (不 8pt — too coarse). Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px.
• 使用 gap 代替 的 margins 对于 sibling spacing.
• Squint test: Blur eyes — 可以 您 identify 最多 important 元素, 第二个 最多, 和 清除 groupings?
• Hierarchy 通过 multiple dimensions: Combine size, weight, color, position, 和 space (2-3 在 once).
• Cards 不 必填. Spacing 和 alignment 创建 grouping naturally. Never nest cards inside cards.
• Container queries 对于 组件-level responsiveness.

Motion (→ references/design-system/motion-design.md)

• 100/300/500 rule: 100-150ms instant feedback, 200-300ms state changes, 300-500ms 布局 changes, 500-800ms entrances.
• Ease-out-expo (cubic-bezier(0.16, 1, 0.3, 1)) 对于 elements entering. Exit 在 75% 的 enter 持续时间.
• 仅 animate transform 和 opacity. 对于 height: 使用 grid-模板-rows: 0fr → 1fr.
• Stagger 带有 CSS custom properties: animation-延迟: calc(var(--i) 50ms). Cap 总计 stagger 时间.
• Reduced motion 不 可选. Always include @media (prefers-reduced-motion: 归约).
• Never bounce/elastic easing. Real objects decelerate smoothly.

Interaction (→ references/design-system/interaction-design.md)

UX Writing (→ references/design-system/ux-writing.md)

• CSS custom properties 对于 所有 colors — 使用 OKLCH 在哪里 supported 带有 hex fallback: --accent: oklch(65% 0.2 250); / fallback: #6366F1 */
• Semantic 令牌 layer: --color-primary, --color-surface, --color-text mapping 到 primitives
• Google Fonts 通过 @导入 在...中 <样式> — always specify weights used, include font-display: swap
• Responsive: mobile-第一个, breakpoints 在 640px 和 1024px. 使用 clamp() 对于 fluid values
• 否 frameworks 由 默认 — vanilla CSS + HTML. CDN Tailwind 仅 如果 用户 asks
• Hover states + focus-visible rings 在...上 所有 interactive elements
• @media (prefers-reduced-motion: 归约) 屏蔽 对于 所有 animations
• Minimum visual completeness: populated data, real 复制, working nav state

React 输出 Spec

• Functional components 仅 — 否 类 components
• Declare color tokens 作为 const 主题 = { ... } 带有 OKLCH values 和 hex fallbacks
• Google Fonts: 添加 <链接> 在...中 returned JSX 或 instruct 用户 到 添加 到 索引.html
• Prefer inline styles 对于 one-off values; extract repeated patterns 到 styles 对象
• State assumptions upfront 在...中 评论 屏蔽: 哪个 components stateful, 什么 props 到 pass
• 如果 Tailwind: 使用 @apply 对于 repeated patterns; 如果 CSS modules: one .模块.css per 组件
• 否 useEffect 对于 布局 — CSS-仅 animations 和 transitions preferred
• Prop defaults 必须 realistic content (否 未定义, 否 "Lorem ipsum")

Multi-Screen / Flow Support

When a user asks for a flow (onboarding, checkout, wizard, multi-step form):

• Render 所有 screens side-由-side horizontally, 每个 在...中 390px frame 带有 label 上面
• 使用 shared currentStep state 变量 到 show/hide screens 如果 making interactive
• Annotate transitions: "→ swipe left 到 advance" 或 "→ 标签页 triggers step 2"
• 每个 screen 必须 visually complete — never leave screen 空 作为 placeholder
• Apply onboarding principles: show don't tell, 使 skip visible, reach "aha" 在...中 ≤3 steps

Performance Baseline

Every output must meet these minimums:

• Images: loading="lazy" 在...上 下面-fold images, width/height attributes 到 prevent CLS, srcset 对于 responsive images, WebP/AVIF 格式 preference
• Fonts: font-display: swap, subset 到 used character ranges 当...时 possible, preconnect 到 Google Fonts origin: <链接 rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
• CSS: 否 @导入 对于 CSS files (blocks render) — 仅 对于 Google Fonts 在...中 <样式>. 使用 content-visibility: auto 对于 off-screen sections
• Animation: 仅 transform 和 opacity (GPU-composited). 否 将-更改 unless animation imminent. 使用 Intersection Observer 对于 scroll-triggered animations — never scroll 事件 listeners
• 布局: 否 布局 thrashing (读取 然后 写入, never interleave). Avoid forced synchronous reflows

Production Hardening Checklist

Apply when the design will be used in real products:

Text resilience:

• 所有 text containers handle overflow: overflow: hidden; text-overflow: ellipsis 对于 single-line, -webkit-line-clamp 对于 multi-line
• Test 带有 2× expected content length — 做 布局 survive?
• Test 带有 0 content — 做 空 state 使 sense?
• Headings: overflow-wrap: break-word 到 prevent horizontal scroll 在...上 mobile

i18n readiness:

• 否 fixed-width containers 对于 text — allow 30% expansion 对于 German/French
• 使用 logical properties: margin-inline-开始 不 margin-left (RTL support)
• Numbers: 使用 Intl.NumberFormat 对于 locale-aware formatting
• Dates: 使用 Intl.DateTimeFormat — never hardcode 日期 formats

错误 & edge states:

• Network failure: show 最后的-known data 带有 "Unable 到 更新" banner, 不 blank screen
• Slow 连接: skeleton screens appear 在...内 200ms 如果 data isn't 就绪
• 无效 data: graceful degradation (show "--" 对于 missing numbers, 不 NaN/未定义)

输入框 robustness:

• Debounce 搜索/过滤 inputs (300ms)
• Prevent double-submit 在...上 forms (disable 按钮 之后 第一个 click, re-enable 在...上 错误)
• Paste handling: strip formatting 在...上 paste 进入 plain-text inputs

Anti-Patterns (AI Slop Fingerprints)

Avoid these in every output — they are the telltale signs of AI-generated design:

Accessibility Baseline

Apply to every output — non-negotiable:

• Text contrast minimum: 4.5:1 对于 body, 3:1 对于 large text (≥24px bold 或 ≥18.5px normal)
• 所有 interactive elements: minimum 44×44px touch/click target (使用 pseudo-elements 如果 visual size smaller)
• Focus rings: never outline: 无 没有 custom visible :focus-visible replacement
• Don't convey meaning 由 color alone — pair 带有 icon, label, 或 pattern
• Avoid pure white 在...上 pure black 对于 long-表单 text — slightly off-white/off-black (#F0EDE8 在...上 #111) reduces eye strain
• @media (prefers-reduced-motion: 归约) — preserve functional animations (progress, loading), 移除 spatial movement
• 使用 rem/em 对于 font sizes, never px 对于 body text — respect browser settings
• Minimum 16px body text 在...上 所有 viewports
• Keyboard 导航: logical 标签页 order, skip links 对于 nav-heavy pages, roving tabindex 对于 组件 groups
• ARIA: landmarks (main, nav, aside), live regions 对于 dynamic content, aria-describedby 对于 表单 errors