📦 Variant Design Skill — Variant工具

Solve the blank canvas problem. Prompt → 3 fully-formed distinct designs → vary → export.

关于

Inspired by the Variant design community — a space where designers share divergent takes on the same brief. This skill brings that practice into Claude Code: every prompt yields three designs that feel like they came from different studios, then lets you iterate with one-word actions.

Built on the Impeccable design system — a comprehensive set of design references covering typography, color theory, spatial design, motion, interaction patterns, responsive design, and UX writing. Every design decision is grounded in these principles.

Supports: HTML (默认) · React · 7 domain reference libraries · 27 palettes · design system references · variation actions

---

Project Context Initialization

On first use in a project, gather design context to ground all future generations. Ask the user:

• Users & Purpose — 谁 uses ? 什么 problem 做 solve? 什么's core task?
• Brand & Personality — Existing brand colors? Tone (playful / serious / technical / warm)? 任何 sites 您 admire?
• Aesthetic Preferences — Light 或 dark? Minimal 或 dense? 任何 direction 从 aesthetic 表 您're drawn 到?
• Constraints — 框架 requirements? Accessibility standards beyond baseline? Target devices?

If the user can't answer, infer from their codebase: scan for existing color variables, font imports, component patterns, and README/brand docs. Confirm inferences before proceeding.

Persist context as a comment block at the top of generated files or in the conversation — reference it in every subsequent generation to ensure consistency across variations.

---

Scenario Detection → 加载 Reference

Identify the scenario and load the corresponding reference file before designing:

User asks about...	Also matches	Load
Dashboard, analytics, metrics, monitoring, data viz	后台, admin panel, management system, backoffice, CRM, internal tool	references/dashboard.md
Editorial, magazine, journalism, news, article	blog post, report, white paper, newsletter	references/editorial.md
Landing page, SaaS, product page, startup, B2B	website, 官网, corporate site, personal site, portfolio, agency	references/saas.md
E-commerce, shopping, product, fintech card, consumer	store, shop, marketplace, cart, checkout	references/ecommerce.md
Education, learning app, quiz, language, science	lesson, flashcard, tutorial, training, course	references/education.md
Generative art, music tool, 3D, creative tool, synthesizer	tool, studio, editor, canvas, sequencer, DAW	references/creative.md
Mobile app, iOS, Android, onboarding, home screen	app, 应用, 界面, UI screen	references/mobile.md
Unsure / general	Use aesthetic directions table below + references/palettes.md

Always 也 加载 relevant design system references 从 references/design-system/ based 在...上 什么 matters 最多 对于 design:

Design challenge	Load
Font selection, type scale, hierarchy	references/design-system/typography.md
Color palette, dark mode, contrast	references/design-system/color-and-contrast.md
Layout, spacing, grids, visual hierarchy	references/design-system/spatial-design.md
Animations, transitions, loading states	references/design-system/motion-design.md
Forms, states, focus, keyboard nav	references/design-system/interaction-design.md
Mobile-first, breakpoints, fluid design	references/design-system/responsive-design.md
Labels, errors, empty states, microcopy	references/design-system/ux-writing.md

For initial generation, load at minimum: typography, color-and-contrast, and spatial-design. Load others as the design demands.

Core Workflow

1. 解析 → Detect → 加载

Identify scenario, load domain reference file + relevant design system references, pick 3 starter prompts and palettes. Study the Real Community Examples for composition patterns and what makes each design work — extract the principle, not the surface style.

2. Generate 3 Distinct Variations

Each variation = a different studio's interpretation. Never two in the same direction.

Universal aesthetic directions:

Direction	Feel	Signature
Minimal / Editorial	Type-driven, generous space	One strong font, minimal color
Bold / Expressive	High contrast, graphic	Dominant color block
Dark / Premium	Moody, atmospheric	Deep bg, elevated surfaces (not shadows)
Warm / Human	Rounded, approachable	Soft palette, organic forms
Data / Technical	Dense, systematic	Grid, monospace, tight
Neo-brutalist	Raw, unconventional	Bold outlines, broken grid
Luxury / Silence	Maximum negative space	One image, sparse text

对于 每个 variation, define 之前 coding:

