# Can the Web-Design-Engineer Skill Create Design Systems? A Complete Technical Analysis

> Discover if the web-design-engineer skill can create design systems. This technical analysis reveals how its workflow enforces design tokens for robust system generation. Learn more.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: deep-dive
- Published: 2026-08-28

---

**Yes, the web-design-engineer skill is explicitly architected to generate complete design systems through a mandatory "Step 3: Declare the Design System" workflow that enforces comprehensive design tokens before any code generation occurs.**

The **web-design-engineer** skill from the `ConardLi/garden-skills` repository goes beyond simple UI generation by embedding design system creation into its core workflow. According to the skill's source code, every project must begin with a formal design system declaration that defines palette, typography, spacing, radius, shadow, and motion tokens before any HTML or React code is produced.

## How the Web-Design-Engineer Skill Enforces Design System Creation

### Mandatory Design System Declaration Phase

The skill's workflow is strictly enforced through its [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) file, which mandates a specific sequence of operations. In [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md) (lines 30-46), Step 3 explicitly requires the agent to articulate a complete set of **design tokens** derived from either a chosen style recipe or a custom specification.

This declaration phase requires documenting:
- **Color palette** (surface, accent, text colors)
- **Typography scale** (font families, weights, sizes)
- **Spacing system** (base units and multiples)
- **Border radius** values
- **Shadow hierarchy** (elevation levels)
- **Motion specifications** (easing curves, durations)

No coding can begin until this design system is formally declared, ensuring consistency across all generated artifacts.

### Anchored Style Recipes Library

The skill provides **25 pre-defined design recipes** located in `references/style-recipes/` that serve as anchored starting points for design system generation. As documented in [`references/style-recipes/INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/INDEX.md) (lines 41-52), each recipe supplies concrete token values that the skill copies verbatim into the design system declaration.

Individual recipes like [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) provide complete specifications including palette definitions, typography scales, and "signature moves" that characterize specific design languages. This allows the web-design-engineer skill to generate consistent, repeatable design systems without requiring users to define every token manually.

## Design System Architecture and Validation

### Pre-Delivery Checklist and Hard Rules

The skill enforces design system compliance through a rigorous validation step defined in [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md) (lines 44-58). The **Pre-delivery Checklist** specifically verifies that:
- **No rogue colors** appear outside the declared palette
- No inline `styles` objects bypass the token system
- No AI-default clichés (generic gradients, default shadows) contaminate the output

These hard rules guarantee that the declared design system is respected throughout the entire build process, preventing the "ad-hoc styling" drift common in generated code.

### Modular Token Management

All design tokens are expressed as **CSS custom properties** or React-style objects scoped per component. The skill's architecture prevents token leakage across components by enforcing scoped implementations such as `terminalStyles` or `headerStyles` objects.

This modular approach ensures that design tokens remain encapsulated within their respective components while still referencing the global design system declared in Step 3.

## Practical Implementation Example

When the web-design-engineer skill generates a project, it produces both the design system declaration and its application. Below is a minimal example showing how the skill declares and applies tokens derived from the "linear" style recipe:

```tsx
/* 1️⃣ Declare the design system – user-visible markdown block (generated by the skill) */
{/* Design Decisions:
- Design Read: landing page, developer audience, modern tool vibe, dark-first mode
- Anchor / recipe: linear → references/style-recipes/linear.md
- Color palette: #0A0A0A (surface), #06B6D4 (accent), #FFFFFF (text)
- Typography: Inter 400/500, size 16-24-36
- Spacing: base 8px, multiples ×2/×3/×4
- Border-radius: 4px
- Shadow hierarchy: elevation-1–3
- Motion style: ease-out-quad, 200ms */}

// 2️⃣ Apply tokens in React + CSS custom properties
const root = document.documentElement;
root.style.setProperty('--c-surface', '#0A0A0A');
root.style.setProperty('--c-accent', '#06B6D4');
root.style.setProperty('--c-text', '#FFFFFF');
root.style.setProperty('--font-base', 'Inter, sans-serif');
root.style.setProperty('--space-base', '8px');

// 3️⃣ Example component using the tokens
function Header() {
  return (
    <header
      style={{
        backgroundColor: 'var(--c-surface)',
        color: 'var(--c-text)',
        fontFamily: 'var(--font-base)',
        padding: `calc(var(--space-base) * 2)`,
        borderRadius: '4px',
        boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
        transition: 'background-color 200ms ease-out',
      }}
    >
      <h1 style={{ fontSize: 'var(--font-h1, 36px)' }}>Dashboard</h1>
    </header>
  );
}

```

The skill automatically generates the design declaration block after style recipe selection, then references these tokens via CSS custom properties throughout all components.

## Summary

- The **web-design-engineer skill** mandates design system declaration as Step 3 of its workflow, preventing any coding before token definition.
- **25 anchored style recipes** in `references/style-recipes/` provide concrete starting points for design system generation.
- A **pre-delivery checklist** enforces strict compliance with declared tokens, rejecting rogue colors and ad-hoc styling.
- Tokens are implemented as **CSS custom properties** or scoped React objects to prevent leakage and ensure reusability.
- The skill creates **repeatable design systems** that maintain consistency across multiple pages, variants, and future projects.

## Frequently Asked Questions

### Does the web-design-engineer skill require manual design system configuration?

No, the skill can automatically generate design systems by selecting from 25 pre-defined style recipes in `references/style-recipes/`. However, users can also provide custom specifications if they prefer specific token values over the anchored recipes. Either way, the skill requires explicit declaration of all tokens before proceeding to component generation.

### What file formats does the skill use for design tokens?

The skill primarily uses **CSS custom properties** (variables) for web projects and **React-style JavaScript objects** for component-scoped styling. These formats are defined in the design system declaration phase and enforced throughout the codebase, as specified in the skill's [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) workflow documentation.

### Can I use custom design systems instead of the provided recipes?

Yes, while the skill provides 25 anchored recipes like "linear" in [`references/style-recipes/linear.md`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/linear.md), the Step 3 workflow supports custom specifications. Users can define their own palette, typography, spacing, and motion tokens from scratch, and the skill will enforce these through the same validation checklist used for recipe-based systems.

### How does the skill prevent inconsistent styling across components?

The skill prevents inconsistency through **modular token scoping** and the **pre-delivery checklist**. Each component receives scoped style objects (e.g., `terminalStyles`, `headerStyles`) that reference global CSS custom properties. The checklist then verifies that no component uses hardcoded values or bypasses the token system, ensuring all styling derives from the declared design system.