Skip to content
Get packs

Web Design Skill

Lets an agent design and build web UI, prototypes, and mockups with rendered-browser checks

Source Download skill
Repository
danielmiessler/LifeOS
Stars
19,682
Licence
MIT
Files
13 files

What it does

Once installed, the agent plans and writes web interface code (pages, landing pages, dashboards, prototypes) with a distinct visual direction instead of generic AI-looking layouts. It can work in two modes: a direct in-code mode for quick builds, or a mode that produces several design variants to compare and syncs with a design system. It is designed to render the result in a browser and run a critique loop before showing it to you, though that depends on extra tools being set up.

Great for

  • Developers who want a page or component built to fit an existing app's tokens and components
  • Designers exploring several visual directions for a landing page or dashboard
  • Solo builders who need a polished prototype quickly

Skip it if

  • Logos, illustrations, or video, which the skill explicitly routes to other skills (Art, HyperFrames)
  • Replacing existing production UI without review: the skill is instructed to flag and confirm before replacing existing UI, but a full redesign can still change a lot of code
  • Teams that cannot run browser checks: the quality loop depends on Interceptor, and without it results are reported as unverified

Try asking

  • “Redesign the reports page in my existing app so it uses our current components and tokens”
  • “Show me three design variants for a SaaS landing page and let me pick one”
  • “Build a brutalist-style prototype for a portfolio site”
  • “Audit the UI of this dashboard and propose polish fixes”
Step-by-step guide: how to use Web Design SkillInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 13 original files, the MIT licence and an attribution note.

    Webdesign.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip Webdesign.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip Webdesign.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point it at your existing codebase and tokens so it diffs against them rather than inventing new styles
  • Set up the Interceptor test context first (Setup.md) so rendered checks run in a safe, isolated browser window
  • Keep a PREFERENCES.md with your palette and typography so every design uses your choices

What's inside

  • Context.json
  • Intents/DirectDesign.md
  • Intents/NativeDesign.md
  • LICENSE.txt
  • README.md
  • References/ClaudeDesignCapabilities.md
  • References/CompleteGuide.md
  • References/FrontendDesignPhilosophy.md
  • References/InputFormats.md
  • References/SiteLaunch.md
  • Setup.md
  • SKILL.md
  • Tools/VerifyDesign.ts

Redistributed unmodified from danielmiessler/LifeOS under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.