Back to Details

design-workflow

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Workflow Skill

设计工作流技能

Guidelines for making UI designs that don't look AI-generated. These rules apply to any design work — prototypes, design docs, or UI code.
打造非AI生成风格UI设计的指南。这些规则适用于所有设计工作——原型、设计文档或UI代码。

What This Skill Does

本技能的作用

  1. Teaches how to avoid "generic AI" design patterns
  2. Provides a checklist for design quality
  3. Guides component-by-component design approach
  4. Sets prototype quality standards
  1. 教授如何规避「AI通用化」设计模式
  2. 提供设计质量检查清单
  3. 指导组件化设计方法
  4. 设定原型质量标准

Rule 1: Use the Existing Design System

规则1：使用现有设计系统

NEVER invent new colors, fonts, or spacing. Always use what the project defines.
**绝对不要自创颜色、字体或间距。**始终使用项目已定义的规范。

What to Read FIRST

首先需要阅读的内容

  1. .planning/design-config.md
    — project colors, fonts, spacing, brand identity
  2. The theme files listed in design-config — actual CSS tokens
  3. Existing components in the codebase — match their patterns
  1. .planning/design-config.md
    — 项目颜色、字体、间距、品牌标识规范
  2. design-config中列出的主题文件 — 实际的CSS tokens
  3. 代码库中的现有组件 — 匹配它们的设计模式

Key Points

核心要点

  • Use EXACT hex values from the project palette (not Tailwind defaults like 
    bg-blue-500
    )
  • Use the project's font — don't swap in Inter, Poppins, or Space Grotesk
  • Use the project's border radius and shadow values
  • Reference CSS variables or tokens — don't hardcode
  • 使用项目调色板中的精确十六进制值（而非Tailwind默认值，如
    bg-blue-500
    ）
  • 使用项目指定字体 — 不要替换为Inter、Poppins或Space Grotesk
  • 使用项目定义的圆角和阴影值
  • 引用CSS变量或tokens — 不要硬编码

Rule 2: Avoid Generic AI Patterns

规则2：规避AI通用化模式

These patterns scream "AI made this" — avoid them ALL:
以下模式明显带有「AI生成」特征——务必全部规避：

Colors

