Web Design Engineer

{
  "name": "web-design-engineer",
  "version": "1.2.1",
  "category": "Design / Frontend",
  "description": "Build high-quality visual Web artifacts using HTML/CSS/JavaScript/React — landing pages, dashboards, interactive prototypes, slide decks, animations, UI mockups, and data visualizations — with a six-step design workflow and an anti-cliché design system.",
  "homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/web-design-engineer",
  "compat": [
    "claude-code",
    "claude-ai",
    "cursor",
    "codex-cli",
    "gemini-cli",
    "opencode"
  ]
}


# Web Design Engineer Skill

**An AI agent skill that transforms AI-generated web pages from "functional" to "stunning."**

[中文文档](./README.zh-CN.md) · [Back to collection root](../../README.md)

![Web Design Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design-skill.webp)

---

## What Is This?

This is a reusable **Skill** (structured system prompt) for AI coding agents — such as [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor](https://cursor.com), and other tools that support the `SKILL.md` format — that dramatically improves the design quality of AI-generated HTML/CSS/JavaScript artifacts.

It distills the core design philosophy from [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs)'s system prompt into an open, portable, and customizable skill file that you can drop into any project.

### The Problem

Modern LLMs can already produce functional web pages from simple prompts. But their output tends to converge on the same aesthetic: Inter font, blue primary buttons, purple-pink gradients, large-radius cards, emoji as icons, fabricated testimonials. Technically correct, visually generic.

### The Solution

This skill injects **design taste** into the AI's decision-making process through:

- **Anti-cliché rules** — an explicit blocklist of overused AI design patterns
- **Design system declaration** — forces the AI to articulate color, typography, spacing, and motion choices *before writing code*
- **oklch color theory** — perceptually uniform color derivation instead of random hex guessing
- **Curated font & color pairings** — high-quality starting points that replace the default Inter + #3b82f6
- **Placeholder philosophy** — honest `[icon]` markers instead of poorly drawn SVG fakes
- **Structured workflow** — six-step process from requirements → context → design system → v0 draft → full build → verification

---

## Quick Start

### For Claude Code / Cursor / AI Agents

Copy this skill folder into your project:

```
your-project/
├── .agents/skills/web-design-engineer/   # or .claude/skills/web-design-engineer/
│   ├── SKILL.md                          # Main skill file
│   └── references/
│       ├── advanced-patterns.md          # Code template library (slide engine, device frames, motion timelines, data viz)
│       ├── design-directions.md          # Design Direction Advisor (6 schools, differentiated 3-pick recommendation)
│       ├── style-recipes/                # 25 anchored style recipes — one .md file per anchor, loaded on demand
│       │   ├── INDEX.md                   #   Catalog index + 3 cross-indexes + cross-cutting anti-patterns
│       │   ├── linear.md / aesop.md / pentagram.md / ...    #   25 single-recipe files
│       └── critique-guide.md             # 5-dimension scoring rubric + common issues catalog
└── ...
```

Or use the Claude Code plugin marketplace from the collection root — see the [top-level README](../../README.md#install).

The agent will automatically pick up the skill when your request involves visual/interactive front-end work.

### What It Covers

| Output Type | Examples |
|---|---|
| Web pages & landing pages | Marketing sites, product pages, portfolios |
| Interactive prototypes | Clickable app mockups with device frames |
| Slide decks | HTML presentations (1920×1080, keyboard nav) |
| Data visualizations | Dashboards with Chart.js or D3.js