🎨 design — Website Design Department

One head skill for the whole design department. Creates original design from an idea, brief, or approved reference — structure first, then direction, then final art. Every decision is emitted as tokens and specs an engineer can build from.

Modes

Every invocation resolves to exactly one mode. Match the request, then load only the matched reference:

Only the resolved mode's reference is loaded — the rest stay on disk, saving tokens on every run.

Support references (load on topic)

Loadable by topic; also routable as /design-<file> commands (not separate routed modes):

• slides.md

When to Use

• Designing a new site, page, or dashboard from a brief, idea, or approved mood references.
• Creating wireframes, user flows, or information architecture before any visual design.
• Designing a logo or full brand identity system (colors, type, voice rules).
• Building a social template system or graphic assets (banners, covers, OG images).
• Building industry-specific landing pages using structured layout templates (e.g. SaaS, Developer Tools).

Layout Templates & Vertical Selector Matrix

Every landing page or homepage design MUST strictly match the client's industry vertical. Never apply technical or code-first templates to non-developer verticals:

Layout template details:

• SaaS (templates/saas.md): Canonical 9-section problem-solving landing page layout (Header/Nav → Hero → Logos/Trust Marquee → Features → Product Showcase → Pricing → Testimonials → Final CTA → Footer) aligned with 9 copywriting frameworks (AIDA, PASTOR, 4 P's, PRUNE, SLAP, So What?, PAPA, Star-Story-Solution, SPIN).
• Developer (templates/developer.md): Canonical 7-block developer homepage layout (Hero with 1-Command Install → Frictionless Demo / Playground → Architecture & Mechanics → Code-First Feature Grid → Developer Social Proof & OSS Stats → Quickstart & Integration Surface → Transparent Pricing & License) synthesized from Jakub Czakon's developer marketing framework. Strict negative guards prevent application to non-technical verticals.

Anti-Triggers

• Improving or refactoring an existing interface → refactor-ui.
• Extracting a design system from a reference (screenshot/URL/Figma) → designscope.
• Adding motion or animation → animate.
• Scaffolding the project repository → new-project.

Quick Reference

Department intake gate (every run)

Client has a live brand but no tokens → run designscope on their site first.

Deliverable ladder

Skipping an approval gate is how rework happens.

Defaults (client tokens override whenever they exist)

• Spacing: 4px base scale — 4/8/12/16/24/32/48/64.
• Type: one display + one text family, 1.25 (minor third) scale.
• Color roles: primary (brand), action (CTA), neutral (text/surface), semantic (success/warn/danger).
• Contrast: 4.5:1 body text, 3:1 large text — verified before delivery.
• Output shape: decisions as tokens (OKLCH/hex, DTCG naming) + component specs, not just pictures.

CLI Engine Commands (brand-assets.ts)

Procedure

1. Intake. run the department intake gate in Quick Reference; client brand inputs win over invented direction every time.
2. Resolve the mode. Match the request against the mode table; exactly one mode. Ambiguous → ask one question, then proceed.
3. Execute the mode playbook. Load references/<mode>.md and follow its Intake → Deliverable → Procedure → Quality gate in order.
4. Gate and deliver. Pass this file's Verification checklist plus the mode's quality gate, then deliver the artifact where the client expects it.

Pitfalls

• Designing hi-fi before structure is agreed — rework machine. Wireframe approval comes first.
• Inventing brand colors when the client already has a brand — designscope their assets; existing tokens win.
• More than 2 type families, or decorative faces on body text.
• Happy-path-only components — every component needs hover, focus, disabled, loading, empty, and error states.
• Default OS artifacts: generic blue ::selection, default OS scrollbars, or unpadded focus rectangles.
• Static dark favicons that disappear on dark-mode browser tabs.
• Page-to-page aesthetic drift — one token set per project, extended, never forked.
• Delivering pictures without specs or tokens — engineers guess, pixels drift.
• Wrong mode resolved (branding request treated as ui) — deliverable shape is wrong; re-route.

Verification

• Exactly one mode resolved and its reference playbook followed end to end.
• Every visual decision traces to an intake input (goal, audience, brand, or approved reference).
• Text/background pairs pass AA: 4.5:1 body, 3:1 large text.
• Spacing and type come from a stated scale; at most 2 type families.
• Brand immersion styling verified: ::selection has WCAG AA contrast, custom scrollbars match palette.
• Keyboard accessibility preserved: :focus-visible offset ring configured without square clipping.
• Adaptive dark/light SVG favicon and site.webmanifest present in public/.
• Components specified with all interactive states and responsive behavior.
• Existing-brand work used the client's tokens verbatim — nothing invented over them.