Web Design Builder — Claude Code skill: build and verify UI
Turns a spec or a plain description into HTML5/CSS/JS, then checks accessibility and behaviour through Playwright MCP.
npx skills add rknall/claude-skills --skill web-design-builder -a claude-codeWhat Web Design Builder 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.
What it helps with
- 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 for the agent
- 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
How to install Web Design Builder
1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill web-design-builder -a claude-code2Manually: put the files in place
~/.claude/skills/web-design-builder/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/web-design-builder/
1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill web-design-builder -a codex2Manually: put the files in place
.agents/skills/web-design-builder/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill web-design-builder -a cursor2Manually: put the files in place
.cursor/skills/web-design-builder/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install rknall/claude-skills web-design-builder2Manually: put the files in place
.github/skills/web-design-builder/SKILL.md1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill web-design-builder -a gemini-cli2Platform CLI
gemini skills install https://github.com/rknall/claude-skills --path web-design-builderManually: put the files in place
.devin/skills/web-design-builder/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill web-design-builder -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about Web Design Builder
How do I install Web Design Builder in Claude?
Run npx skills add rknall/claude-skills --skill web-design-builder -a claude-code. The skill lands in ~/.claude/skills/web-design-builder/SKILL.md.
What does Web Design Builder do?
It generates and refactors HTML5/JavaScript designs from a description: responsive layout, semantics, accessibility. When Playwright MCP is available it also verifies the result in a browser.
Do I need Playwright MCP for this skill?
Not for generation. Without Playwright MCP the verification phase is skipped and you get a design with no accessibility or functionality testing.
