The problem this solves: visual taste alone does not define the audience, promise, evidence, conversion path, motion, copy, technical structure, or launch plan. This skill resolves those decisions in plain language, inspects real websites and competitors, persists an approved brief, proves the direction in a rendered sample, and only then completes the build and post-build audit.
Works with Claude Code, Cursor, Codex, Windsurf, Grok, and any assistant that can read files. The design workflow is markdown; automatic updates use one bundled Python 3 standard-library script with no third-party dependencies.
/webdesign-start
↓
Phase 0 Intake — reads what you already said; never re-asks
rebuilds a complete, exact-count inventory of every live component/resource source
Phase 1 Discovery — 3-ish rounds of 3-4 multiple-choice questions,
plain language, famous-site comparisons, strategic evidence
Phase 2 Research — inspects your example sites first, then finds more only if needed;
you react, then each approved trait is mapped to this project
Phase 3 Brief — creative, conversion, motion, copy, technical strategy + references
+ selected live components become DESIGN-BRIEF.md
you approve a short digest
── hard gate: no code before your approval ──
Phase 4 Build — compares every catalog without priority and uses the best-fit premium components,
then implements the brief
Phase 5 Review — audits reference/component/strategy carry-through + conversion,
then writes CONVERSION-AUDIT.md and a 30-day LAUNCH-PLAN.md
The brief persists the approved design system, while .webdesign-start/component-inventory.json retains the complete searchable catalog snapshot for the engagement. Every invocation refreshes that inventory before new selection work.
webdesign-start/
├── SKILL.md # the orchestrator — phases, gates, environment fallbacks
├── scripts/update_skill.py # safe Phase 0 updater: validates, swaps, rolls back on failure
└── references/ # loaded progressively, only when a phase needs them
├── discovery.md # adaptive questionnaire, branches per product type,
│ # + the "vague answer decoder" (what 'modern & clean' hides)
├── research.md # user-reference inspection, search recipes, galleries,
│ # reaction loop, Reference Translation Matrix
├── strategic-loops.md # seven hard loops: creative direction, critical-section
│ # conversion, motion, copy, build, audit, 30-day launch
├── component-sourcing.md # complete equal-weight catalog/resource inventory,
│ # selection, adaptation, and verification protocol
├── threeui.md # ThreeUI Community visual/GPU selection, runtime,
│ # fallback, asset, and licensing contract
├── styles.md # 46 UI styles in 10 families, each with CSS recipe + real examples
├── color.md # token architecture + ~28 industry palettes with hex
├── typography.md # 32 font pairings by personality + scale/fluid-type systems
├── layouts.md # hero patterns + section formulas per product type
├── industries.md # ~28 product-type playbooks with anti-patterns
├── anti-slop.md # AI-tell bans: violet-gradient dark mode, glow orbs, em dashes,
│ # hype copy ("elevate", "seamless"), template heroes
├── finishing.md # generative recipes: tinted neutrals, type conviction,
│ # accent discipline, the Foundation Gate
├── ux-rules.md # priority-tiered accessibility & UX rulebook
├── build-standards.md # implementation standards + pre-delivery checklist + self-review
└── brief-template.md # the DESIGN-BRIEF.md template
adapters/ # thin per-tool command shims (see install below)
Copy the skill folder into your project (or globally):
# per-project
Copy-Item -Recurse webdesign-start <your-project>\.claude\skills\webdesign-start
# or global (all projects)
Copy-Item -Recurse webdesign-start $HOME\.claude\skills\webdesign-startThen run /webdesign-start (it also auto-triggers on requests like "build me a landing page").
Copy-Item -Recurse webdesign-start <your-project>\webdesign-start
Copy-Item adapters\cursor\webdesign-start.md <your-project>\.cursor\commands\webdesign-start.mdThen run /webdesign-start in Cursor's chat.
Copy-Item -Recurse webdesign-start <your-project>\webdesign-start
Copy-Item adapters\codex\webdesign-start.md $HOME\.codex\prompts\webdesign-start.mdThen run /webdesign-start.
Copy-Item -Recurse webdesign-start <your-project>\webdesign-start
Copy-Item adapters\windsurf\webdesign-start.md <your-project>\.windsurf\workflows\webdesign-start.mdThen run /webdesign-start.
Put the webdesign-start folder where the assistant can read it, then paste the bootstrap prompt from adapters/universal-prompt.md.
The design-principles layer (style catalog, industry anti-patterns, priority-tiered UX rules, pre-delivery checklist) is inspired by and extends ui-ux-pro-max-skill. The seven-loop strategic framework was adapted from prompts supplied by the project owner and attributed to Farhan (@Farhan_Ai3); it turns creative direction, conversion, motion, copy, frontend planning, CRO review, and the first thirty launch days into required artifacts and verification gates. The live component layer treats four update-aware catalogs as one equal-weight toolkit rather than freezing copied lists or privileging a provider: the MIT-licensed beUI repository, ThreeUI Community, the community element library Uiverse, and Material Components Web. On every invocation, the skill rebuilds exact per-source counts and a searchable inventory of every current component identifier, then compares the strongest viable candidate from every catalog for each designed surface. Two live companions ride along: the taste-skill as a second anti-generic pass beside the built-in anti-slop rules, and design-resources-for-developers for sourcing fonts, illustrations, photography, and icons.
The skill updates itself at the start of an engagement when Python 3, network access, and write permission are available. A clean canonical checkout fast-forwards with Git; copied installs download the canonical archive, validate it, replace the skill atomically, and restore the previous copy if installation fails. If automatic updating is unavailable, the engagement continues with the local version and says why. The skill also rebuilds the Complete Resource Inventory from beUI, ThreeUI Community, Uiverse, MDC-web, taste-skill, and the asset index on every invocation. It records exact per-source counts, all current identifiers, provenance, and freshness so newly published components can enter selection immediately; if web access is unavailable, it marks the affected inventory stale and continues with an explicit offline fallback.
webdesign-start/VERSION travels with every copy. The skill also treats trend-sensitive content as suspect once the version date is over a year old, verifying trends by search instead of asserting stale ones. See CHANGELOG.md for release history.
- Give the opening message real information ("a site for my two-chair barbershop in Austin, we're booked out weeks") — Phase 0 harvests it and skips those questions.
- React honestly in the research phase. A "no, too corporate" is worth more than three polite "loves."
- Name sites you already admire, even from unrelated industries — the skill inspects these first and maps the parts you like to specific parts of your project.
- Critique the implemented component direction. The skill compares every catalog without priority and implements the best contextual fit; if one feels wrong in the style sample, explain what feels wrong and it will search the full collection again, then reselect or restyle it.
- Keep
DESIGN-BRIEF.mdin the repo. It's the memory. Future "add a pricing page" requests will match the existing design because the brief says how. - Use the post-build artifacts.
CONVERSION-AUDIT.mdseparates immediate fixes from traffic-dependent experiments;LAUNCH-PLAN.mdsets the first thirty days, owners, metrics, and stopping rules.