# How to Build or Redesign Browser-Rendered Visual Artifacts with the web-design-engineer Skill > Learn how to build and redesign browser-rendered visual artifacts using the web-design-engineer skill. Transform HTML CSS JS into polished web designs with a structured workflow. - Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills) - Tags: how-to-guide - Published: 2026-08-30 --- **The `web-design-engineer` skill from ConardLi/garden-skills is a reusable SKILL.md package that transforms generic HTML/CSS/JS output into polished, design-driven web artifacts through a structured five-stage workflow.** The ConardLi/garden-skills repository hosts the **web-design-engineer** skill, a portable design system that integrates with AI coding agents such as Claude Code and Cursor to professionalize front-end development. By inserting this skill into your project workspace, you enable your agent to follow a calibrated workflow that replaces boilerplate styling with intentional, accessible design systems rooted in oklch color theory and anchored style references. ## Core Capabilities and Architecture Located in [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md), the skill defines a system prompt that orchestrates a **five-stage workflow** for all visual and interactive front-end work. According to the ConardLi/garden-skills source code, this workflow is enforced by the agent whenever you request browser-rendered artifacts. The architecture includes three quality-control mechanisms: - **Design Direction Advisor** – Maps vague briefs to one of six design schools (Editorial, SaaS, Motion, and others) to establish a coherent aesthetic before coding begins. - **Anti-cliché Checklist** – Prevents overused patterns (such as generic gradient hero sections) from entering the final build. - **Style Recipe Library** – A collection of 25 anchored design references indexed in [`references/style-recipes/INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/INDEX.md), allowing you to invoke specific aesthetics like `linear` or `aesop` by name. ## Installation and Setup You can install the skill using either manual placement or the automated marketplace command. **Manual Installation** Copy the skill folder into your project’s agent configuration directory: ```bash your-project/ ├── .agents/ │ └── skills/ │ └── web-design-engineer/ │ ├── SKILL.md │ ├── agents/openai.yaml │ └── references/ ``` Alternatively, place it in `.claude/skills/web-design-engineer/` for Claude Code compatibility. **Automated Installation** Run the following command to install directly from the repository: ```bash npx skills add ConardLi/garden-skills -s web-design-engineer ``` **Verify with the Demo Gallery** To explore the visual impact of the style recipes, run the React + Vite demo gallery located at `demo/web-design-engineer-demo/`: ```bash cd demo/web-design-engineer-demo npm install npm run dev ``` ## The Five-Stage Design Workflow Once installed, the skill automatically triggers when you request visual artifacts. The agent follows these five stages as defined in [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md): 1. **Gather Requirements** – The agent asks clarifying questions until the design brief is complete, ensuring constraints and user goals are documented before any code is generated. 2. **Design Context & System** – Before writing markup, the agent declares a comprehensive design system using **oklch** color theory and pre-validated font-color pairings. This stage creates tokens for colors, typography, spacing, and motion curves. 3. **Early v0 Draft** – A lightweight layout with placeholders is rendered to establish information architecture and composition, allowing for rapid feedback without sunk-cost fallacy. 4. **Full Build** – Components, state management, and motion are implemented. The workflow pauses at key decision points to confirm alignment with the declared design system and the selected style recipe. 5. **Verification** – A lightweight self-check runs against the anti-cliché checklist and accessibility standards. An optional browser-acceptance harness executes only when explicitly requested for final QA. ## Using Style Recipes for Specific Aesthetics The skill ships with **25 anchored style recipes** stored in `references/style-recipes/`. Each recipe is a concrete design system reference that the agent can pull from [`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md). To apply a specific aesthetic, mention the recipe name in your prompt: - **`linear`** – Generates a clean, developer-tool interface with monospace typography and high-contrast borders. - **`aesop`** – Produces an editorial, luxury e-commerce aesthetic with generous whitespace and serif pairings. According to the source analysis, these recipes are pre-validated combinations that eliminate the guesswork from color and typography selection. ## Triggering the Skill in Your Agent After installation, trigger the skill by requesting a visual artifact in your AI chat: ```text Build a landing page for a fintech app with a data-driven aesthetic. Include a hero section, feature cards, and a sign-up form. ``` The agent will automatically load the skill from [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md), execute the five-stage workflow, and return a refined HTML/CSS/JS artifact. The output includes semantic markup, oklch-based CSS custom properties, and motion definitions that match the inferred or specified design school. For agent-specific configuration, the file [`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml) contains metadata that sets default prompt contexts when hosting the skill on OpenAI-compatible agents. ## Summary - The **web-design-engineer** skill is a portable [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) package located in the ConardLi/garden-skills repository that upgrades AI-generated front-end code. - Install by copying to `.agents/skills/web-design-engineer/` or running `npx skills add ConardLi/garden-skills -s web-design-engineer`. - The skill enforces a **five-stage workflow**: Requirements, Design Context, v0 Draft, Full Build, and Verification. - It includes an **anti-cliché checklist**, a **Design Direction Advisor** for six design schools, and **25 style recipes** accessible via [`references/style-recipes/INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/INDEX.md). - The workflow uses **oklch color theory** and declares design tokens before writing any markup, ensuring consistent, accessible results. ## Frequently Asked Questions ### Which AI agents support the web-design-engineer skill? The skill works with any AI coding agent that supports the [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) format, including Claude Code, Cursor, and custom agents. The configuration file [`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml) provides metadata for OpenAI-hosted agents, while the core [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) file is compatible with any agent that parses markdown-based skill definitions. ### How does the skill prevent generic or clichéd designs? The skill incorporates an **anti-cliché checklist** that runs during the Verification stage, flagging overused patterns such as default Bootstrap styling or generic gradient heroes. Additionally, the **Design Direction Advisor** maps your brief to one of six specific design schools (Editorial, SaaS, Motion, etc.) to ensure the output follows a coherent, intentional aesthetic rather than defaulting to common templates. ### Can I customize the color palette or fonts for my brand? Yes. During the **Design Context & System** stage, the agent declares all design tokens—including colors using **oklch** color theory and font pairings—before writing code. You can override these by specifying your brand requirements in the initial prompt, or by selecting a **style recipe** from the 25 anchored references in `references/style-recipes/` that aligns with your brand’s visual identity. ### What is the browser-acceptance harness mentioned in the workflow? The browser-acceptance harness is an optional verification tool that executes only when explicitly requested during the **Verification** stage. It performs a lightweight self-check of the generated HTML/CSS/JS against the declared design system and accessibility standards. To run the demo gallery that showcases these verification capabilities, navigate to `demo/web-design-engineer-demo/` and execute `npm run dev`.