颜色

  • Don't use colors outside the project palette
  • No random purple/violet gradients (the #1 AI cliche)
  • No neon colors or rainbow gradients
  • No gray-on-gray with no accent color
  • Use the project's accent color — that's what makes it unique
  • 不要使用项目调色板外的颜色
  • 避免随机紫色/紫罗兰渐变（AI最常见的陈词滥调）
  • 不要使用霓虹色或彩虹渐变
  • 避免无强调色的灰-on-gray配色
  • 使用项目的强调色——这是设计独特性的关键

Layout

布局

  • No centered-everything-with-max-width-on-every-section
  • No hero with a giant gradient blob behind text
  • No three-column feature cards with icons that all look the same
  • No 50/50 split with image on right, text on left (for every section)
  • Break the grid sometimes — asymmetry is more interesting
  • 不要所有区块都采用居中+固定最大宽度的布局
  • 不要在文字后方添加巨型渐变 blob 的Hero区域
  • 避免三个图标完全一致的三列功能卡片
  • 不要每个区块都用图片右、文字左的50/50分栏布局
  • 偶尔打破网格——不对称设计更具吸引力

Typography

排版

  • No single font size for everything
  • Create clear hierarchy: big headings, medium subheads, small body
  • Use font weight contrast
  • Don't center-align long text blocks
  • 不要所有文本使用同一字号
  • 建立清晰的层级：大标题、中号副标题、小号正文
  • 利用字体粗细形成对比
  • 长文本块不要居中对齐

Components

组件

  • No rounded rectangles that all look identical
  • Give cards visual variety — different sizes, featured vs normal
  • Buttons should have clear primary/secondary/ghost hierarchy
  • Don't use icons for everything — sometimes text is better
  • 避免所有圆角矩形组件外观完全一致
  • 给卡片添加视觉差异——不同尺寸、特色卡片与普通卡片区分
  • 按钮需明确区分主按钮/次要按钮/幽灵按钮层级
  • 不要凡事都用图标——有时文字效果更好

Copy

文案

  • No generic marketing fluff ("Unlock your potential", "Take it to the next level")
  • Be specific — use real feature names and real numbers
  • Match the tone from design-config's Design Personality
  • 避免通用营销套话（如「释放你的潜力」「更上一层楼」）
  • 内容要具体——使用真实功能名称和数据
  • 匹配design-config中「设计风格调性」的要求

Rule 3: Design Component by Component

规则3：组件化设计

Don't design a whole page at once. Build pieces, then compose.
不要一次性设计整页内容。先构建单个组件，再进行组合。

Order of Work

工作顺序

  1. Design tokens — Confirm colors, fonts, spacing from existing theme files
  2. Base components — Button, Card, Badge, Input (small, isolated)
  3. Composite components — Nav bar, Sidebar, Hero section, Feature card
  4. Full screens — Compose components into pages
  5. States — Add loading, empty, error states to each component
  6. Responsive — Adjust each screen for mobile/tablet/desktop
  1. 设计tokens — 确认现有主题文件中的颜色、字体、间距规范
  2. 基础组件 — 按钮、卡片、徽章、输入框（独立小型组件）
  3. 复合组件 — 导航栏、侧边栏、Hero区域、功能卡片
  4. 完整页面 — 将组件组合成页面
  5. 状态设计 — 为每个组件添加加载、空状态、错误状态
  6. 响应式适配 — 针对移动端/平板/桌面端调整页面

Rule 4: Use Visual References

规则4：使用视觉参考

When references are given:
  1. Study what makes it look good (layout, color, typography, whitespace)
  2. Take inspiration, don't copy — match the quality level, not the exact layout
  3. Apply to the project's design system
When NO references are given:
  • Check Reference Apps in design-config
  • Focus on whitespace — more space = more premium
  • Use accent color sparingly — max 10-15% of the screen
  • Make one thing big and bold per section (hierarchy)
当提供参考素材时：
  1. 研究其出彩之处（布局、颜色、排版、留白）
  2. 汲取灵感而非直接复制——匹配质量水准，而非照搬布局
  3. 适配项目的设计系统
当没有提供参考素材时：
  • 查看design-config中的「参考应用」
  • 注重留白——更多留白更显高端
  • 谨慎使用强调色——占屏幕比例不超过10-15%
  • 每个区块突出一个核心元素（层级感）

Rule 5: Prototype Quality Standards

规则5：原型质量标准

Must Have

必备要求

  • Exact colors from the project theme files
  • Real fonts loaded
  • Proper spacing (not random padding everywhere)
  • Real content (not "Lorem ipsum")
  • All states visible (loading, empty, error, success)
  • Responsive: works at 375px, 768px, 1440px
  • 使用项目主题文件中的精确颜色
  • 加载真实字体
  • 合理间距（不要随意设置内边距）
  • 使用真实内容（而非「Lorem ipsum」占位文本）
  • 展示所有状态（加载、空状态、错误、成功）
  • 响应式适配：支持375px、768px、1440px视口

Must NOT Have

禁止事项

  • Placeholder images or stock photo URLs
  • Default Tailwind colors
  • Missing hover/focus states
  • Broken layout at any viewport
  • Text that's hard to read (check contrast)
  • 使用占位图片或库存图片链接
  • 使用Tailwind默认颜色
  • 缺失hover/focus状态
  • 任何视口下布局断裂
  • 文本可读性差（检查对比度）

Review & Checklists

审查与检查清单

See checklists.md for the self-check, critic review checklists, and design-implementation mismatch troubleshooting.
详见checklists.md，包含自我检查、评审检查清单以及设计与实现不匹配问题的排查方法。