design-for-ai
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDesign for AI — Visual Design Principles
面向AI的设计 — 视觉设计原则
Based on principles from Design for Hackers by David Kadavy
基于David Kadavy所著《Design for Hackers》中的原则
Modes of Operation
运行模式
This skill operates in two modes: CHECKER (audit existing designs) and APPLIER (build from scratch). Choose based on context.
本技能有两种运行模式：CHECKER（审核现有设计）和APPLIER（从零开始构建），请根据上下文选择。
CHECKER Mode: Reviewing an Existing Design
CHECKER模式：审核现有设计
Run through these checks in order. Stop and investigate when a check fails.
Phase 0: Context
Before auditing, ask: What is this design for? Who is the audience? What framework/constraints exist? What aesthetic direction was intended?
1. Purpose and Foundation
- Design has a clearly articulated purpose driving all decisions
- Visual design and information design work together (~75% of credibility signals)
- Level of polish is appropriate to context (not over- or under-designed)
- Style is grounded in current tech/culture, not surface-copying a trend
- See references/chapter-01-why-design-matters.md, references/chapter-02-purpose-of-design.md
Issues found? → Run for detailed diagnosis or to establish foundations.
/exam/design2. Typography
- Typeface is appropriate for rendering medium (screen vs print)
- Body text passes squint test (even gray texture, no dark blotches)
- No fake bold, fake italic, or stretched/compressed type
- Font pairing uses compatible letter structures or deliberate extreme contrast
- Max two font families; one serif + one sans-serif
- Proper typographic characters (smart quotes, real dashes, no double spaces)
- See references/chapter-03-typography.md, references/appendix-fonts-and-typography.md
Issues found? → Run for typography selection and configuration.
/fonts3. Proportions and Layout
- Major element sizes relate through identifiable ratios (2:3, 3:4, golden)
- Margins create geometric relationship between content and container
- Size progressions follow a consistent scale factor (e.g., multiply by 0.75)
- See references/chapter-05-proportions.md
Issues found? → Run for detailed diagnosis.
/exam4. Composition
- One element is clearly dominant (visual anchor / entry point)
- Eye is guided through composition by directional forces
- Foreground/background depth relationship exists
- Similarity creates cohesion (recurring shapes, colors, textures)
- Contrast supports intended hierarchy
- See references/chapter-06-composition.md
Issues found? → Run for detailed diagnosis.
/exam5. Visual Hierarchy
- White space follows proportional system (not arbitrary pixel values)
- Type sizes differ by meaningful amounts (skip steps in scale)
- Ornamentation is minimal — used only when space/weight/size/color are insufficient
- Tables have no unnecessary rule lines (Tufte 1+1=3)
- See references/chapter-07-visual-hierarchy.md
Issues found? → Run for detailed diagnosis.
/exam6. Color
- Palette follows identifiable color wheel relationship
- No information conveyed by color alone (colorblindness: ~10% of males)
- Functional colors follow conventions (red=error, green=success, blue=link)
- Warm/cool relationships create depth (warm advances, cool recedes)
- Shadows use hue-shifted colors, not pure black
- Data viz uses perceptually uniform colors (Lab/Colorbrewer, not raw HSL)
- See references/chapter-08-color-science.md, references/chapter-09-color-theory.md
Issues found? → Run for color system building.
/color7. SEO and Discoverability
- Content in semantic HTML (not locked in images/canvas)
- Unique, keyphrase-rich title tags on every page
- Human-readable URLs with keywords
- Proper heading hierarchy (single H1, logical H2-H6)
- See references/chapter-04-technology-and-culture.md
8. Motion and Interaction
- Animations are purposeful (guide attention, show state change, provide feedback)
- All interactive elements have proper states (hover, focus, active, disabled, loading, error, success)
- Focus management works for keyboard navigation; :focus-visible used
- Loading states exist (optimistic UI, skeletons, or spinners)
- See references/motion.md, references/interaction.md
Issues found? → Run for motion, interaction, and responsive implementation.
/flow9. Responsive Design
- Layout is fluid with content-driven breakpoints
- Touch targets meet minimum 44x44px
- Typography and spacing scale fluidly (clamp())
- Interface adapts to context, not just shrinks
- See references/responsive.md
Issues found? → Run for responsive implementation.
/flow10. Design Identity
- Design has intentional aesthetic, not default/generic
- No common AI design tells (cyan-on-dark, card-everything, glassmorphism, bounce easing)
- Design has memorable character traceable to purpose
- See references/ai-tells.md
Issues found? → Run to strip AI tells and add character.
/brand按顺序执行以下检查，检查不通过时请停下排查问题。
阶段0：上下文梳理
在审核前，请先明确：这个设计的用途是什么？目标受众是谁？存在哪些框架/约束条件？预期的美学方向是什么？
1. 目标与基础
- 所有设计决策都围绕明确阐述的目标展开
- 视觉设计与信息设计相辅相成（约75%的可信度信号来自于此）
- 打磨程度适配场景需求（不会过度设计也不会设计不足）
- 风格基于当前技术/文化背景，而非表面跟风潮流
- 参考资料：references/chapter-01-why-design-matters.md, references/chapter-02-purpose-of-design.md
发现问题？→ 运行获取详细诊断，或运行搭建基础。
/exam/design2. 排版
- 字体适配展示介质（屏幕/印刷）
- 正文通过眯眼测试（灰度均匀，无深色斑块）
- 无伪粗体、伪斜体，也没有拉伸/压缩的字体
- 字体配对使用兼容的字母结构，或者刻意制造极强对比
- 最多使用两种字体系列：一种衬线字体 + 一种无衬线字体
- 使用正确的排版字符（智能引号、真实破折号，无双空格）
- 参考资料：references/chapter-03-typography.md, references/appendix-fonts-and-typography.md
发现问题？→ 运行选择和配置排版方案。
/fonts3. 比例与布局
- 主要元素的尺寸符合可识别的比例关系（2:3、3:4、黄金比例）
- 边距让内容和容器之间形成几何关联
- 尺寸变化遵循一致的缩放系数（例如乘以0.75）
- 参考资料：references/chapter-05-proportions.md
发现问题？→ 运行获取详细诊断。
/exam4. 构图
- 有一个明显占主导地位的元素（视觉锚点/入口点）
- 视线会通过方向性引导在构图中流动
- 存在前景/背景的深度关系
- 相似性打造 cohesion（重复的形状、颜色、纹理）
- 对比度支撑预期的层级关系
- 参考资料：references/chapter-06-composition.md
发现问题？→ 运行获取详细诊断。
/exam5. 视觉层级
- 留白遵循比例系统（而非随意的像素值）
- 字号差异有明确意义（跳过字号尺度的中间级）
- 装饰元素最少化 — 仅在留白/字重/字号/颜色不足以传递信息时使用
- 表格无多余的分隔线（符合Tufte 1+1=3原则）
- 参考资料：references/chapter-07-visual-hierarchy.md
发现问题？→ 运行获取详细诊断。
/exam6. 颜色
- 调色板符合可识别的色环关系
- 没有仅通过颜色传递的信息（约10%的男性存在色盲问题）
- 功能性颜色遵循惯例（红色=错误、绿色=成功、蓝色=链接）
- 冷暖色关系打造深度（暖色向前突出，冷色向后退）
- 阴影使用色相偏移的颜色，而非纯黑色
- 数据可视化使用感知统一的颜色（Lab/Colorbrewer，而非原始HSL）
- 参考资料：references/chapter-08-color-science.md, references/chapter-09-color-theory.md
发现问题？→ 运行搭建色彩系统。
/color7. SEO与可发现性
- 内容使用语义化HTML（没有锁定在图片/canvas中）
- 每个页面都有唯一的、包含关键词的title标签
- URL可读性强且包含关键词
- 标题层级正确（单个H1，逻辑连贯的H2-H6）
- 参考资料：references/chapter-04-technology-and-culture.md
8. 动效与交互
- 动画有明确目的（引导注意力、展示状态变化、提供反馈）
- 所有交互元素都有完整的状态（hover、focus、active、disabled、loading、error、success）
- 键盘导航的焦点管理正常；使用:focus-visible
- 存在加载状态（乐观UI、骨架屏或加载动画）
- 参考资料：references/motion.md, references/interaction.md
发现问题？→ 运行实现动效、交互和响应式适配。
/flow9. 响应式设计
- 布局是流式的，断点由内容驱动
- 触摸目标最小满足44x44px要求
- 排版和间距流式缩放（使用clamp()）
- 界面适配场景，而非单纯缩小
- 参考资料：references/responsive.md
发现问题？→ 运行实现响应式适配。
/flow10. 设计辨识度
- 设计有明确的美学风格，而非默认/通用风格
- 没有常见的AI设计痕迹（深色底色配青色、全卡片布局、玻璃态、弹性缓动）
- 设计有可追溯到目标的记忆点特征
- 参考资料：references/ai-tells.md
发现问题？→ 运行去除AI痕迹并增加设计个性。
/brandAPPLIER Mode: Creating or Guiding Design
APPLIER模式：创建或指导设计
Follow this sequence when building a design from scratch or making major changes.
Phase 0: Context
Gather design context: purpose, audience, aesthetic direction, constraints, references and anti-references. Run if not yet established.
/designPhase 1: Foundation (before any visual work)
- Define purpose: what should users feel, do, trust?
- Create user personas (name, occupation, quote, needs)
- Define primary use cases
- Create wireframes (layout only, no visual styling)
- Assess competitive context to right-size design investment
- Read references/chapter-01-why-design-matters.md, references/chapter-02-purpose-of-design.md
Gate: Purpose defined and personas created before proceeding to Phase 2.
Phase 2: Structure
6. Choose a proportional system (2:3, 3:4, or golden ratio)
7. Derive canvas, content area, and margins from that ratio
8. Build a proportional type scale (e.g., 5, 7, 9, 12, 16, 21, 28, 37, 50, 67 at 3:4)
9. Set up grid for element placement
- Read references/chapter-05-proportions.md
Gate: Proportional system chosen and type scale defined before proceeding to Phase 3.
Phase 3: Typography
10. Select body font matched to rendering medium (sans-serif for web body)
11. Identify letter structure (humanist, geometric, realist)
12. If pairing, match structures for harmony or use extreme contrast
13. Set leading 1.2-1.4em, ragged right for web, proper typographic characters
- Read references/chapter-03-typography.md, references/appendix-fonts-and-typography.md
Gate: Font selection finalized and type scale applied before proceeding to Phase 4.
Phase 4: Composition and Hierarchy
14. Establish one dominant element as visual anchor
15. Build hierarchy: white space first, then weight, size, color, ornamentation (one at a time)
16. Create foreground/background depth layers
17. Guide eye with directional forces (alignment, progressive sizing)
18. Ensure similarity (shape language, repeating motifs)
- Read references/chapter-06-composition.md, references/chapter-07-visual-hierarchy.md
Gate: Visual hierarchy established with clear dominance before proceeding to Phase 5.
Phase 5: Color
19. Choose background appropriate to content density (white for content-heavy)
20. Select base hue matching desired mood
21. Build palette using color wheel (monochromatic, analogous, complementary, etc.)
22. Assign functional colors (errors, success, links, CTAs)
23. Use warm/cool for depth; hue-shifted shadows, not pure black
24. Test for colorblindness; add redundant cues (shape, text, position)
- Read references/chapter-08-color-science.md, references/chapter-09-color-theory.md
Gate: Color palette defined and accessibility tested before proceeding to Phase 6.
Phase 6: SEO and Technical
25. Semantic HTML with proper heading hierarchy
26. Unique title tags, descriptive URLs, meta descriptions
27. Descriptive image filenames and alt text
28. CSS3 native effects over image hacks
- Read references/chapter-04-technology-and-culture.md
Phase 7: Motion and Interaction
29. Define entry animations (staggered reveals, fade+translate)
30. Map state transitions (expand/collapse, show/hide, tab switches)
31. Add feedback (button press, form validation, loading)
32. Set timing (100ms micro, 300ms standard, 500ms complex) and easing (ease-out entries, ease-in exits)
33. Map all interaction states (default, hover, focus, active, disabled, loading, error, success)
34. Implement focus management and form validation
- Read references/motion.md, references/interaction.md
Phase 8: Responsive
35. Mobile-first with min-width queries and content-driven breakpoints
36. Fluid typography and spacing with clamp()
37. Touch targets minimum 44x44px
38. Adapt interface for context — don't just shrink
- Read references/responsive.md
从零开始构建设计或做重大调整时请遵循以下流程。
阶段0：上下文梳理
收集设计上下文：目标、受众、美学方向、约束、参考和反参考。如果还未明确请运行。
/design阶段1：基础（所有视觉工作前完成）
- 定义目标：用户应该感受到什么、做什么、信任什么？
- 创建用户画像（姓名、职业、引言、需求）
- 定义核心用例
- 制作线框图（仅布局，无视觉样式）
- 评估竞争环境，确定合理的设计投入量级
- 阅读参考：references/chapter-01-why-design-matters.md, references/chapter-02-purpose-of-design.md
准入要求： 进入阶段2前必须明确定义目标并创建用户画像。
阶段2：结构
6. 选择比例系统（2:3、3:4或黄金比例）
7. 根据该比例推导画布、内容区域和边距
8. 构建比例字号尺度（例如3:4比例下的5,7,9,12,16,21,28,37,50,67）
9. 搭建元素摆放的栅格系统
- 阅读参考：references/chapter-05-proportions.md
准入要求： 进入阶段3前必须选好比例系统并定义字号尺度。
阶段3：排版
10. 选择适配展示介质的正文字体（网页正文用无衬线字体）
11. 确定字母结构（人文主义、几何、现实主义）
12. 如果要配对字体，要么结构匹配保证和谐，要么使用极强对比
13. 设置行高1.2-1.4em，网页用右对齐，使用正确的排版字符
- 阅读参考：references/chapter-03-typography.md, references/appendix-fonts-and-typography.md
准入要求： 进入阶段4前必须最终确定字体选择并应用字号尺度。
阶段4：构图与层级
14. 确定一个主导元素作为视觉锚点
15. 搭建层级：优先用留白，然后字重、字号、颜色，最后才用装饰（依次使用）
16. 创建前景/背景深度层
17. 通过方向性引导（对齐、渐进式缩放）引导视线
18. 确保相似性（形状语言、重复的 motifs）
- 阅读参考：references/chapter-06-composition.md, references/chapter-07-visual-hierarchy.md
准入要求： 进入阶段5前必须建立清晰主导的视觉层级。
阶段5：颜色
19. 选择适配内容密度的背景（内容密集的场景用白色）
20. 选择匹配预期情绪的基础色相
21. 用色环构建调色板（单色、近似色、互补色等）
22. 分配功能性颜色（错误、成功、链接、CTA）
23. 用冷暖色打造深度；使用色相偏移的阴影，而非纯黑色
24. 色盲测试；添加冗余提示（形状、文本、位置）
- 阅读参考：references/chapter-08-color-science.md, references/chapter-09-color-theory.md
准入要求： 进入阶段6前必须定义调色板并完成可访问性测试。
阶段6：SEO与技术实现
25. 语义化HTML搭配正确的标题层级
26. 唯一的title标签、描述性URL、meta描述
27. 描述性的图片文件名和alt文本
28. 优先用CSS3原生效果而非图片hack
- 阅读参考：references/chapter-04-technology-and-culture.md
阶段7：动效与交互
29. 定义入场动画（错峰展示、淡入+位移）
30. 映射状态过渡（展开/收起、显示/隐藏、标签切换）
31. 添加反馈（按钮点击、表单校验、加载）
32. 设置时长（100ms微交互、300ms标准、500ms复杂动效）和缓动（入场用ease-out、退场用ease-in）
33. 映射所有交互状态（默认、hover、focus、active、disabled、loading、error、success）
34. 实现焦点管理和表单校验
- 阅读参考：references/motion.md, references/interaction.md
阶段8：响应式
35. 移动端优先，使用min-width查询和内容驱动的断点
36. 用clamp()实现流式排版和间距
37. 触摸目标最小44x44px
38. 适配场景调整界面 — 不要单纯缩小
- 阅读参考：references/responsive.md
Quick Commands
快捷命令
| Need | Command | What it does |
|---|---|---|
| Set up design foundations | | Purpose, audience, aesthetic direction → saves to CLAUDE.md |
| Full design audit | | Theory-backed review — finds problems and explains WHY |
| Strip AI tells, add character | | Make it intentionally designed, not generated |
| Typography help | | Select, pair, configure fonts with theory backing |
| Color system | | Build palette from color science up |
| Motion + interaction + responsive | | Add movement, states, screen adaptation |
| Final quality pass | | Every principle checked, pixel-level |
| 需求 | 命令 | 功能 |
|---|---|---|
| 搭建设计基础 | | 明确目标、受众、美学方向 → 保存到CLAUDE.md |
| 完整设计审核 | | 基于理论的评审，定位问题并解释原因 |
| 去除AI生成痕迹，增加设计个性 | | 打造刻意设计的效果，而非生成感的内容 |
| 排版帮助 | | 基于理论选择、配对、配置字体 |
| 色彩系统搭建 | | 基于色彩科学构建调色板 |
| 动效 + 交互 + 响应式适配 | | 添加动效、交互状态、多屏幕适配 |
| 最终质量检测 | | 逐像素核对所有设计原则 |
Symptom → Chapter
问题对应参考章节
| Symptom / Question | Go To | Why |
|---|---|---|
| "Design feels like a superficial veneer" | references/chapter-01-why-design-matters.md | Design as layered discipline, not decoration |
| "How much design investment does this need?" | references/chapter-02-purpose-of-design.md | Personas, use cases, wireframes, right-sizing |
| "Which font should I use?" | references/chapter-03-typography.md | Medium-form relationship, squint test |
| "Design style feels like a copy" / SEO | references/chapter-04-technology-and-culture.md | Style from tech+culture; SEO as design |
| "How big should elements be?" | references/chapter-05-proportions.md | Proportional systems, Tschichold margins |
| "Layout is boring / nothing holds the eye" | references/chapter-06-composition.md | Dominance, direction, depth, contrast |
| "Can't tell what's important" | references/chapter-07-visual-hierarchy.md | White space > weight > size > color |
| "Colors don't match / colorblindness" | references/chapter-08-color-science.md | Gamuts, perceptual uniformity, accessibility |
| "How do I choose a color palette?" | references/chapter-09-color-theory.md | Color wheel schemes, mood, hue-shifted shadows |
| "Fonts don't look right together" | references/appendix-fonts-and-typography.md | Letter structure, the n test, pairing |
| 问题/疑问 | 参考章节 | 原因 |
|---|---|---|
| "设计感觉只是表面装饰" | references/chapter-01-why-design-matters.md | 设计是分层的学科，而非装饰 |
| "这个项目需要投入多少设计资源？" | references/chapter-02-purpose-of-design.md | 用户画像、用例、线框图、资源量级评估 |
| "我该用哪种字体？" | references/chapter-03-typography.md | 介质适配关系、眯眼测试 |
| "设计风格感觉是抄袭的" / SEO相关问题 | references/chapter-04-technology-and-culture.md | 风格源自技术+文化；SEO属于设计的一部分 |
| "元素尺寸该设为多大？" | references/chapter-05-proportions.md | 比例系统、Tschichold边距规则 |
| "布局很无聊/没有吸引眼球的内容" | references/chapter-06-composition.md | 主导性、引导性、深度、对比度 |
| "分不清内容的优先级" | references/chapter-07-visual-hierarchy.md | 留白 > 字重 > 字号 > 颜色 |
| "颜色不协调/色盲适配问题" | references/chapter-08-color-science.md | 色域、感知一致性、可访问性 |
| "我该怎么选调色板？" | references/chapter-09-color-theory.md | 色环配色方案、情绪适配、色相偏移阴影 |
| "字体搭配看起来不协调" | references/appendix-fonts-and-typography.md | 字母结构、n测试、配对规则 |
Anti-Rationalization Table
反合理化对照表
| Excuse | Reality | Reference |
|---|---|---|
| "I'm not a designer, I just need it to work" | Design IS how it works. 75% of credibility judgments are design-based (Fogg). | Ch. 1 |
| "I'll make it pretty at the end" | Design-as-afterthought produces veneer. Purpose, medium, and aesthetics must be considered together from the start. | Ch. 1-2 |
| "I'll just use a nice template" | Templates are other people's decisions for other contexts. Without understanding layers, you're copying surface patterns. | Ch. 1 |
| "Proportions don't matter for web/app design" | Device screens themselves use these proportions (3:4, 2:3, 16:9). Proportional relationships are perceived subconsciously. | Ch. 5 |
| "I used a grid, so composition should be fine" | A grid determines placement, not how the eye moves. You still need dominance, direction, and contrast. | Ch. 6 |
| "White space is wasted space" | White space is the most powerful hierarchy signal. It communicates both importance and relationships. | Ch. 7 |
| "I need borders on my table cells" | Alignment guides the eye just as effectively. Borders add visual noise via Tufte's 1+1=3. | Ch. 7 |
| "Color is subjective, there's no right answer" | Color wheel relationships, psychological research, and cultural conventions provide objective frameworks that reliably outperform pure intuition. | Ch. 9 |
| "Garamond is a timeless classic, it works everywhere" | Garamond is timeless for print. On screen at body sizes, its angled axis and subtle curves blur and create moire. Use Georgia. | Ch. 3 |
| "Nobody notices fake bold or straight quotes" | Fake bold closes counters and looks clunky. Straight quotes signal amateur typography. Even non-designers sense something is "off." | Appendix |
| 借口 | 事实 | 参考章节 |
|---|---|---|
| "我不是设计师，只要能用就行" | 设计本身就是产品的使用体验组成部分。75%的可信度判断都基于设计（Fogg研究）。 | 第1章 |
| "我最后再美化就行" | 事后补充的设计只会是表面装饰。目标、介质和美学必须从一开始就共同考虑。 | 第1-2章 |
| "我直接用个好看的模板就行" | 模板是其他人针对其他场景做的决策。不理解设计的底层逻辑，你只是在复制表面样式。 | 第1章 |
| "比例对网页/应用设计不重要" | 设备屏幕本身就采用这些比例（3:4、2:3、16:9）。比例关系会被用户潜意识感知到。 | 第5章 |
| "我用了栅格系统，布局应该没问题" | 栅格只决定元素位置，不决定用户的视线流动。你仍然需要考虑主导性、引导性和对比度。 | 第6章 |
| "留白就是浪费空间" | 留白是最有力的层级信号，它既能传达重要性也能体现内容关联。 | 第7章 |
| "我的表格单元格需要加边框" | 对齐就足够有效引导视线。边框会带来Tufte提出的1+1=3的视觉噪音。 | 第7章 |
| "颜色是主观的，没有正确答案" | 色环关系、心理学研究和文化惯例提供了客观框架，效果远好于纯直觉判断。 | 第9章 |
| "Garamond是永恒经典，在哪都能用" | Garamond对于印刷来说是永恒经典。在屏幕上作为正文字号使用时，它的倾斜轴线和精细曲线会模糊，产生摩尔纹。请用Georgia。 | 第3章 |
| "没人会注意到伪粗体或者直引号" | 伪粗体压缩了字怀，看起来很笨重。直引号是业余排版的标志。就算不是设计师也会感觉到哪里"不对劲"。 | 附录 |