Webdesign
Installation
SKILL.md
Webdesign
Design interfaces using DirectDesign for in-code work, or NativeDesign for artboard variants and design-system sync. Respect existing app tokens and components; redesign only when requested. Both paths share the aesthetic doctrine in References/FrontendDesignPhilosophy.md and the same quality loop.
Ideal State
- Every design lands as working code (or a picked artboard implemented) in the host app's framework, diffed against its existing tokens and components; a full redesign happens only when the user asked for one, and replacing existing UI otherwise is flagged and confirmed first.
- The result looks made for its subject and its host app, never like a generic AI page: a named register, none of the forbidden defaults in
References/FrontendDesignPhilosophy.md. - The path fits the ask: DirectDesign for in-code work, NativeDesign for comparing looks or design-system sync, and an ambiguous ask gets both paths offered by name, never routed silently.
- Nothing reaches the principal as a first draft (principal directive, 2026-09-17): before it is shown, the rendered result has an Interceptor capture and an ArtDirection critique that passed the bar, or a reported shortfall.
Intent Routing
| Intent | Trigger | File |
|---|---|---|
DirectDesign (default, bundle direct) |
in-code UI design or a self-contained page; short ad-hoc design asks, "make a nice design", "do the design yourself", frontend aesthetics, brutalist/editorial/retro/maximalist UI | Intents/DirectDesign.md |
NativeDesign (bundle native) |
artboards, "show me variants", "give me a few directions", "pick a design", mockup, prototype, "claude design", /design, /design-sync, design-system sync |
Intents/NativeDesign.md |
DirectDesign fits one pass that lands as code in an existing codebase or as a self-contained page, including when claude.ai access is unavailable. NativeDesign fits when the principal should compare genuinely divergent looks side by side, review visually before implementation, or the job is design-system sync. Illustrations and logos go to Art: brand assets are authored SVG, never generated UI output.