skills.rest
xiaopu-ai
xiaopu-aiCOMMUNITY
Explore all skills by this author →
GitHub

web-design

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

610|57|Updated Apr 16, 2026
Search Tags:#design systems#web design#playwright#landing pages#motion design#design.md#responsive ui
One-click install
npx skills add https://github.com/xiaopu-ai/web-design --skill web-design-xiaopu-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design
Source: https://github.com/xiaopu-ai/web-design/tree/main
Command: npx skills add https://github.com/xiaopu-ai/web-design --skill web-design-xiaopu-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill prevents inconsistent, improvised web design by turning product requirements, references, screenshots, and keywords into an explicit design specification before generating code.

Core Features & Use Cases

  • Spec-First Design: Produces an editable DESIGN.md covering visual direction, colors, typography, components, layout, motion, accessibility, and responsive behavior.
  • Flexible Design Analysis: Extracts design cues from PRDs, reference URLs, screenshots, brand names, and descriptive keywords using fallback workflows and reusable design-system references.
  • Quality-Oriented Code Generation: Generates web pages that follow the approved specification and audits them for responsive behavior, accessibility, interaction states, motion quality, and visual consistency.
  • Use Case: Create a landing page from a PRD and competitor URL, approve the resulting design specification, and then generate implementation-ready HTML, CSS, JavaScript, or framework-based code.

Quick Start

Ask the web-design skill to create a landing page from your PRD, reference URL, or screenshot, first producing a DESIGN.md for your approval and then generating the web code.

Frequently Asked Questions about web-design

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

FAQPage Schema
How do I create consistent web design from a PRD and reference URLs?▼

To create consistent web design from a PRD and reference URLs, generate an editable design specification like DESIGN.md first. This spec-first approach defines visual direction, colors, typography, and components before producing implementation-ready web code.

What is spec-first web design and how does it prevent UI inconsistencies?▼

Spec-first web design prevents UI inconsistencies by producing an explicit design specification before code generation. This specification covers design tokens, typography, component states, responsive layouts, accessibility, and motion effects to ensure a polished web experience.

Can I build responsive landing pages using screenshots and brand references?▼

Yes, you can build responsive landing pages using screenshots and brand references. The workflow extracts design cues from these inputs to formulate a comprehensive design specification, which is then used to generate and audit the final web interfaces.

How do I audit generated web pages for accessibility and motion effects?▼

You audit generated web pages for accessibility and motion effects by evaluating the implementation against the approved design specification. The system automatically checks responsive behavior, interaction states, motion quality, and visual consistency.

Does this web design workflow require Playwright to test responsive UI?▼

Playwright is listed as a dependency for this web design workflow, indicating it is used to test responsive UI and audit the generated web pages. It helps verify that the implementation matches the approved design specification.

Related Skills

Explore More Design & Creative Skills→
whimzyLivewhimzyLive
3

hallmark

Automate page design, audits, redesigns, and design extraction from URLs or screenshots.

Community
Advanced
NGTPTENGTPTE

frontend-design

Design distinctive frontend interfaces from product requirements.

Community
Advanced
VanLVanL
1

browse

Automates browser navigation, form handling, and visual testing for web app QA.

Community
Intermediate
OpenDCAIOpenDCAI
114

tailwind-design-system

Build scalable design systems with Tailwind v4 tokens and CVA components.

Official
Advanced