The bar is stunning, not functional
Web Design Engineer is a skill in ConardLi's garden-skills collection. It casts the agent as a design engineer building HTML, CSS, JavaScript and React artifacts, and enforces a staged workflow: verify facts, read the design context, declare a system, show a v0, then build and critique.
The skill's stated philosophy is that the bar is stunning, not functional. It positions the agent as a design engineer whose output is always HTML, while the professional identity changes per task: UX designer, motion designer or slide designer.
It is scoped to visual front-end work: pages, dashboards, prototypes, slide decks, animations, UI mockups and visualizations. Back-end APIs, CLI tools and pure logic are explicitly out of scope.
The workflow in order
- Step 0 verifies facts about named products, SDKs or releases before designing around them.
- Steps 1 and 2 decide how much to ask, then gather context, preferring code over screenshots.
- Step 2b writes a Design Read and sets five dials from 1 to 10.
- Steps 3a and 3 answer four positioning questions, then declare the design system.
- Steps 4 to 7 deliver a v0, the full build, verification and an optional critique.
Guardrails against generic output
Three hard checkpoints stop the agent: after the design system declaration, after the v0, and at non-trivial decisions mid-build. The skill says to actually wait, not announce a plan and keep coding.
For brand work it ranks assets above specs: logo first, then product imagery or UI screenshots, with color hex codes and typography only auxiliary. If a logo cannot be sourced, the agent must stop and ask.
Who benefits
Strong fit
- Anyone whose agent returns the same safe layout every time and needs a process that forces a direction.
- Redesign work, where the skill classifies the task as extension, preserve or overhaul first.
- Teams that want a v0 to react to before the full build.
Probably not for
- Quick edits that need no process. Related: frontend design.
- Pure code review, Related: redesign guidance and a critique skill.
Use it with UiChemy
The skill outputs HTML, CSS, JavaScript and React, not WordPress pages. Its declared palette, type and spacing can serve as the brief for a Figma design, which UiChemy then converts into editable Elementor pages. Click Get Started on uichemy.com. See also design taste for frontend.
How to install Web Design Engineer Skill: A Design Process for Agents
git clone https://github.com/ConardLi/garden-skills.gitClone the collection
Run the command above. The README lists several routes, including a skills CLI, a Claude Code plugin marketplace, a zip and manual copy. This page uses the manual copy route.
Copy the skill folder
Take skills/web-design-engineer from the clone. Keep its references folder, which holds style recipes, a critique guide and a redesign protocol, plus manifest.json and agents/openai.yaml.
Place it in your agent's skills location
The fact sheet states no agent folder, so use the skills path your tool documents.
Start with a real brief
Ask for a landing page or dashboard and confirm the agent writes a Design Read and waits at the first checkpoint.
Check that it loaded
Request a small landing page. A working install produces a Design Read with five dials and a design system block, then stops to ask you to confirm before building.
Key features
- Fact check firstStep 0 runs before any questions. When a request names a product or release the agent is unsure about, it must verify from authoritative sources and never assert from memory.
- Ask only as much as neededA scenario table says when to ask extensively, when the brief is enough, and when to switch to the Design Direction Advisor for vague requests.
- Context by priorityUser-provided Figma, screenshots or codebase come first, then existing pages, then references, with code preferred over screenshots for extracting tokens.
- Brand asset protocolLogo, product imagery and UI screenshots outrank hex codes. Assets are recorded in a brand-spec.md file and referenced by file path in the HTML.
- Design Read and five dialsA block summarizes artifact, audience and visual language, then sets visual variance, motion intensity, information density, asset dependence and brand fidelity.
- Four positioning questionsNarrative role, viewing distance, visual temperature and a capacity check come before any color or type decisions.
- Declared design systemPalette, typography, spacing, radius, shadow hierarchy and motion are written down and confirmed before code begins.
- 25 anchored style recipesPer the README, recipes such as Linear, Aesop and Stripe Press carry palette, typography and anti-patterns to paste into the declaration, alongside six direction schools.
- v0 draft with checkpointsA placeholder-based v0 is shown early so the user can course-correct, with three hard stops across the workflow.
- Five dimension critiquePhilosophy, hierarchy, craft, functionality and originality are each scored 0 to 10, followed by fixes and three quick wins.
Frequently asked questions
What is the Web Design Engineer skill?
It is a skill in ConardLi's garden-skills collection that positions an AI agent as a design engineer for HTML, CSS, JavaScript and React artifacts. It enforces a workflow of fact checks, context gathering, a declared design system, a v0 draft, a full build and a critique.
How do I install it?
Clone ConardLi/garden-skills and copy skills/web-design-engineer, with its references folder, into your agent's skills directory. The README also lists a skills CLI, a plugin marketplace, a pinned zip and a git submodule if you prefer those.
What does it build?
Visual front-end work: pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animations, UI mockups, data visualizations and design-system explorations. Back-end APIs, CLI tools and non-visual coding are explicitly out of scope.
What are the five dials?
A Design Read sets visual variance, motion intensity, information density, asset dependence and brand fidelity, each from 1 to 10. The skill says they are decision variables that must change layout, motion, content per viewport, asset effort and how strictly existing work is preserved.
Does it run browser tests automatically?
No. It runs a lightweight pre-delivery checklist by default. An executable browser acceptance harness runs only when you explicitly ask for acceptance, QA, browser testing, visual regression or cross-viewport checks, not merely because you say build or polish.
What are the style recipes?
The README describes 25 anchored recipes, including Linear, Aesop and Stripe Press, each with palette, typography, signature moves and anti-patterns. The agent loads only the one recipe file it uses, then pastes its values into the design system block.
Does it work with Claude and other agents?
The README describes the collection as skills for Claude Code, Cursor, Codex and other AI coding agents, and the skill folder includes an agents/openai.yaml file. Check your own agent's skills documentation for the exact location.
What license is it under?
The repository is MIT licensed according to GitHub metadata and the README badge. Keep the license text with any copy you include in another repository or share with a team.