How to Build or Redesign Browser-Rendered Visual Artifacts with the web-design-engineer Skill

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, 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, 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:

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:

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/:

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:

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.

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:

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, 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 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 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.
• 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 format, including Claude Code, Cursor, and custom agents. The configuration file agents/openai.yaml provides metadata for OpenAI-hosted agents, while the core 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}