// Apply visual design principles when building or reviewing UI/frontend code.
Based on Design for Hackers by David Kadavy. Use when: choosing fonts, colors,
or layout proportions; reviewing designs for visual issues; establishing visual
hierarchy; creating color palettes or type scales; adding motion or interaction;
making responsive design decisions; building any user-facing interface.
Apply visual design principles when building or reviewing UI/frontend code.
Based on Design for Hackers by David Kadavy. Use when: choosing fonts, colors,
or layout proportions; reviewing designs for visual issues; establishing visual
hierarchy; creating color palettes or type scales; adding motion or interaction;
making responsive design decisions; building any user-facing interface.
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
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)
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
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
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)
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)
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
