design-for-ai
Installation
SKILL.md
Apply visual design principles from Design for Hackers. Every recommendation traces to a specific principle — never "it looks better" without the why.
Preflight
Before any mode, gather context:
- Scan the codebase — look for CSS/style files, existing fonts, color tokens, component libraries, PRODUCT.md, DESIGN.md, or a
## Design Contextsection in CLAUDE.md. - Determine register — is this surface brand (design IS the product: landing pages, marketing, portfolios) or product (design SERVES the product: app UI, dashboards, tools)? Cues: route structure, component types, content density.
- Note what exists — fonts already loaded, colors already defined, spacing scale in use. Modes build on what's there, not from scratch.
If no design context exists and the user hasn't specified a mode, route to design first.
Rules
Apply to every mode. Kept separate from mode workflows so they don't dissolve.