garden-skills-web-design-engineer

What this skill does

```markdown
---
name: garden-skills-web-design-engineer
description: AI agent skill that transforms AI-generated web pages from functional to stunning using design systems, oklch colors, curated typography, and anti-cliché rules
triggers:
  - make this web page look better
  - improve the design of this HTML page
  - create a beautiful landing page
  - design a stunning web interface
  - apply web design engineer skill
  - transform this from functional to stunning
  - use garden skills for web design
  - generate a high quality web page design
---

# Web Design Engineer Skill (garden-skills)

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

An AI agent skill that elevates AI-generated HTML/CSS/JavaScript artifacts from generic and functional to polished and visually compelling. Inspired by Claude Design's system prompt, this skill encodes design taste, anti-pattern rules, typography pairings, and a structured six-step workflow directly into your agent's decision-making process.

---

## What This Skill Does

- **Bans AI design clichés** — no purple-pink gradients, no emoji icons, no Inter font, no fabricated testimonials
- **Enforces oklch color theory** — perceptually uniform color derivation for harmonious palettes
- **Provides curated font × color pairings** — six validated visual systems for common use cases
- **Defines a six-step workflow** — from requirements gathering through verification
- **Ships a pattern library** — ready-to-use code templates for advanced UI patterns

---

## Installation

Copy the skill directory into your project root:

```
your-project/
├── .agents/skills/web-design-engineer/
│   ├── SKILL.md
│   └── references/
│       └── advanced-patterns.md
└── ...
```

For Cursor or tools using `.claude/`:

```
your-project/
├── .claude/skills/web-design-engineer/
│   ├── SKILL.md
│   └── references/
│       └── advanced-patterns.md
└── ...
```

Clone directly from GitHub:

```bash
git clone https://github.com/ConardLi/garden-skills.git _tmp_garden
mkdir -p .agents/skills/web-design-engineer/references
cp _tmp_garden/.agents/skills/web-design-engineer/SKILL.md .agents/skills/web-design-engineer/
cp _tmp_garden/.agents/skills/web-design-engineer/references/advanced-patterns.md .agents/skills/web-design-engineer/references/
rm -rf _tmp_garden
```

The agent picks up the skill automatically when your request involves visual or interactive front-end work.

---

## The Six-Step Workflow

When this skill is active, the agent follows this structured process:

```
1. Understand requirements  →  Ask only when information is insufficient
2. Gather design context    →  Examine existing code/screenshots; never start from nothing
3. Declare design system    →  Colors, fonts, spacing, motion — written in Markdown before any code
4. Show v0 draft early      →  Placeholders + layout + tokens; allow course correction
5. Full build               →  Components, states, motion; pause at key decision points
6. Verify                   →  Pre-delivery checklist: no console errors, no rogue hues
```

---

## Design System Declaration (Step 3)

Before writing any code, the agent declares the design system in plain Markdown:

```markdown
## Design System

### Colors (oklch)
- Primary:    oklch(55% 0.18 265)   /* blue-violet */
- Surface:    oklch(98% 0.005 265)  /* near-white with hue tint */
- On-surface: oklch(18% 0.02 265)   /* near-black */
- Accent:     oklch(72% 0.14 145)   /* muted green */

### Typography
- Display:  "Space Grotesk", sans-serif  — weights 400 600 700
- Body:     "Inter", sans-serif          — weights 400 500
- Mono:     "JetBrains Mono", monospace  — weight 400

### Spacing scale (rem)
0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4 / 6 / 8 / 12

