web-design-engineer Skill for Claude Code: Design Polished Pages, Decks and Dashboards

Makes the agent design polished HTML pages, prototypes, slide decks and dashboards: declare a design system, show a v0, then build.

Installs: 9.1K; on skills.sh
Stars: 13.5K; on GitHub
Files: 38; besides SKILL.md
Updated: Oct 2026; last repo commit

web-design-engineer makes the agent work like a design engineer. It reads your brief and existing design context, writes down a design system, waits for your OK, shows a rough v0, and only then builds the full page, prototype, slide deck, animation or dashboard in HTML, CSS and JavaScript or React.

It triggers for visual front-end work, design critique and, only when you ask, browser acceptance testing. It is not for back-end, CLI or non-visual code. The folder has 39 files: SKILL.md, 8 reference files, 25 style recipes plus an index, and no scripts.

Good for

Developers who want less generic, AI-looking front-end output
Designers and founders prototyping a landing page, dashboard or slide deck in HTML
Teams redesigning an existing UI without breaking its structure and brand

Install web-design-engineer

Claude Code

Copy this prompt.

Install the web-design-engineer skill in Claude Code. Run this command:

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The web-design-skills plugin in the marketplace holds only this skill (its entry points at skills/web-design-engineer) and lists no hooks, agents or MCP server. The README also lists pinned ZIP, manual copy and git submodule routes.

From the project README. Source.

What's in the skill

When it loads

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact. Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations.

Sections in SKILL.md

Scope
Workflow
Step 0: Verify Facts Before Anything Else
Step 1: Understand the Requirements (decide whether to ask based on context)
Step 2: Gather Design Context (by priority)
Step 2b: Produce a Design Read and Calibrate Five Dials
Step 3a: Position Four Questions Before Picking a System
Step 3: Declare the Design System Before Writing Code
Step 4: Show a v0 Draft Early
Step 5: Full Build
Step 6: Verification
Step 7: Critique on Request (or as Self-Check Before Delivery)
Fallback: Design Direction Advisor
Mechanism: 3 differentiated directions, not 10 questions
School library — pick 3 from different rows
After the user picks

Key facts

Author: ConardLi (repo owner)
License: MIT (repo LICENSE)
Installs on skills.sh: 9,117 (Nov 2, 2026)
GitHub stars: 13,465 for the garden-skills repo (Nov 2, 2026)
Last commit: Oct 25, 2026
Files: 39 files including SKILL.md: 2 READMEs, manifest.json, agents/openai.yaml, 8 reference files, 26 style-recipe files; no scripts
Works in: Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI, OpenCode

What it includes

Looks up unfamiliar products, SDKs or releases before designing around them
Runs before any questions. The checklist refers to WebSearch; if search is unclear it asks you instead of guessing.
Network · Step 0: verify facts
Asks questions only when the request is vague, and skips them when it is clear
A table of scenarios shows when to ask. A very vague request switches to Design Direction Advisor mode.
Try: “Design onboarding for my food-delivery app”
Step 1: understand the brief
Reads your screenshots, Figma, code or a named style such as Linear or Aesop
Code is preferred over screenshots. A named anchor loads one file from references/style-recipes.
Files · Step 2: gather design context
Requires a real logo and product imagery; writes brand-spec.md
Sourcing order starts with the official press kit and ends with an honest placeholder. Lower-fidelity options include frames from launch videos via yt-dlp and ffmpeg.
Write · Brand asset protocol
Sets visual variance, motion, density, asset dependence and brand fidelity
Each dial is 1 to 10 and must change real decisions. Detail is in references/design-calibration.md.
Design Read and five dials
Declares the design system, stops for your OK, shows v0, then builds fully
Three checkpoints are marked in the file. It says to actually wait for you at each one.
Write · Steps 3 to 5: system, v0, build
Always self-checks; runs a browser acceptance harness only if you ask
The harness in references/browser-acceptance.md starts the project's own dev command and checks layout, interaction and motion at set viewports. It is not run for "build" or "polish".
Runs code · Step 6: verification
Scores a design 0 to 10 on five dimensions with fixes and quick wins
Dimensions: philosophy alignment, visual hierarchy, craft quality, functionality and originality.
Read · Step 7: critique
Proposes 3 directions from different schools instead of 10 taste questions
Six schools in a table, such as information architecture and warm humanist. It never picks three from the same school.
Design Direction Advisor
Classifies work as Extension, Preserve or Overhaul before editing existing UI
Details in references/redesign-protocol.md.
Write · Redesign protocol

From the official docs

Permissions

Low risk

The skill writes front-end files in your project, can start your dev server when you ask for browser testing, and may fetch brand assets from the web. Keep your project in version control and review what it adds.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It writes and edits front-end files
It creates artifacts such as Landing Page.html and copies versions with v2 or v3 names. In redesign work it classifies Extension, Preserve or Overhaul before editing. github.com
It can start a local server on request
Only when you ask for acceptance or QA, the harness uses the project's own dev command. It tells the agent not to install a new test framework unless authorized. github.com
It may fetch brand assets and facts from the web
Step 0 looks up unfamiliar products, and the asset protocol lists press kits, store screenshots and launch video frames via yt-dlp and ffmpeg as sources. Generated pages may load Chart.js, D3 or Google Fonts from a CDN. github.com

Technical details

Scopes	Writes HTML/CSS/JS files, brand-spec.md and assets/<brand>-brand/ Starts the project dev command only for browser acceptance

Questions

What does web-design-engineer do?

It makes the agent design and build polished browser-based visuals: pages, dashboards, prototypes, slide decks, animations and data visualizations. It follows a workflow of design system first, v0 draft next, full build last.

How do I install it in Claude Code?

Use the install box above. The README offers a plugin pack that holds only this skill, or the skills CLI with -s web-design-engineer. Pick one.

Does it work in the Claude app?

The skill's manifest lists claude-ai as a compatible host, so you can upload the zipped folder under Customize, Skills. Upload the whole folder so the reference files come with it.

Why does it stop and wait for me?

The workflow has three checkpoints: after declaring the design system, after the v0 draft, and at non-trivial decisions during the build. SKILL.md says to actually wait for your confirmation.

Will it test my page in a browser?

Only if you ask for acceptance, QA, browser testing or responsive checks. SKILL.md says not to infer that from build, finish or polish. Otherwise it runs a lightweight checklist.

Is it from Anthropic?

No. The README says it is inspired by the system prompt of Claude Design. The skill is published by ConardLi in the garden-skills repo.

Is web-design-engineer safe?

It bundles no scripts, but it writes HTML, CSS and JavaScript files in your project and may add files such as brand-spec.md. When you request browser acceptance, it starts your project's dev server. Review the files it writes.

Information

updated Nov 2, 2026

Repository: conardli/garden-skills
Folder: skills/web-design-engineer

conardli/garden-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6

github.com · github.com
github.com · github.com
github.com · github.com
github.com · github.com
github.com · github.com
github.com · github.com