skills.rest
xiaopu-aixiaopu-aiCommunity·2 Agent Skills Included

web-design

Design consistent, animated web pages from specs, URLs, or screenshots

Generates complete web pages from a PRD, reference URL, screenshot, or brand name using a spec-first workflow. Produces an editable DESIGN.md covering color, typography, components, motion, and responsive rules before writing any code. Eliminates inconsistent styling and vague AI output by enforcing a 100-point quality checklist and design audits. Includes 58 brand design systems, motion libraries, and crawler scripts to speed up landing pages, portfolios, and product sites.
716|70
↗
npx skills add xiaopu-ai/web-design --all -g -y

All Skills in This Repository (2)

Pure Emerald Level Indicators
📦 In Repo
xiaopu-aixiaopu-ai

web-design

Generate an editable DESIGN.md specification before implementing web interfaces.

Community
Advanced
📦 In Repo
xiaopu-aixiaopu-ai

web-design

Generates a DESIGN.md spec from PRDs, URLs, or screenshots, then produces web code following it.

Community
Advanced

Frequently Asked Questions

FAQPage Schema
How to install web-design?▼

Run `npx skills add xiaopu-ai/web-design --all -g -y` in your terminal to install the skill globally for your AI agent.

How to make AI generate consistent web designs?▼

This skill forces a spec-first workflow: it writes a full DESIGN.md with colors, fonts, components, and motion rules, then generates code that strictly follows that spec.

Can AI clone a website's design style from a URL?▼

Yes. It crawls the reference site with Playwright, extracts design tokens and motion patterns, then builds a new page in that style without copying content.

Does web-design work with Claude Code?▼

Yes. It is built as a standard SKILL.md that Claude Code auto-discovers, and it also works with other agents that support the SKILL.md format.

Can I use web-design without design experience?▼

Yes. Describe your product or share a screenshot in plain language, and the agent picks a style direction, confirms it with you, and handles all visual decisions.

Related Repositories in Design & Creative

View All in Design & Creative→
nextlevelbuildernextlevelbuilder
123.5k

ui-ux-pro-max-skill

AI design intelligence for professional UI, brands, and presentations

Official📦 13 Skills
shadcn-uishadcn-ui
122.7k

ui

Build and customize beautiful React component libraries with AI

Official📦 2 Skills
nexu-ionexu-io
93.2k

open-design

Open-source AI design studio for decks, prototypes, images, and video

Official📦 394 Skills