Web design engineer skill (ConardLi) review: verdict, safety and alternatives

Web Design Engineer is ConardLi's staged design workflow skill for building pages, decks and prototypes with coding agents. We rate it Recommended with caveats, 72/100, with safety grade A. Confidence is Moderate, because no test shows it beats a plain prompt.

Get the skill: web-design-engineer folder on GitHub · SKILL.md at the reviewed commit · skills.sh listing

What is the web design engineer skill?

The web design engineer skill is ConardLi's instruction-only design workflow for coding agents. It checks facts, reads the brief on five dials and declares a design system before any code. It ships 25 style recipes.

An Agent Skill is a folder of instructions that an agent loads when a task matches. Our guide explains what an Agent Skill is in full. Web Design Engineer is one such skill, published by ConardLi in the garden-skills collection. It turns a design brief into a single-file HTML page, slide deck, prototype or dashboard.

The publisher says the skill distils Claude Design's system prompt into a portable skill. That is a publisher claim, not independently reproduced. The skill holds no code. It is a long Markdown playbook that tells the agent what to do, in order.

The workflow runs in nine stages:

1. Verify product facts with a web search before stating them.
2. Gather context: the brief, the brand, any URL or PRD.
3. Read the design on five dials.
4. Ask positioning questions where the brief is unclear.
5. Declare a design system and confirm it with you.
6. Draft a v0 version.
7. Build the full artifact.
8. Verify the result, with browser checks only on request.
9. Critique the output against a list of AI cliches.

The agent commits to a design system before it writes any code. That step targets the default look many coding agents produce. The first stage guards accuracy. The agent searches the web before it states a product fact, so invented features stay out of the copy.

What are the five dials and the style recipes?

The five dials are visual variance, motion intensity, information density, asset dependence and brand fidelity. Each dial runs from 1 to 10. The 25 style recipes anchor a page to looks such as Linear or Aesop.

The dials force the agent to read the brief before it picks colours or fonts. Each one sets a level for the page:

• Visual variance sets how far the layout departs from a default grid.
• Motion intensity sets how much animation the page carries.
• Information density sets how much content fits on each screen.
• Asset dependence sets how much the page leans on images and logos.
• Brand fidelity sets how closely the page follows an existing brand.

The recipes are reference files that describe a named look. Examples include Linear, Aesop, MUJI and Stripe Press. A recipe loads only when you name it, so unused recipes cost no tokens.

Is the Web Design Engineer skill worth installing?

Yes, with caveats: the Web Design Engineer skill scores 72/100, Recommended with caveats, at Moderate confidence. Its staged workflow is sound and safe. Each load costs about 9,000 tokens, and no test shows better output.

The workflow is clear, and the maintainer fixes install bugs fast. Three security audits pass. What is missing is proof that the output is better than a plain prompt. Tessl, a public registry of Agent Skills, rates its quality at 92%. Tessl has run no eval on it. Our ranking of the best UI and frontend design skills places it against its peers. The table shows each criterion we scored, and how we score design skills explains the weights.

Builders who bring brand assets gain the most from it. They get a structured process with a declared system and a named style. People making short edits gain the least. For them, roughly 9,000 instruction tokens outweigh the help. Vague one-line prompts fare poorly too, because the dials need a real brief to read.

How many tokens does the Web Design Engineer skill use?

The Web Design Engineer skill loads 8,852 tokens per use, measured from file size. References add up to 21,020 more. Our estimate for a typical landing page is 25,000 input and 12,000 output tokens.

Two figures exist, and they measure different things: the measured file size per load, and our estimate for a typical task.

The typical task is one single-file landing page or a 10-slide HTML deck. At five tasks a week, the skill file alone adds about 44,260 input tokens. Each task adds a design-system confirmation round trip before any code. For comparison, Anthropic's Frontend Design loads 2,348 tokens per use.

What changed since our review?

The Web Design Engineer skill file has not changed since our 2026-09-30 review. Only a README cover image moved, and the release is still v1.3.0. The verdict stays Recommended with caveats, 72.

A GitHub compare from aaf9a82 to HEAD on 2026-10-21 shows 10 new commits. Inside the skill folder, only README.md and README.zh-CN.md changed. Each swapped a jsdelivr cover image URL for a local path. SKILL.md and the references are unchanged, so the React pointer defect remains.

