Webdesign

Designs and integrates web interfaces via two paths. ClaudeDesign drives Anthropic's claude.ai/design product through the Interceptor skill, then folds the result into your codebase. DirectDesign writes the design inline using Anthropic's open-source frontend-design philosophy, loaded from a local reference. Default routing: short, ad-hoc, in-codebase work goes to DirectDesign; multi-page or shareable prototypes go to ClaudeDesign.

Producing good web UI usually means either fighting a visual tool that can't touch your real codebase, or hand-coding from scratch and landing on the same generic defaults every time. The two failure modes pull in opposite directions: visual-first tools give you polish but a handoff gap, while writing code directly gives you integration but flat aesthetics. This skill gives you both routes under one roof — a visual round-trip through claude.ai/design when review matters, or inline design with a real aesthetic doctrine loaded when speed and in-codebase iteration matter — and routes to the right one based on the ask.

Webdesign covers two paths for producing web UI. Pick one explicitly, or surface both as named options when the user's intent is ambiguous.

Path 1 — ClaudeDesign (drives claude.ai/design)

The PAI orchestration layer around Claude Design — Anthropic's web-based visual design product at claude.ai/design, powered by Claude Opus 4.7 vision. Claude Design is not a CLI tool or plugin; it is a surface on claude.ai. This path bridges to it by:

1. Driving Claude Design programmatically through the Interceptor skill (real-Chrome automation of the authenticated claude.ai session).
2. Processing handoff bundles that Claude Design produces, feeding them into local codebases.
3. Integrating designs INTO existing applications — framework-aware diff/patch flow, not greenfield-only.
4. Verifying and deploying the result via Interceptor + the project's chosen host.

Claude Design is the engine; Webdesign (this path) is the cockpit. Workflows: CreatePrototype, ExtractDesignSystem, RefinePrototype, WebsiteToRedesign, ExportToCode, IntegrateIntoApp, DeployDesign.

Path 2 — DirectDesign ({{DA_NAME}} writes the design inline)

{{DA_NAME}} writes the design directly with Anthropic's open-source frontend-design aesthetic doctrine loaded inline. The load-bearing prompt content is mirrored from github.com/anthropics/skills/tree/main/skills/frontend-design (MIT-licensed) into References/FrontendDesignPhilosophy.md — register list, anti-default rules, type pair recipes, motion vocabulary, color discipline, all of it. Self-contained: no runtime dependency on the upstream plugin being installed. Workflow: DirectDesign.

Default routing rule

When the user asks for "a nice design" / "design something" / "make this nice" without naming a path:

• Default to DirectDesign when the request is short, ad-hoc, exploratory, or scoped to a single component / page / region inside an existing codebase. Speed + in-context iteration matter.
• Default to ClaudeDesign (CreatePrototype) when the request is multi-page, multi-state, productionable, or specifically asks for a "prototype" / "mockup" / "figma alternative" / shareable surface for stakeholders. Visual-first review matters.
• Surface both options when ambiguous — name them explicitly ("ClaudeDesign sends it to claude.ai/design and you review visually; DirectDesign has me write it directly in code with the frontend-design philosophy loaded — which fits?") and let the user pick.

This skill is frequently called as a sub-step of larger site work — writing a blog post, building an admin dashboard, shipping a marketing page. When invoked from a parent context, the skill:

• Accepts existing-project context as input: framework, token file, component directory, deployment target.
• Produces output as diffs / patches against the existing app, not isolated HTML files.
• Respects existing design tokens and component patterns — does NOT overwrite them unless the user requests a full redesign.
• Routes integration work through Workflows/IntegrateIntoApp.md.

When invoked standalone for a greenfield design, the skill produces a self-contained prototype and optionally scaffolds a new app.

Before running any workflow, confirm:

1. Interceptor skill available — which interceptor returns a path. If not, instruct user to invoke Skill("Interceptor") setup first.
2. Authenticated claude.ai session — Interceptor must have a logged-in claude.ai profile. First-run is headed; subsequent runs are headless.
3. Claude Design access — User's Claude subscription must include Claude Design (Pro, Max, Team, or Enterprise with admin opt-in).
4. For IntegrateIntoApp: parent-project path + framework identifier (next, astro, vitepress, vite-react, vue, vanilla) passed in context.

Missing prerequisites → halt with a clear remediation step. Never silently fall back.

Accumulate lessons here. Information density is highest in gotchas.

