webdesign

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: Webdesign
version: 1.2.2
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)

```bash
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 D