skills.rest
KAOPU-XiaoPu
KAOPU-XiaoPuCOMMUNITY
Explore all skills by this author →
GitHub

web-design

Generate a 9-section DESIGN.md spec and web code from PRD, URL, or screenshots.

610|57|Updated Apr 16, 2026
Search Tags:#design#code-generation#spec-first#web-design#design-md
One-click install
npx skills add https://github.com/KAOPU-XiaoPu/web-design --skill web-design-kaopu-xiaopu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design
Source: https://github.com/KAOPU-XiaoPu/web-design/tree/main
Command: npx skills add https://github.com/KAOPU-XiaoPu/web-design --skill web-design-kaopu-xiaopu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

web-design tackles the challenge of turning vague design intent into a consistent, reusable DESIGN.md spec before generating code.

Core Features & Use Cases

  • Phase A: Understand inputs (PRD, URL, screenshot) and extract design cues.
  • Phase B: Produce a 9-section DESIGN.md with color, typography, components, layout, motion, depth, and responsive rules.
  • Phase C: Generate production-ready web code that adheres to the DESIGN.md and passes a 100-point quality checklist.

Quick Start

Use the web-design skill to create a DESIGN.md-based spec from your PRD and/or URL or screenshot, then generate code.

Frequently Asked Questions about web-design

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

FAQPage Schema
How do I turn a PRD or screenshot into a consistent web design spec before coding?▼

To turn a PRD or screenshot into a web design spec, this skill extracts design cues from your inputs and generates a 9-section DESIGN.md covering color, typography, components, layout, motion, depth, and responsive rules.

How does spec-first web design improve production-ready code generation?▼

Spec-first web design improves code generation by enforcing a design-system-driven output using CSS variables and typography rules, validating the final code against a stepwise 100-point quality checklist to ensure consistency.

Can I extract design cues directly from an existing URL to create a DESIGN.md file?▼

Yes, you can extract design cues directly from a URL. The skill accepts URLs as input to analyze existing web pages and translate those visual patterns into a structured, reusable DESIGN.md specification.

Do I need Playwright installed to generate web code from a design spec?▼

You need Playwright installed as a dependency to support the skill's web interaction and validation capabilities, ensuring the generated production-ready code aligns with the extracted design system.

What is the best way to maintain consistent CSS variables and typography rules across multiple web pages?▼

The best way to maintain consistent CSS variables and typography rules is to define them in a 9-section DESIGN.md spec first, then use that specification to drive and enforce design-system-driven code generation across all pages.

What limitations exist when converting ambiguous design intent into web code?▼

When converting ambiguous design intent, limitations arise if inputs lack sufficient visual or functional detail, requiring a stepwise quality checklist to validate that the generated code meets the spec's motion and responsive guidelines.

Related Skills

Explore More Design & Creative Skills→
kirvinkirvin

figma-to-spec

Convert Figma design URLs into structured feature specifications.

Community
Intermediate
AllBeingsFutureAllBeingsFuture
9

allbeingsfuture/skills@frontend-design

Generate production-ready HTML/CSS/JS and React interfaces with CSS variables and accessibility.

Community
Advanced
jhlee0409jhlee0409

code-review

Review TypeScript and React code for quality, accessibility, and performance.

Community
Intermediate
photonics-dhlphotonics-dhl

stable-diffusion-image-generation

Generate images from text prompts using Stable Diffusion via HuggingFace Diffusers.

Community
Intermediate