Webdesign

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.