How to use the Web Design Engineer agent skill

What the skill makes the agent do

Once installed, the agent approaches web visual work as a design engineer rather than a generic coder. The output medium is always HTML, built with HTML, CSS, JavaScript or React, but the agent adjusts its approach to the task, acting as a UX designer, motion designer, slide designer, prototype engineer or data-visualization specialist depending on what you ask for.

Before designing around a named product or brand, the skill tells the agent to verify current facts from sources rather than relying on memory. When a request is vague, the agent asks targeted questions. When you provide design context such as screenshots, code, a design system or a brand's logo, it reads those first and extracts design tokens from them.

• Landing pages, dashboards, prototypes and slide decks
• Animations, UI mockups and data visualizations
• Design-system exploration and redesigns of existing pages
• Design critique and explicit browser acceptance or QA of a web artifact

Install the skill from the ZIP download

Download the ZIP for web-design-engineer from this page, then unzip it. Put the resulting web-design-engineer folder, which contains SKILL.md, into one of two places: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want the skill available only in that project.

If you use the Claude apps instead of a local folder, you can upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/web-design-engineer/
• Project install: .claude/skills/web-design-engineer/ inside your project
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. Describe the visual work you want in plain language, and the agent uses the skill when the request matches its description: visual front-end creation, design-system exploration, design critique, or explicit browser acceptance of a web artifact.

The more context you give, the less the agent has to ask. The skill itself notes that a request such as 'Use this PRD to make a 10-min deck' contains enough information to start building, while 'Make me something nice' triggers a short direction-finding mode instead of a list of generic questions.

• Give a product, audience and purpose, for example: 'Design an onboarding page for my food-delivery app. Users are first-time restaurant owners.'
• Attach or point to existing material: screenshots, a codebase, a Figma file or a design system.
• Name a reference style, for example 'make it Linear-style', and the agent will look for a matching style recipe.
• Ask for a critique: 'Review this landing page and tell me what to fix.'
• Ask for a browser check: 'Open the page in a browser and verify the layout on mobile.'

Examples of good requests

Specific requests produce better results than broad ones. Include who the page is for and what it must do.

When you name a real company or product, expect the agent to check facts first and, if its search returns nothing clear, to ask you instead of guessing.

• 'Turn this codebase's settings screen into a redesign that keeps the existing components. Preserve the current navigation.'
• 'Make 6 slides about the history of butter for a general audience, warm tone, with two layout variants.'
• 'Build a dashboard prototype for our support team using the attached CSV summary, with a clear chart of ticket volume.'

What the skill needs and how it stays safe

The skill needs a browser for visual acceptance or QA checks, which its browser-acceptance guide covers. It also needs web search or source access for verifying product facts in Step 0 of its workflow. It uses the network. It does not run scripts.

The skill's own guidance says that when no real logo or product imagery is available for a brand, the agent should stop and ask rather than draw a colored rectangle or CSS stand-in, because those produce generic results. Review any facts about products or companies the agent states before you publish them.

• Network use: yes, for fact checking and source access
• Scripts: none included
• Browser: needed for visual acceptance and QA checks
• Brand work: supply real logos and product imagery when possible

Tips for better results

Supply real assets early. Logos, screenshots and existing code give the agent more to work from than adjectives do. The skill ranks code above screenshots when both are available, because editing from code gives higher quality results.

For redesigns, say whether you want an extension, a preserve-style redesign or a full overhaul. The skill asks the agent to classify the task this way before editing an existing UI.

Ask for a critique before asking for changes if you are unsure what is wrong with a page.

• Provide code and tokens before screenshots when you can
• Name the mode: extension, redesign with preservation, or overhaul
• Ask for variants when you want to compare options
• Check the result in a real browser before sharing it