• Starter prompt (从 reference 或 custom)
• Color palette (从 reference 或 palettes.md) — 使用 OKLCH 对于 perceptually uniform colors 在哪里 possible
• Typography: display font + body font (see banned fonts 列表 下面)
• 布局 pattern (从 reference) — consult spatial-design.md 对于 grid 和 hierarchy principles
• Motion strategy — consult motion-design.md 对于 timing 和 easing
• One signature detail makes variation unforgettable

3. Implement

Working code — HTML (default) or React. Real content, no lorem ipsum. Visually complete.

Label: Variation A — [Name] / B — [Name] / C — [Name]

4. AI Slop Test (Quality Gate)

Before presenting, run this check on each variation:

If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, redesign.

A distinctive interface should make someone ask "how was this made?" not "which AI made this?" Review the Anti-Patterns table below — they are the fingerprints of AI-generated work.

5. Offer Variation Actions

After presenting, always offer:

Which direction resonates? Options:
- Vary strong — push aesthetic to its extreme
- Vary subtle — polish, same direction
- Distill — strip to essence, remove everything non-essential
- Change style — keep layout, swap visual language
- Remix colors — 3 alternative palettes using OKLCH
- Shuffle layout — same content/style, different composition
- Polish — refine spacing, typography, and micro-details
- Critique — audit against design system principles
- Extract tokens — export design tokens as CSS/JSON/Tailwind config
- See other views — mobile / dark mode / empty state / onboarding / hover states

---

Variation Action Definitions

Vary strong

Amplify current direction to maximum. More contrast, stronger type, bolder color, more dramatic composition. Consult references/design-system/typography.md for scale ratios and references/design-system/color-and-contrast.md for high-contrast palette construction.

之前 → 之后 示例:

• Body text 16px, heading 32px → Body 15px, heading 72px (ratio 1.25 → 1.5+)
• Accent used 在...上 buttons 仅 → Accent dominates hero section, bleeds 进入 nav
• Subtle 200ms fade-在...中 → Dramatic 600ms staggered reveal 带有 scale transform

Vary subtle

Tighten spacing, refine hierarchy, soften where needed. Same direction, higher craft. Focus on vertical rhythm, optical alignment, and micro-interactions per references/design-system/spatial-design.md and references/design-system/motion-design.md.

之前 → 之后 示例:

• Inconsistent padding (16/20/24px) → Locked 到 4pt grid (16/24/32px)
• Generic hover (opacity 更改) → Contextual hover (card lifts 2px, 按钮 darkens accent)
• Missing OpenType → tabular-nums 在...上 data, font-kerning: normal 在...上 headlines

Distill

Strip the design to its absolute essence. Inspired by the Impeccable distill philosophy — ruthless simplification reveals what truly matters.

Process:

• Identify single core purpose 的 接口
• 对于 每个 元素, ask: "做 removing break core purpose?" 如果 否, 移除 .
• Simplify 穿过 所有 dimensions:

- Information: 归约 visible options, 使用 progressive disclosure (, hover reveals) - Visual: Fewer colors (aim 对于 2–3 总计), fewer 类型 sizes, 移除 decorative elements - 布局: Collapse sections, merge related content, eliminate redundant containers - Interaction: Fewer clicks 到 complete primary task, 移除 confirmation steps 在哪里 undo works - Content: Shorter headlines, tighter 复制, 移除 introductory paragraphs restate heading

• 验证: 可以 新的 用户 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 菜单

更改 样式

Extract structure/layout DNA, replace entire visual language with a different direction from the table above.

Remix colors

Keep all shapes, type, layout. Generate 3 palettes using OKLCH color space (per references/design-system/color-and-contrast.md):

• 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 布局

Same content + style. Rearrange structure: try full-bleed → asymmetric grid → editorial columns → card masonry. Consult references/design-system/spatial-design.md for grid systems and visual hierarchy principles.

之前 → 之后 示例:

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

Polish

Apply Impeccable design system refinements systematically:

• 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

Systematic audit against design system principles. Score each dimension and provide specific fixes:

• 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

Export the design's token system in the requested format:

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

Render additional views with full design system compliance:

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

1. Acknowledge briefly ("No projects yet") 2. Explain the value of filling it ("Create your first project to start tracking progress") 3. Provide a clear primary action (prominent CTA button) 4. Add visual interest (illustration, icon, or subtle pattern — never a sad face) 5. If applicable, show a preview of what it will look like when populated

• 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:

