xiaopu-ai

web-design: Create Consistent Web Pages with a Claude Code Skill

web-design is a Claude Code skill that turns product briefs, reference URLs, or screenshots into an editable design specification before generating web code. It is suited to developers and designers who want a repeatable, spec-led workflow for building consistent pages.

PythonMITClaude CodeAgent SkillsAI Agents
View on GitHub Compare
Stars
777
Forks
79
Stars, last 10 days
+5

Our take

Health score

19/100

How it is scored
Activity
32
Community
0
Issues
21
Pull requests
21

+5 stars in the last 10 days

  • Fewer contributors than 100% of the projects we track

Overview

web-design is a Claude Code skill for creating web pages through a two-step process: define the design in a portable DESIGN.md, then generate code that follows that specification. It aims to make visual decisions explicit and editable instead of leaving them implicit in a code-generation prompt.

It can draw input from a PRD, a reference URL, a screenshot, keywords, or a brand name. The repository includes the skill instructions and supporting references and scripts, as well as a landing page demonstrating the project.

Key Features

  • Accepts a PRD, reference URL, screenshot, keywords, or brand name as design input.
  • Produces a nine-section DESIGN.md covering visual and interaction guidance, responsive behavior, and accessibility.
  • Keeps the design specification available for approval and manual editing before code generation.
  • Generates web code intended to follow the approved specification.
  • Includes a quality checklist for self-auditing generated work and a diff audit when a reference URL is available.
  • Provides supporting design references and scripts, including a Playwright crawler, static token extractor, and Unsplash image fetcher.

Use Cases

  • A developer starting a page from a PRD can establish its design rules before asking Claude Code to implement it.
  • A designer or developer recreating a page from a reference URL or screenshot can capture visual decisions in an editable spec.
  • Teams building several pages can use a shared specification to help keep layout, components, and visual style consistent.
  • Someone exploring a brand direction can provide keywords or a brand name and review the generated design specification before committing to code.

Getting Started

Clone the repository into your Claude Code skills directory:

git clone https://github.com/xiaopu-ai/web-design ~/.claude/skills/web-design

See the README for details, including how to run the landing page locally.

Considerations

  • The skill is designed for Claude Code, so using it requires that environment and its skills directory.
  • Generated output depends on the quality and detail of the supplied inputs. The README describes a fallback chain for sparse inputs, but does not guarantee a particular result.
  • The workflow expects a review step: the design specification is meant to be approved and can be edited before code generation.
  • The language metadata is Python, while the documented landing page uses HTML, CSS, and JavaScript; the repository is a skill and supporting assets rather than a conventional Python application.

Found this useful?

Share it with someone who would like web-design.