Skip to content
Get packs

Web Design Engineer

Builds polished, visually refined HTML/CSS/JS/React pages, dashboards, decks and prototypes with design critique and browser QA.

Source Download skill
Repository
ConardLi/garden-skills
Stars
13,484
Licence
MIT
Files
15 files

What it does

Once installed, the agent approaches web visual work as a design engineer rather than a generic coder. It first checks facts about any named product or brand, asks targeted questions when a request is vague, gathers design context such as logos, screenshots, code and style references, and then produces HTML-based artifacts like landing pages, dashboards, slide decks, animations and mockups. It also includes guidance for critiquing designs and for checking the result in a browser.

Great for

  • Designers who want fast, polished HTML prototypes or mockups
  • Front-end developers building landing pages, dashboards or data visualizations
  • Teams that want a design critique or redesign of an existing web page

Skip it if

  • Back-end APIs, CLI tools or non-visual logic, which the skill explicitly excludes
  • Work that depends on unverified product facts, since it relies on searching sources and may still fall back to asking the user
  • Brand work where real logos or product imagery are unavailable, because the skill itself warns that CSS stand-ins produce generic results

Try asking

  • “Design a landing page for my app in a Linear-style aesthetic”
  • “Redesign this dashboard screenshot and extract the design tokens from the code”
  • “Critique this web page design and suggest specific improvements”
  • “Make a 10-slide HTML deck from this PRD for an all-hands”
Step-by-step guide: how to use Web Design EngineerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    web-design-engineer.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip web-design-engineer.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip web-design-engineer.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide existing screenshots, a codebase or a design system up front so the agent extracts real tokens rather than guessing.
  • Name a reference anchor such as a known brand style so the agent loads the matching style recipe file.
  • For brand work, supply the official logo and product imagery, since the skill requires real assets over approximations.

What's inside

  • agents/openai.yaml
  • manifest.json
  • README.md
  • README.zh-CN.md
  • references/advanced-patterns.md
  • references/block-library.md
  • references/browser-acceptance.md
  • references/critique-guide.md
  • references/design-calibration.md
  • references/design-directions.md
  • references/failure-patterns.md
  • references/redesign-protocol.md
  • references/style-recipes/active-theory.md
  • references/style-recipes/INDEX.md
  • SKILL.md

Redistributed unmodified from ConardLi/garden-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.