# Web Design Builder

Turns a spec or a plain description into HTML5/CSS/JS, then checks accessibility and behaviour through Playwright MCP.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 416 installs · ★ 86
- Author: rknall
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/rknall/claude-skills/tree/HEAD/web-design-builder/SKILL.md
- Updated: 2025-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/web-design-builder

## What it does

The skill reads a specification or a written brief and produces working markup: semantic HTML5, mobile-first layout, CSS custom properties for theming, JavaScript with progressive enhancement. It targets WCAG 2.1 Level AA — contrast, heading order, focus states, a skip link. You pick the stack: vanilla HTML/CSS/JS, Tailwind CSS, React, Vue or Alpine.js.

There are three phases. First it asks about scope: page type, audience, copy, brand colours, responsive needs. Then it writes the design to a file — a single HTML file for a mockup, or split `styles.css` and `script.js` for production. The last phase opens the page in a browser and runs accessibility scans, a Tab-order pass and screenshots.

That last phase only runs when Playwright MCP is present. Without it the skill says verification is skipped and carries on generating, so what you get is an unchecked mockup. Worth installing the MCP first if you actually want the verification step.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill web-design-builder -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/web-design-builder/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/web-design-builder/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill web-design-builder -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/web-design-builder/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill web-design-builder -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/web-design-builder/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install rknall/claude-skills web-design-builder
```

2. **Manually: put the files in place**
- File: `.github/skills/web-design-builder/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill web-design-builder -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/rknall/claude-skills --path web-design-builder
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/web-design-builder/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill web-design-builder -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/rknall/claude-skills/tree/HEAD/web-design-builder/SKILL.md

## When to use it
- build a landing page from a written brief
- refactor existing HTML/CSS into semantic, responsive markup
- mock up a dashboard or a form
- check a page for contrast and heading order
- assemble a component library on one theme

## Example prompts
- Build a landing page for a SaaS product with Tailwind CSS, mobile-first
- Refactor `index.html`: semantic tags, ARIA landmarks, AA contrast
- Create a signup form with validation and verify it in the browser with Playwright

## Similar
- [design-component](https://affpapa.org/en/nevibecode/skills/design-component.md) — skill · 522 installs
- [responsive-web-design](https://affpapa.org/en/nevibecode/skills/responsive-web-design.md) — skill · 1100 installs
- [web-testing](https://affpapa.org/en/nevibecode/skills/web-testing.md) — skill · 442 installs
- [extract-design-system](https://affpapa.org/en/nevibecode/skills/extract-design-system.md) — skill · 130700 installs
- [ui-design](https://affpapa.org/en/nevibecode/skills/mindrally-ui-design.md) — skill · 981 installs
- [design-review](https://affpapa.org/en/nevibecode/skills/design-review.md) — skill · 5800 installs

From the same set: [rknall/claude-skills](https://affpapa.org/en/nevibecode/by/rknall/claude-skills.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md