The repository added a motion-showreel skill, released as motion-showreel-v0.1.0 on 2026-10-11. PR #39 adds a before/after example for this skill and was still unmerged on 2026-10-21. Stars rose from 12,704 at review to 13,036.

Is the Web Design Engineer skill safe to install?

Yes, the Web Design Engineer skill is safe to install, with safety grade A. It holds Markdown instructions and references only. It does tell the agent to search the web and fetch brand assets without injection guidance.

The skill folder has no scripts, hooks or MCP config files. It uses no credentials. The skills.sh directory of Agent Skills lists three audits as Pass: Gen Agent Trust Hub, Socket and Snyk. Our checklist covers what to check before installing a skill of any kind.

We found ten facts worth knowing:

• Files: 39 in total, all Markdown or config, with no executable code.
• Web search: the agent searches unfamiliar products before stating facts.
• Brand assets: the agent fetches logos and imagery, optionally with yt-dlp and ffmpeg.
• CDN libraries: generated pages load them, and the Chart.js example uses an unpinned jsdelivr URL.
• Browser acceptance: local dev servers run only on explicit request, never production services.
• File writes: HTML artifacts and a brand-spec.md land in your project.
• Codex invocation: agents/openai.yaml allows implicit invocation in Codex.
• Audits: Gen Agent Trust Hub, Socket and Snyk all pass on skills.sh.
• Injection handling: none exists for fetched web pages or brand pages.
• Network access: required for the fact check and asset fetches.

yt-dlp is a command-line video downloader, and ffmpeg is a media converter. The skill names them as optional tools for brand video. Fetched web content enters the agent's context unfiltered. Treat brand pages from unknown sites with the same care as any untrusted input.

What does the community report about Web Design Engineer?

The community reports on Web Design Engineer are thin on outcomes. The maintainer fixed install bugs #2, #9 and #20 quickly. One user still got AI-looking output (#14), and the only positive test is promotional.

We counted 12 evidence items, and 5 of them are strong. The strong items are GitHub issues and the SKILL.md file itself. No item measures output quality under controlled conditions.

What are the Web Design Engineer skill's known failures?

The Web Design Engineer skill has two known failures at v1.3.0. SKILL.md points to pinned React and Babel script tags that its references no longer contain. Output can still look generic without brand assets.

The worst case combines both. The agent spends many tokens and clarifying rounds, then ships generic output. Or a React prototype breaks because the cited CDN tags do not exist. Five problems appear in the evidence:

1. Broken React pointer: SKILL.md line 238 cites pinned, integrity-hashed React and Babel script tags in advanced-patterns.md. Those tags have been absent since v1.1.0.
2. Generic output: Issue #14 reported a redesign that still looked AI-made. The maintainer advised adding constraints and references.
3. Heavy load: About 9,000 tokens arrive with every use. Tessl calls the body verbose.
4. Unpinned Chart.js: The Chart.js example loads from an unpinned jsdelivr URL, so a future library release changes your page.
5. No outcome benchmark: Tessl lists no eval, and no controlled with/without test exists.

React is a JavaScript library for building interfaces. Babel compiles modern JavaScript and JSX in the browser. A prototype needs both script tags to load. Add your own pinned CDN tags until the pointer is fixed. The gap affects only the React prototype path. Plain HTML pages and decks do not depend on those tags.

Which agents does the Web Design Engineer skill work with?

The Web Design Engineer skill works in Codex and Claude Code, both verified through fixed install reports. Its manifest claims Claude.ai, Cursor, Gemini CLI and opencode too, but no run there is documented.

Verified here means a public bug report shows the skill running in that agent. Claimed means only the publisher's manifest lists it. Our page of Claude Code skills by verdict lists other skills confirmed in that agent.

The Codex folder is a conflict between two sources. The garden-skills README lists .codex/skills/<name>/ for Codex CLI. The Codex docs from OpenAI list .agents/skills in the repo and $HOME/.agents/skills for one user. The Codex docs do not list .codex/skills. Follow the Codex docs and use .agents/skills/web-design-engineer/. In Codex, agents/openai.yaml allows implicit invocation. The agent loads the skill without you naming it.