- Rethink 对于 thumb zones (primary actions bottom-right 对于 right-handed) - Touch targets ≥44px 带有 padding - 导航 collapses 到 hamburger + drawer 或 bottom 标签页 bar - Tables transform 到 cards 带有 data-label attributes - 使用 @media (pointer: coarse) 对于 larger tap areas

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

- Dark mode uses lighter surfaces 对于 depth (否 shadows) - Desaturate accent colors slightly 对于 dark backgrounds - 归约 font weight (light text 在...上 dark appears heavier) - Never pure black (#000) background — 使用 oklch(12-18% ...) tinted

• Onboarding flow — per Impeccable onboard principles:

- Show Don't Tell: inline demos > text instructions - 使 可选: skip 按钮 always visible, 否 forced tours - 时间 到 值: reach "aha moment" 在...中 ≤3 steps - Context 在...上 Ceremony: teach 在 moment 的 需要, 不 upfront - Respect 用户 Intelligence: 否 condescending language, allow power-用户 shortcuts

• 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)

• Design 所有 8 states: 默认, hover, focus, 活跃, 已禁用, loading, 错误, 成功.
• Focus rings: Never outline: 无 没有 replacement. 使用 :focus-visible.
• Forms: Visible labels (不 只是 placeholders), 验证 在...上 blur, errors 下面 fields 带有 aria-describedby.
• Skeleton screens > spinners. Optimistic UI 对于 low-stakes actions.
• Undo > confirm dialogs. Users click 通过 confirmations mindlessly.
• Modals 仅 作为 最后的 resort. Prefer native <对话框> 当...时 needed. Consider Popover API 对于 non-模态框 overlays.

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

• Specific 按钮 labels: "保存 changes" 不 "OK", "创建 账户" 不 "Submit".
• 错误 formula: 什么 happened → 为什么 → 如何 到 fix. Never blame 用户.
• 空 states opportunities: Acknowledge, explain 值, provide 清除 action.
• 链接 text 必须 standalone: "视图 pricing plans" 不 "Click 这里".

---

Code 导出

• HTML: Single-file, embedded CSS, 可选 vanilla JS. 默认.
• React: Functional components, Tailwind 或 CSS modules — state assumptions upfront.

HTML 输出 Spec

• 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:

Anti-pattern	Instead
Two variations in the same aesthetic direction	Ensure A/B/C feel like different studios — re-check the direction table
Inter, Roboto, Arial, system-ui as display fonts	Distinctive fonts: Instrument Sans, Fraunces, Outfit, Newsreader
Hardcoded hex values in CSS rules	CSS custom properties with OKLCH: color: var(--text)
Lorem ipsum or placeholder text	Real, domain-plausible content
Generic "Feature 1 / Feature 2 / Feature 3" copy	Specific feature names that match the domain
Five or more colors used at similar weight	60-30-10: one dominant color used with conviction
Cards with identical sizes and equal visual weight	Vary card sizes to create rhythm and hierarchy
Hover states missing on interactive elements	Every button, link, and card needs hover + focus-visible
Mobile layouts that are just desktop shrunk down	Rethink for thumb zones, touch targets, and vertical flow
Gradient abuse (5+ color gradient backgrounds)	One solid color or a two-stop gradient maximum
Purple-to-blue gradients, cyan-on-dark, neon accents	Intentional palette from OKLCH, tinted neutrals
Glassmorphism everywhere (blur, glow borders)	Purposeful decorative elements that reinforce brand
Big rounded icons above every heading	They rarely add value — use typography for hierarchy
Cards nested inside cards	Flatten hierarchy — use spacing and dividers
Everything centered	Left-aligned with asymmetric layouts feels more designed
Same spacing everywhere	Varied spacing creates rhythm — tight groups, generous separations
Gradient text on headings/metrics	Decorative, not meaningful — use solid color with weight
Dark mode as default with glowing accents	Earn dark mode: different surface depths, desaturated accents, no shadows
Bounce/elastic easing	Exponential ease-out — real objects decelerate smoothly
outline: none without replacement	:focus-visible with 2-3px offset ring
Modals for everything	Consider alternatives: inline expansion, drawers, popovers
Pure black (#000) or pure white (#fff)	Always tint — pure extremes don't exist in nature
Gray text on colored backgrounds	Use darker shade of the background color
Empty state = "No data" text only	Design as onboarding moment: acknowledge, explain value, CTA
Text that overflows its container	overflow-wrap: break-word, text-overflow: ellipsis, line-clamp

---

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