Was ist enthalten

Eine SKILL.md (die Anleitung) + eine Startvorlage. Eine Vorschau:

Web Design Skills

When to use

• You are designing a full site and the homepage, pricing page, and blog already look like three different products
• Your team keeps redesigning the same button, card, and form because no shared component set exists
• Mobile layouts are improvised per page instead of following one responsive system
• Handoff to development keeps producing "that's not what I designed" because states and specs were never written down
• A redesign is underway and nobody can say which parts of the old system survive

Workflow

1. Scope the kit (input: site map, audience, brand constraints → output: kit inventory)
   Define the site before building anything: page list, primary user journeys, brand constraints (existing logo, colors, type), and the devices and breakpoints the audience actually uses. The default kit: design tokens, components, pages, responsive states, and handoff. A single landing page may need only tokens and components; a full marketing site or product site needs all five. Cut skills the project will not maintain — a component library nobody updates becomes a museum of good intentions.
2. Lock the design spine (input: brand constraints + site map → output: design spine)
   Distill the site's design decisions into a spine before any skill is built: voice and personality in one line, color roles (not just swatches — what each color does), type scale and its jobs, spacing rhythm, and the rules for when to break them. Every token later in the kit must trace to a spine decision. The spine is the single source of truth — no kit skill may invent a new accent color because one screen "needed something."
3. Build the skills in dependency order (input: design spine → output: five working skills)
   Build in the order the work actually flows: tokens first (colors, type, spacing, radii, shadows as named values), then components (buttons, cards, forms, navigation built only from tokens), then pages (compositions of components for each template in the site map), then responsive states (how each component and page behaves at every breakpoint, plus loading, empty, and error states), then handoff (specs, assets, and annotations developers build from). Each skill gets its own prompt, its own input checklist, and its own output format — the kit is a set of tools, not one mega-prompt.
4. Apply the quality bar (input: five draft skills → output: kit that passes every gate)
   Run each skill against the same bar before the kit ships: every component uses tokens only — no hard-coded colors or sizes; every page uses components only — no one-off elements smuggled in; every component has all its states defined (default, hover, focus, active, disabled, loading, error, empty); every page is defined at every breakpoint the audience uses; and the handoff package lets a developer build the page without asking the designer a single question. A kit that fails any gate goes back to the skill that failed.
5. Compose the design workflow (input: passing kit → output: brief-to-shipped sequence)
   Wire the skills into the order a real project runs: spine settles direction, tokens encode it, components build the vocabulary, pages compose the site, responsive states cover the devices, handoff ships it. Define the handoffs: a new page starts from the component set, never from a blank canvas; a new component must justify itself against the existing set before being added; responsive work happens per component, not as a separate "mobile phase" at the end. The kit is only done when a new page can be assembled from existing pieces.
6. Maintain the kit (input: new pages, brand changes, user feedback → output: updated spine and skills)
   When a new page needs something the kit lacks, add it to the right layer: a new color goes in tokens, a new pattern in components, never as a one-off on the page. Update the spine when brand direction changes and regenerate affected tokens. Retire components nobody uses — a library with forty buttons is a library nobody trusts.

Vorschau der Startvorlage

Web Design Skills — Kit Template

Build the kit in order: spine first, then tokens, components, pages, responsive states, handoff.

1. Site brief

Pages / templates: {list from site map} | Primary journeys: {journey 1, journey 2} Brand constraints: {logo, colors, type — or "none, new brand"} Breakpoints (audience devices): {e.g. 360 / 768 / 1024 / 1440}

2. Design spine (single source of truth)

3. Kit inventory

4. Quality gate (every skill must pass)

[ ] Every component uses tokens only — no hard-coded colors or sizes [ ] Every page uses components only — no one-off elements

Das Skill-Paket selbst (SKILL.md + Vorlage) ist auf Englisch verfasst.

Das komplette Skill-Paket kaufen — $4.99 Pro — alle 511 Skills