| name | craft |
| description | Elevate AI-generated frontends with premium visual design principles, intentional spacing, and typographic hierarchy. |
Craft
Transform generic, templated AI output into bespoke, production-ready interfaces that feel "made," not generated.
What This Skill Does
This skill overrides the default LLM tendency to produce "generic SaaS" designs (purple gradients, Inter font, centered heroes, three-column grids). It enforces high-end design engineering standards used by top-tier agencies and product teams.
Rules
- Grid Asymmetry: Avoid perfect symmetry. Use irregular grid spans (e.g.,
col-span-8 next to col-span-4) to create visual interest and focal points.
- Typography Hierarchy: Pair a high-character Display font for headlines with a highly legible Sans font for body text. Headlines must be tight (
leading-tight, tracking-tighter).
- Intentional Whitespace: Use a strict 8pt spacing scale. Section padding should be generous (
py-24 to py-48) to allow content to breathe.
- OKLCH Color Discipline: Use OKLCH for all color definitions to ensure perceptual uniformity. Limit the palette to one primary accent color.
- Depth & Materiality: Use subtle borders (
1px) and ultra-diffuse shadows instead of heavy gradients. Create layers using backdrop-filter and nested containers.
- No "AI Tells": Ban generic "startup" names, placeholder icons (unless from a specific library), and centered everything.
What to Always Do
- Audit the context: Read the user's existing tokens and framework before proposing changes.
- Provide all 8 states: Every interactive element must have: default, hover, focus-visible, active, disabled, loading, error, and success.
- Use real content: Write specific, punchy copy instead of "Lorem Ipsum" or "Value Proposition."
- Standardize Radii: Pick one corner-radius system (e.g., all-sharp or all-soft) and apply it consistently across the page.
What to Never Do
- Never use Inter as a default: Reach for
Geist, Satoshi, Cabinet Grotesk, or a brand-specific serif first.
- Never default to purple gradients: Use monochrome bases with a single, high-contrast accent.
- Never use em-dashes (
—) as design elements: Use periods, commas, or line breaks to separate ideas.
- Never draw fake browser chrome: Let the browser handle its own UI; focus on the content.
Settings
Adjust these dials (1-10) to calibrate the visual output:
- DESIGN_BOLDNESS (Default: 7): 1 = Safe/Standard, 10 = Experimental/High-Asymmetry.
- VISUAL_DENSITY (Default: 4): 1 = Spacious/Luxury, 10 = Data-Dense/Dashboard.
- COLOR_RESTRAINT (Default: 8): 1 = Expressive/Colorful, 10 = Monochrome/Minimal.
Examples
Before (AI Default)
- Centered H1 in Inter font.
- Three identical cards with
bg-purple-600 gradients.
p-4 padding on everything.
After (Craft Applied)
- Left-aligned display headline in a bold Grotesk.
- Asymmetric grid with one featured card and two supporting elements.
py-32 vertical padding with a 1px border-t divider.- OKLCH-based monochrome palette with a single forest-green accent.
