craft

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

1. 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.
2. 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).
3. Intentional Whitespace: Use a strict 8pt spacing scale. Section padding should be generous (py-24 to py-48) to allow content to breathe.
4. OKLCH Color Discipline: Use OKLCH for all color definitions to ensure perceptual uniformity. Limit the palette to one primary accent color.
5. Depth & Materiality: Use subtle borders (1px) and ultra-diffuse shadows instead of heavy gradients. Create layers using backdrop-filter and nested containers.
6. 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.