Web-Design-Engineer Skill Seven-Step Workflow: From Brief to Polished UI

The web-design-engineer skill follows a deterministic seven-step calibrated workflow that transforms user briefs into production-ready front-end artifacts through systematic design-first orchestration.

The web-design-engineer skill, maintained in the ConardLi/garden-skills repository, provides AI agents with a disciplined framework for generating stunning web interfaces. Unlike conventional code generation that jumps straight to implementation, this seven-step workflow—explicitly defined in skills/web-design-engineer/README.md—enforces design system declarations, early prototype validation, and staged delivery to ensure transparent, interactive development.

The Seven-Step Calibrated Workflow

According to the skill documentation in skills/web-design-engineer/README.md § The Calibrated Workflow, the process unfolds as follows:

1. Understand Requirements

The agent parses the initial prompt to extract functional and aesthetic requirements. Clarifying questions are asked only when supplied information proves insufficient, keeping the interaction streamlined and goal-directed.

2. Gather Design Context

The agent evaluates existing design artifacts—such as legacy codebases, screenshots, or brand assets—to determine whether the project requires a ground-up build or iterative enhancement of an existing product.

3. Produce a Design Read

Before writing code, the agent generates a strategic abstraction called the "five-dial" analysis. This framework, detailed in references/design-calibration.md, maps the brief onto five concrete dimensions:

• Audience – target user demographics
• Artifact – output type (landing page, dashboard, etc.)
• Brand – voice, ethos, and visual identity
• Constraints – technical limitations, accessibility standards
• Motion – animation and interaction velocity

4. Declare Design System

The agent drafts a comprehensive design system in Markdown before any implementation begins. This declaration specifies colors, typography, spacing tokens, and motion specifications, ensuring visual coherence throughout the build.

5. Show v0 Draft Early

A lightweight prototype—comprising placeholders, structural layout, and token definitions—is presented for immediate feedback. This early validation step prevents costly rework by confirming architectural decisions before component development proceeds.

6. Full Build

The agent expands the validated prototype into full production components, complete with states and interactions. The workflow intentionally pauses at key decision points to solicit user confirmation, maintaining transparency during complex implementation phases.

7. Verify

A lightweight self-check validates the output against the declared design system. Browser-based QA is executed only upon explicit user request, optimizing the feedback loop for rapid iteration.

Key Implementation Files

The seven-step workflow is enforced through a specific file structure within ConardLi/garden-skills:

• SKILL.md – The core system prompt consumed by AI agents, encoding the workflow logic and constraints.
• agents/openai.yaml – Host-facing metadata and default prompts for OpenAI-compatible agents.
• references/design-calibration.md – Defines the "five-dial" abstraction used in Step 3 (Produce a Design Read).
• references/style-recipes/ – Contains 25 anchored style recipes (e.g., linear.md) that provide concrete design system implementations.
• manifest.json – Declares skill metadata, versioning, and entry points.

Integrating the Skill into Your Project

To deploy the web-design-engineer workflow in your own environment, copy the skill folder into your project's agent skills directory or install via CLI:

npx skills add ConardLi/garden-skills -s web-design-engineer

The resulting directory structure follows this pattern:

your-project/
├── .agents/
│   └── skills/
│       └── web-design-engineer/
│           ├── SKILL.md                # Main skill descriptor

│           ├── agents/
│           │   └── openai.yaml        # Host-facing metadata

│           └── references/
│               ├── design-calibration.md
│               └── style-recipes/
│                   └── linear.md       # Example style recipe

When invoking the skill through Claude Code or Cursor, the agent automatically executes the seven-step sequence:

// Example: Triggering the workflow via Claude Code
const prompt = `
Build a landing page for a new AI-powered analytics dashboard.
Use the web-design-engineer skill to design it.
`;

await claudeCode.run(prompt);

The agent will parse requirements, generate the Design Read, declare the design system, and present a v0 draft before proceeding to the full build and verification stages.

Summary

• The web-design-engineer skill implements a deterministic seven-step calibrated workflow defined in skills/web-design-engineer/README.md.
• The process moves from requirements analysis through design system declaration to early v0 drafts, ensuring design-first development.
• Key abstractions like the five-dial Design Read (audience, artifact, brand, constraints, motion) anchor visual decisions in strategic context.
• Implementation relies on specific files: SKILL.md for logic, design-calibration.md for methodology, and style-recipes/ for concrete design tokens.
• The workflow balances autonomy with user control, pausing at critical junctures and running browser QA only upon explicit request.

Frequently Asked Questions

What is the "five-dial" abstraction in the web-design-engineer skill?

The five-dial abstraction is a strategic framework defined in references/design-calibration.md that maps design briefs onto five dimensions: audience, artifact, brand, constraints, and motion. This ensures the AI translates functional requirements into specific visual and interaction decisions before writing code, preventing generic output.

How does the v0 draft stage improve the development workflow?

The v0 draft (Step 5) presents a lightweight prototype with placeholders and layout structure before full component development. This allows stakeholders to validate information architecture and design system choices early, reducing the risk of expensive refactoring during the full build phase (Step 6).

Can I customize the design system declarations in the skill?

Yes. While the agent generates an initial design system declaration in Markdown during Step 4, you can manipulate the underlying style recipes in references/style-recipes/ (such as linear.md) or provide additional constraints in your prompt to enforce specific color palettes, typography scales, or spacing systems.

When does the workflow execute browser-based QA?

Browser-based quality assurance runs only if explicitly requested during Step 7 (Verify). By default, the agent performs a lightweight self-check against the declared design system. This keeps the iteration cycle rapid while reserving comprehensive cross-browser testing for final validation phases.

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