Webdesign
Designs and integrates web interfaces via DirectDesign (inline, Anthropic...
Install
npx skills add danielmiessler/LifeOS --skill Webdesign -g -a claude-code -y- Repository
- danielmiessler/LifeOS19.7k
- Category
- Design
- Updated
- 8d ago
- License
- Complete terms in LICENSE.txt
- Context cost
- Mediumabout 1,596 tokens
- Runs scripts
- Yes, review before use
What it does
Designs and integrates web interfaces via DirectDesign (inline, Anthropic frontend-design philosophy, the default) or NativeDesign (/design artboards plus /design-sync design-system sync). USE WHEN web design, UI design, artboards, design variants, 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 (Art), video (HyperFrames).
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 |
