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

> Master the seven-step web-design-engineer workflow. Transform briefs into polished UIs with this systematic design-first approach for production-ready front-end artifacts.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-08-30

---

**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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/README.md) [§ The Calibrated Workflow](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)** – The core system prompt consumed by AI agents, encoding the workflow logic and constraints.
- **[`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml)** – Host-facing metadata and default prompts for OpenAI-compatible agents.
- **[`references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/linear.md)) that provide concrete design system implementations.
- **[`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/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:

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

```

The resulting directory structure follows this pattern:

```text
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:

```javascript
// 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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) for logic, [`design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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.