### Motion
- Easing:    cubic-bezier(0.16, 1, 0.3, 1)
- Duration:  150ms micro / 300ms element / 600ms page
```

---

## oklch Color System

Colors use the perceptually uniform `oklch(lightness% chroma hue)` space. Unlike HSL, equal lightness values *look* equally bright across all hues.

```css
:root {
  /* Primary scale — same lightness steps, perceptually consistent */
  --color-primary-900: oklch(25% 0.18 265);
  --color-primary-700: oklch(40% 0.20 265);
  --color-primary-500: oklch(55% 0.22 265);  /* base */
  --color-primary-300: oklch(72% 0.16 265);
  --color-primary-100: oklch(93% 0.05 265);

  /* Surface tokens */
  --color-surface:        oklch(98% 0.005 265);
  --color-surface-raised: oklch(100% 0 0);
  --color-on-surface:     oklch(18% 0.02 265);
  --color-on-surface-dim: oklch(48% 0.04 265);

  /* Semantic */
  --color-success: oklch(62% 0.17 145);
  --color-warning: oklch(75% 0.18 75);
  --color-danger:  oklch(58% 0.22 25);
}
```

Derive tints and shades by adjusting only the `lightness%` value while keeping `chroma` and `hue` fixed:

```css
/* Hover state: lighten by ~8% */
--color-primary-hover: oklch(63% 0.22 265);

/* Disabled: desaturate (reduce chroma) */
--color-primary-disabled: oklch(55% 0.06 265);
```

---

## Curated Font × Color Pairings

| Style | Primary Color (oklch) | Display Font | Body Font | Use Case |
|---|---|---|---|---|
| Modern tech | `oklch(55% 0.20 265)` | Space Grotesk | Inter | SaaS, dev tools |
| Elegant editorial | `oklch(42% 0.12 55)` | Newsreader | Outfit | Content, blogs |
| Premium brand | `oklch(22% 0.03 265)` | Sora | Plus Jakarta Sans | Luxury, finance |
| Lively consumer | `oklch(60% 0.22 22)` | Plus Jakarta Sans | Outfit | E-commerce, social |
| Minimal professional | `oklch(52% 0.14 195)` | Outfit | Space Grotesk | Dashboards, B2B |
| Artisan warmth | `oklch(58% 0.14 60)` | Caveat | Newsreader | Food, education |

Load Google Fonts for a pairing:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Modern tech pairing -->
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@400;500&family=JetBrains+Mono&display=swap" rel="stylesheet">
```

---

## Anti-Cliché Rules

The skill **explicitly bans** the following patterns. The agent will refuse to use them:

```
BANNED colors/gradients:
  - Purple-pink-blue gradient backgrounds (linear-gradient with purple + pink + blue)
  - Neon glow effects as primary design elements
  - #3b82f6 (Tailwind blue-500) as default primary

BANNED layout patterns:
  - Left-border accent cards (border-left: 4px solid var(--primary))
  - Feature grids with emoji + heading + one-line description
  - "Trusted by X companies" fake logo walls
  - Fabricated testimonials with stock avatar initials
  - Fabricated statistics ("10,000+ users", "99.9% uptime")

BANNED typography:
  - Inter, Roboto, Arial, Fraunces, system-ui as display fonts
  - All-caps headings as the primary typographic move
  - Font size hero text above 96px on desktop

BANNED components:
  - Emoji as icon substitutes in production UI
  - Poorly approximated SVG icons (stick to [icon] placeholders)
  - Blue primary buttons as default without justification
```

---

## Placeholder Philosophy

When assets are missing, use honest text markers rather than broken SVGs:

```html
<!-- Icon placeholder -->
<span class="icon-placeholder" aria-label="settings icon">[icon: settings]</span>

<!-- Image placeholder -->
<div class="img-placeholder" role="img" aria-label="Hero product shot">
  <span>Hero image — 1440 × 800 — product in use</span>
</div>

<!-- Logo placeholder -->
<div class="logo-placeholder">[Logo: CompanyName]</div>
```

```css
.icon-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  background: oklch(92% 0.03 265);
  border-radius: 3px;
  font-size: 0.6em;
  color: oklch(45% 0.08 265);
  font-family: "Space Grotesk", sans-serif;
  vertical-align: middle;
}

.img-placeholder {
  background: oklch(94% 0.02 265);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(55% 0.04 265);
  font-size: 0.8