Skip to content
Get packs

Guide · Agent skill

How to use the Web Design Skill agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The Webdesign skill is an agent skill that lets an AI agent plan and write web interface code with a deliberate visual direction, instead of generic layouts. This guide explains what it does, how to install it from the ZIP or the Claude apps, how to ask for work in natural language, and what it needs to run. By the end you will know which of its two modes fits your request and what to check before trusting the output.

Web Design Skilldanielmiessler/LifeOS · MIT

Quick start

  1. 1Download the ZIP. Get the Webdesign ZIP from this directory page.
  2. 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
  3. 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
  4. 4Install Bun and LifeOS pieces. Make sure the Bun runtime and the LifeOS ContextLoad.ts tool are available, as the skill requires them.
  5. 5Set up Interceptor for rendered checks. Follow Setup.md to set up the Interceptor test context if you want browser-verified results.
  6. 6Ask in plain words. Describe the interface, the app it belongs to, and whether you want one design or variants.

What the Webdesign skill makes the agent do

The skill covers web interfaces: pages, landing pages, dashboards, components and prototypes. It works in two modes. DirectDesign writes the design inline as code and is the default. NativeDesign produces several artboard variants to compare and can sync with a design system through /design-sync.

The skill is not for illustrations, logos or video. Its own routing sends those to other skills, namely Art and HyperFrames.

  • DirectDesign: quick, in-code builds, including self-contained pages.
  • NativeDesign: several divergent design variants to compare, plus design-system sync.
  • Routing: illustrations and logos go to Art; video goes to HyperFrames.

Install the Webdesign skill from the ZIP or the Claude apps

Download the Webdesign ZIP from this directory page. Then choose one of two routes. For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.

In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.

  • Personal: unzip into ~/.claude/skills/
  • Project only: unzip into the project's .claude/skills/
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Trigger the skill with natural requests

You do not need a special command. Describe the interface in plain words and mention the kind of work. The skill's trigger list includes phrases such as web design, UI design, landing page, dashboard design, mockup, design variants, design system, redesign site, design audit and polish UI.

To compare looks, ask for variants or directions. To build one page in your codebase, ask for the page and name the app. Mention a style such as brutalist, editorial or retro if you have one in mind.

  • "Make a landing page for my course, in a clear editorial style."
  • "Show me a few design directions for this dashboard."
  • "Polish the UI on the settings page."
  • "Give me a design audit of the checkout flow."

Know what the skill needs before you start

The skill runs scripts and uses the network. It needs the Bun runtime to run its context loader and VerifyDesign.ts. It also expects a LifeOS install providing ContextLoad.ts, and the Interceptor browser extension for rendered checks. The critique step relies on an ArtDirection skill with a cross-vendor critique panel, which may need model API keys; the files do not specify those keys.

NativeDesign needs Claude Design access, as described in Setup.md. Without Interceptor, results are reported as unverified rather than checked in a browser.

  • Bun runtime
  • LifeOS install with ContextLoad.ts
  • Interceptor browser extension for rendered checks
  • ArtDirection skill with critique panel (API keys may be needed)
  • Claude Design access for NativeDesign
bun "${CLAUDE_CONFIG_DIR:-$HOME/.claude}/LIFEOS/TOOLS/ContextLoad.ts" Webdesign load BUNDLE

Review safety notes for scripts and network use

Because the skill runs scripts and uses the network, read what it will execute before you let it run. Its own files state that a replacement of existing UI should be flagged and confirmed first, and that a file handed over through Downloads is refused without a passing, fresh critique.

Keep personal design preferences in the preferences file the skill reads, rather than in shared project files you may publish.

  • The skill is instructed to flag and confirm before replacing existing UI, but a full redesign can still change much code.
  • Review the diff before merging generated code.
  • Check the rendered result yourself; the skill does not replace your review.

Tips for better results

Give the agent the context it cannot see: the app's framework, its existing components and tokens, and the audience. Ask for one page or component at a time, and state whether you want a redesign or a fit to the current app.

If the output looks generic, ask for a named register and a specific subject. If you want to compare, ask for variants explicitly so the skill uses NativeDesign.

  • Name the framework and the existing components to reuse.
  • Ask for one clear scope per request.
  • Say "redesign" only when you really want the whole look changed.

What people use it for

  • Building a landing page that fits an existing app's tokens and components.
  • Comparing several visual directions for a dashboard before choosing one.
  • Creating a self-contained prototype page quickly.
  • Running a design audit or polish pass on an existing screen.

Frequently asked questions

How do I install the Webdesign agent skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

Is the Webdesign skill free?

The skill is released under the MIT licence, and the full terms are in its LICENSE.txt file. The files do not state any price, and the critique step may need model API keys that are not specified in the files.

What does the Webdesign skill require to run?

It requires the Bun runtime, a LifeOS install providing ContextLoad.ts, the Interceptor browser extension for rendered checks, and an ArtDirection skill with a critique panel. NativeDesign also needs Claude Design access.

Does the skill create logos or illustrations?

No. Illustrations and logos are routed to the Art skill, and video is routed to HyperFrames.

What happens if Interceptor is not set up?

The skill reports the result as unverified, because the rendered browser check depends on Interceptor. Set it up using Setup.md if you need browser-checked output.

Will the skill overwrite my existing UI?

The skill is instructed to flag and confirm before replacing existing UI. A full redesign can still change a lot of code, so review the diff before you merge it.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use the Webdesign skill if you build web interfaces with an agent and want output that fits an existing app or that you can compare across distinct directions. Pick something else if you need logos, illustrations or video, or if you cannot run browser checks, since the quality loop depends on Interceptor.

Download the skill