Web Design Engineer Skill

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

中文文档

What Is This?

This is a reusable Skill (structured system prompt) for AI coding agents — such as Claude Code, Cursor, 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'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 the skill directory into your project:

your-project/
├── .agents/skills/web-design-engineer/
│   ├── SKILL.md                          # Main skill file (~400 lines)
│   └── references/
│       └── advanced-patterns.md          # Code template library (~520 lines)
└── ...

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

Note: Some tools use .claude/skills/ instead of .agents/skills/. Place the files in whichever directory your tool expects. The content is identical.

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 | | Animations | CSS/JS motion design, timeline-driven demos | | Design systems | Token exploration, component variants |

How It Works

The Six-Step Workflow

1. Understand requirements  →  Ask only when information is insufficient
2. Gather design context    →  Code > screenshots; never start from nothing
3. Declare design system    →  Colors, fonts, spacing, motion — in Markdown, before code
4. Show v0 d