skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

xiaopu-web-design-skill

Generate web pages from PRDs, URLs, or screenshots using a spec-first DESIGN.md workflow.

4|Updated May 16, 2026
Search Tags:#accessibility#landing page#design system#design tokens#web design#spec-first#html css
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill xiaopu-web-design-skill-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: xiaopu-web-design-skill
Source: https://github.com/reason-machines/design-skills/tree/main/skills/xiaopu-web-design-skill
Command: npx skills add https://github.com/reason-machines/design-skills --skill xiaopu-web-design-skill-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, beautifulsoup4, and includes scripts (resource) and references (resource) components.

What problem does it solve? Designing consistent, accessible web pages directly from loose requirements often leads to visual drift, missing accessibility support, and code that diverges from the intended design. This Skill enforces a spec-first, code-second workflow that produces a DESIGN.md specification before any HTML, CSS, or JavaScript is written. ## Core Features & Use Cases - Three-phase workflow: Understand inputs (PRD, reference URL, screenshot, keywords, or brand name), generate a 9-section DESIGN.md covering colors, typography, components, layout, motion, depth, principles, responsiveness, and accessibility, then generate code that strictly follows the spec. - Design token extraction: Crawl existing websites with a Playwright-based script or parse static files to extract color palettes, typography, and spacing values as structured JSON. - Quality self-audit: Validate generated pages against a 100-point checklist covering visual design, code quality, responsiveness, accessibility, and performance. - Use Case: Provide a PRD for a B2B SaaS landing page, review the generated DESIGN.md, request palette or typography changes, then receive production HTML, CSS, and JS with ARIA labels, focus states, and reduced-motion support. ## Quick Start Use the web-design skill to create a landing page from my PRD, generate the DESIGN.md spec first, and then build the HTML, CSS, and JavaScript after I approve it.

Frequently Asked Questions about xiaopu-web-design-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a web page from a PRD with a design spec?▼

Provide the PRD in your prompt and ask for the spec-first workflow. The skill extracts design direction from the requirements, generates a 9-section DESIGN.md for approval, then produces HTML, CSS, and JavaScript that strictly follows the approved specification.

How do I extract design tokens from an existing website?▼

Run the crawl.py script with the target URL to extract colors, typography, spacing, and component patterns into a JSON file. It uses Playwright and BeautifulSoup, and supports wait conditions for dynamically rendered content.

What inputs does the web design workflow accept?▼

It accepts five input types in priority order: a PRD, a reference URL to analyze, a screenshot as visual reference, design direction keywords, or a brand name. Each input type has graceful fallbacks if information is incomplete.

Does generated code support accessibility and reduced motion?▼

Yes. The DESIGN.md includes an accessibility section covering contrast ratios, focus states, and ARIA patterns. Generated code includes semantic HTML, keyboard navigation, focus traps for modals, and a prefers-reduced-motion media query.

Why does the generated code not match the DESIGN.md spec?▼

This happens when the spec is ambiguous or regeneration skips the audit step. Ask for regeneration strictly following DESIGN.md and request a self-audit against the quality checklist so colors, font sizes, and spacing match exactly.

What are the limitations of the website crawler?▼

The crawler can fail on heavily dynamic sites that render content after load. Use the wait-for and timeout options to delay extraction until target selectors appear, or fall back to the static token extractor on downloaded files.

Related Skills

Explore More Design & Creative Skills→
rampstackcorampstackco
523

creative-brief

Create and refine a creative brief with YAML frontmatter and Markdown body.

Official
Intermediate
strongerDeerstrongerDeer

perf

Automate Lighthouse runs and analyze web performance in CI/CD pipelines.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
udecodeudecode
16.5k

react

Enforces React patterns for destructured props, React Compiler, Effects, and Tailwind v4 syntax.

Official
Advanced