When to use: You need a landing page for a product and don't want to commission or pay for Figma work.
Flow
-
Feed the brand
/web-design — build a landing page for 'Lumo', a B2B SaaS for event logistics. Reference: stripe.com's layout; vibe: calm, competent.✓ Copied
→ Skill generates DESIGN.md with 9 sections; shows it before coding
-
Edit the spec, not the code
In DESIGN.md, change primary color to #2E6BE6 and headings to Inter Tight. Regenerate the page from the updated spec.✓ Copied
→ Code regenerated to match edits; no random extra changes
-
Audit
Run the skill's audit step — flag any component that doesn't match DESIGN.md tokens.✓ Copied
→ Audit report with per-component pass/fail
Outcome: A landing page that looks designed, not 'AI-ed'. Portable DESIGN.md you can hand to a designer later for refinement.
Pitfalls
- Spec is ignored on the second page — Always regenerate 'from DESIGN.md'; don't ask Claude to add a page without spec reference
- Reference URL too generic (e.g. 'apple.com') — Point at something in your product's category; vague references yield vague specs
When to use: Marketing handed you new brand tokens and you don't want to touch 300 components by hand.
Flow
-
Import tokens into DESIGN.md
Update DESIGN.md with these new colors and typography. Leave layout/motion/components sections alone.✓ Copied
→ Clean diff on DESIGN.md
-
Regenerate styles
Regenerate the globals and component styles from DESIGN.md. Do not touch component structure.✓ Copied
→ Style-only diff; zero structural changes
-
Audit and fix stragglers
Audit across src/components. Any hardcoded colors/fonts not from the spec?✓ Copied
→ List of offenders; patches applied
Outcome: Coherent rebrand; no ghost-old-color surprises two weeks later.
Pitfalls
- Hardcoded hex scattered across the codebase — Audit catches them; make fixing part of the rebrand, not 'later'
When to use: You have a screenshot of a reference site and want a coherent starter, not a pixel clone.
Flow
-
Provide the screenshot
Attached: screenshot of [reference.png]. Extract the design cues to DESIGN.md (vibe only — don't clone).✓ Copied
→ DESIGN.md with cues inferred from the image, not literal pixel values
-
Set your content
Override content in DESIGN.md's 'Narrative' section with my product's copy.✓ Copied
→ Spec keeps the structural cues but with your content
-
Generate
Generate a Next.js + Tailwind starter from DESIGN.md.✓ Copied
→ Code compiles; matches the spec; original enough to not be a clone
Outcome: A starter inspired by but distinct from the reference — ethically and visually.
Pitfalls
- Temptation to ask for an exact clone — Don't — the skill is designed to extract cues, not reproduce; asking for clones degrades output