# Webdesign

Designs and integrates web interfaces via DirectDesign (inline, Anthropic...

- Repository: https://github.com/danielmiessler/LifeOS (19669 stars)
- Category: Design
- License: Complete terms in LICENSE.txt
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add danielmiessler/LifeOS --skill Webdesign -g -a claude-code -y`
Codex: `npx skills add danielmiessler/LifeOS --skill Webdesign -g -a codex -y`
Cursor: `npx skills add danielmiessler/LifeOS --skill Webdesign -g -a cursor -y`
Gemini CLI: `npx skills add danielmiessler/LifeOS --skill Webdesign -g -a gemini-cli -y`

## Description

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).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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` |

The rest: https://github.com/danielmiessler/LifeOS/blob/HEAD/LifeOS/install/skills/Webdesign/SKILL.md