How do you install the Web Design Engineer skill?

Install the Web Design Engineer skill with npx skills add ConardLi/garden-skills -s web-design-engineer. In Claude Code, add the garden-skills plugin marketplace and install web-design-skills instead. A manual folder copy works too.

The README lists five methods. Pick one:

1. Run npx skills add ConardLi/garden-skills -s web-design-engineer in your project.
2. Add the marketplace in Claude Code with /plugin marketplace add ConardLi/garden-skills. Then run /plugin install web-design-skills@garden-skills.
3. Download the pinned release zip, web-design-engineer-v1.3.0, and unpack it into your skills folder.
4. Copy the skills/web-design-engineer/ folder into .claude/skills/ by hand.
5. Add the repository as a git submodule and point your skills folder at it.

Method 3 pins the exact release we reviewed. Method 1 tracks the latest commit, which matches our review for SKILL.md as of 2026-10-21. Our guide to setting up skills in Claude Code explains project and user scopes.

How do you use the Web Design Engineer skill?

Use the Web Design Engineer skill by giving it a brief plus brand assets or a named style. Then ask for a page, deck or prototype. It confirms a design system with you before it writes any code.

Five use cases appear in the evidence, with different support:

• Landing or intro page from a URL or PRD: primary use, seen in issues #14 and #16.
• Style-anchored page with a named recipe such as Linear or MUJI: secondary use.
• HTML slide deck from a PRD or outline: claimed only, per the README.
• Interactive React prototype from a screenshot or codebase: claimed only.
• Browser acceptance or responsive QA of an existing artifact: claimed only.

The skill stays out of back-end APIs, CLIs, quick edits and pure code review. Use a plain prompt or another skill for those.

Start every task the same way:

1. Write a short brief with the audience, the goal and the content.
2. Attach brand assets, or name one of the 25 recipes.
3. Answer the positioning questions the agent asks.
4. Approve or adjust the declared design system.
5. Review the v0 draft before the full build.

Test it yourself before you adopt it widely. Run these prompts in one session:

• Run the same landing-page brief with the skill.
• Run it again without the skill.
• Compare both outputs against the skill's own anti-cliche list.

What are the alternatives to the Web Design Engineer skill?

The closest alternatives to the Web Design Engineer skill are three evaluated skills. Anthropic's Frontend Design (76, Recommended) loads about 2,348 tokens. Vercel's Web Design Guidelines (66) checks UI files, and Taste Skill (62) suits React landing pages.

The table adds two more design skills, from Emil Kowalski and Jakub Krehel. The Best for column shows the job each skill fits. A lighter skill wins on short tasks.

Frontend Design covers the same job at about a quarter of the load. Web Design Engineer adds the dials, the recipes and a declared system. Pick it when you bring brand assets and want that structure.

Where is the Web Design Engineer skill on GitHub?

The Web Design Engineer skill lives on GitHub in ConardLi/garden-skills at skills/web-design-engineer, under the MIT licence. We reviewed release v1.3.0, commit aaf9a82, on 2026-09-30. The repository had 13,036 stars on 2026-10-21.

• Repository: ConardLi/garden-skills, folder skills/web-design-engineer.
• Reviewed release: web-design-engineer-v1.3.0, commit aaf9a82, dated 2026-07-12.
• Skill hash: sha256 00633aa4… at the reviewed commit.
• Stars and forks: 12,704 and 1,525 at review; 13,036 and 1,554 on 2026-10-21.
• Maintainer activity: 118 commits by one maintainer and 20 releases in 12 months.
• Copies: 151 copies found in GitHub code search.
• Sibling skills: web-video-presentation, gpt-image-2, kb-retriever, beautiful-article and motion-showreel.

Common questions

Is the Web Design Engineer skill free?

Yes. It is MIT-licensed, and every install method costs nothing.

Does it make slide decks?

The publisher claims it does. Decks are a claimed-only use case with no independent run.

Do its React prototypes work?

Not as written. The pinned React and Babel tags it cites are missing, so add your own CDN tags.

Why does my output still look AI-made?

Issue #14 reported this. The maintainer advised adding constraints and references, such as brand assets or a named style recipe.