Web Design Skills
One system, every screen — designed once, shipped everywhere.
Turns your AI into a web-design kit builder — assembles a coherent set of skills that take a site from design tokens through components, pages, responsive states, and handoff, so every screen ships from one system instead of being designed twice.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
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
- 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. - 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." - 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.
Template preview
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