• Two paths, one skill. ClaudeDesign (CreatePrototype et al.) drives claude.ai/design; DirectDesign has {{DA_NAME}} write the design inline using References/FrontendDesignPhilosophy.md. Don't conflate them. When the user's intent is ambiguous, surface both as named choices and let them pick — never silently route.
• DirectDesign is self-contained. The aesthetic doctrine lives in References/FrontendDesignPhilosophy.md (mirrored from anthropics/skills MIT source). No runtime dependency on the upstream frontend-design Claude Code plugin being installed — DirectDesign works in any PAI environment.
• Claude Design is web-only. There is no API, no MCP server, no plugin. Interceptor is the only programmatic path.
• Real Chrome required. Use the Interceptor skill — it is the only sanctioned browser automation in PAI. Claude Design's UI depends on claude.ai's full session state; CDP-based automation trips bot detection and drops session cookies.
• Handoff bundles are directories, not single files. A bundle contains PROMPT.md, optional tokens.json, components/, assets/, and framework-specific scaffolding. Treat the whole directory as the unit.
• frontend-design plugin auto-activates. When the handoff bundle is fed to Claude Code, the plugin (already installed in the official marketplace) picks up the frontend work automatically — do NOT manually invoke it.
• Claude Design's design-system extraction runs during onboarding. For a new codebase you want Claude Design to understand, run ExtractDesignSystem FIRST before CreatePrototype — otherwise Claude Design uses generic defaults and overrides your tokens.
• Integration ≠ overwrite. IntegrateIntoApp produces diffs on top of existing code. If the user wants a full redesign that replaces existing UI, explicitly flag this and get confirmation.
• Canva exports are editable. If the user wants a non-developer (marketer, founder) to refine the design, route through Workflows/ExportToCode.md with --format canva.
• No real-time collab. Claude Design does not support multiplayer editing like Figma. Share via URL export for async review.
• Enterprise gate. Enterprise accounts need an admin to enable Claude Design in Organization settings before the palette icon appears in claude.ai.
• Session quotas. Claude Design burns Opus 4.7 tokens fast. Pro tier is insufficient for sustained pro-design work; Max recommended.
• Output fidelity ≠ production-ready. Claude Design produces polished visuals, but hand-off code often needs a verification + a11y pass. Run Tools/VerifyDesign.ts post-integration.
• Vision doesn't guess. If the prompt doesn't specify responsive breakpoints, contrast requirements, or dark-mode behavior, Claude Design picks defaults that may not match the target app. Be explicit in the brief.

Example 1: Create a prototype from a brief

User: "Design a pricing page for an AI security startup — editorial aesthetic, dark only"
→ Invokes CreatePrototype workflow
→ Preflight: Interceptor + authenticated claude.ai session
→ Composes brief with explicit aesthetic, constraints, differentiation
→ Drives claude.ai/design via Tools/DriveClaudeDesign.ts
→ Screenshots output, verifies a11y via Tools/VerifyDesign.ts
→ Returns bundle path + preview URL

Example 2: Land a Claude Design prototype inside an existing Astro app

User: "Integrate this prototype into ~/Projects/landing — it's an Astro site"
→ Invokes IntegrateIntoApp workflow
→ Audits target project (framework, tokens, components)
→ Runs ExtractDesignSystem first to prime Claude Design with app's real tokens
→ Translates prototype to Astro conventions via frontend-design plugin
→ Produces unified diff against the working tree
→ Pauses for human review before applying
→ Applies patch on a branch, runs tests, screenshots in-context

Example 3: Redesign an existing live site

User: "Redesign example.com — modernize, keep the copy, make it brutalist"
→ Invokes WebsiteToRedesign workflow
→ Captures current state (screenshot + HTML + tokens)
→ Writes critique (what works, what's dated, what to preserve)
→ Composes rebuild brief with explicit aesthetic and preserve list
→ Drives Claude Design with critique + original screenshot as input
→ Iterates via RefinePrototype until satisfied
→ Hands off to IntegrateIntoApp or ExportToCode

skills/Webdesign/
├── SKILL.md                          # This file — routing + gotchas
├── README.md                         # Public-facing intro
├── Workflows/
│   ├── DirectDesign.md               # Path 2 — {{DA_NAME}} writes inline (no claude.ai round-trip)
│   ├── CreatePrototype.md            # Path 1 — drives claude.ai/design
│   ├── ExtractDesignSystem.md
│   ├── RefinePrototype.md
│   ├── WebsiteToRedesign.md
│   ├── ExportToCode.md
│   ├── IntegrateIntoApp.md
│   └── DeployDesign.md
├── Tools/
│   ├── DriveClaudeDesign.ts          # Interceptor wrapper for claude.ai/design
│   ├── ProcessHandoffBundle.ts       # Parse bundle → structured brief
│   └── VerifyDesign.ts               # Screenshot + a11y probe
└── References/
    ├── FrontendDesignPhilosophy.md   # Aesthetic doctrine — load-bearing for DirectDesign (MIT-attributed mirror)
    ├── ClaudeDesignCapabilities.md   # What Claude Design does / doesn't do
    ├── InputFormats.md               # Prompt patterns, codebase prep
    ├── ExportFormats.md              # html / pdf / pptx / canva / url / bundle
    └── HandoffBundleSpec.md          # Bundle structure for Claude Code handoff