design-for-ai（AI 设计）

Design for AI — Visual Design Principles

Based on principles from *Design for Hackers* by David Kadavy

Modes of Operation

This skill operates in two modes: CHECKER (audit existing designs) and APPLIER (build from scratch). Choose based on context.

CHECKER Mode: Reviewing an Existing Design

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 /exam for detailed diagnosis or /design to establish foundations.

2. 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 /fonts for typography selection and configuration.

3. 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 /exam for detailed diagnosis.

4. 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 /exam for detailed diagnosis.

5. 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 /exam for detailed diagnosis.

6. 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 /color for color system building.

7. 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 /flow for motion, interaction, and responsive implementation.

9. 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 /flow for responsive implementation.

10. 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 /brand to strip AI tells and add character.

APPLIER Mode: Creating or Guiding Design

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 /design if not yet established.

Phase 1: Foundation (before any visual work)

1. Define purpose: what should users feel, do, trust?
2. Create user personas (name, occupation, quote, needs)
3. Define primary use cases
4. Create wireframes (layout only, no visual styling)
5. 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

Quick Commands

Symptom → Chapter

Anti-Rationalization Table