/Webdesign

name: Webdesign
version: 1.2.3
description: "Design and integrate web interfaces via three paths: DirectDesign (write design inline with Anthropic frontend-design philosophy — the default workhorse), native /design + /design-sync Claude Code commands (preferred for code integration and design-system sync), or ClaudeDesign (drive claude.ai/design through Interceptor — experimental visual-review fallback). USE WHEN web design, UI design, create prototype, design system, design sync, redesign site, mockup, landing page, dashboard design, design-to-code, frontend design, polish UI, design audit, brutalist/editorial/retro UI. NOT FOR illustrations/logos (use Art) or video (use Remotion)."
license: Complete terms in LICENSE.txt

Voice Notification (REQUIRED FIRST ACTION)

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Running the Webdesign skill", "voice_enabled": true}' > /dev/null

What It Does

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.

The Problem

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.

How It Works

Webdesign covers three paths for producing web UI. **Pick the path that fits; surface options by name when intent is ambiguous.** We always drive whatever version of Claude Design is live — there is no version to pin.

Path 1 — DirectDesign (default workhorse; {{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. Self-contained: no runtime dependency, no browser, no auth. This is the path that has actually shipped every real design this skill has produced. Workflow: `DirectDesign`.

Path 2 — Native Claude Design CLI (preferred for code integration + design-system sync)

Anthropic shipped first-party `/design` and `/design-sync` commands inside Claude Code (June 2026, GA on Pro/Max/Team/Enterprise — official: support.claude.com/en/articles/14604416). `/design-sync` pulls a codebase's real design system into Claude Design and pushes built changes back; `/design` creates and edits designs from the terminal. These are the deterministic, first-party replacement for the hand-rolled Interceptor handoff-bundle apparatus — prefer them for anything code-bound. Workflow: `NativeDesignSync`.

Path 3 — ClaudeDesign via Interceptor (EXPERIMENTAL visual-review fallback)

⚠️ Unverified and currently non-functional. This path drives the `claude.ai/design` web canvas through the Interceptor skill for visual-first review. It requires an authenticated claude.ai session in the `interceptor-test` Chrome profile, which is **not currently logged in**, and it has **never been run end-to-end** (every real run of this skill used DirectDesign). Use only when you specifically want the visual web canvas AND have set up the login first. Workflows: `CreatePrototype`, `ExtractDesignSystem`, `RefinePrototype`, `WebsiteToRedesign`, `ExportToCode`, `IntegrateIntoApp`, `DeployDesign`. Tool: `DriveClaudeDesign.ts`.

Routing rule

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

• **Default to DirectDesign** for short, ad-hoc, in-codebase work — speed and in-context iteration.
• **Use the native CLI (`/design-sync`)** when the job is to sync a real codebase design system or do code-bound design work and the commands are available.
• **Reach for ClaudeDesign (Path 3) only** when visual web-canvas review is explicitly wanted, and remember it needs the one-time login and is unproven.

Integration-Aware Operation (CRITICAL)

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.

Customization

User-specific design preferences (color palette, typography, spacing grid, animation timing, framework defaults) live at:

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # Design tokens, preferred frameworks
├── README.md
└── EXTEND.yaml

The skill reads PREFERENCES.md if present and passes those tokens into Claude Design's brief and any downstream handoff bundle. Without a customi