Breaking

XiaoPu's web-design skill for Claude Code drafts DESIGN.md before generating page code from screenshots

September 4, 2026 at 01:36 EDT

Software Dev & Coding
Open Source
AI Agents

An open-source Claude Code skill named web-design generates web-page code from a screenshot, product brief, or reference URL only after first writing a portable DESIGN.md specification. Published on GitHub by xiaopu-ai and credited to XiaoPu (KAOPU-XiaoPu), the MIT-licensed repository frames the workflow as spec first, code second, and a companion site is itself presented as a page produced from that spec.

September 2026 · xiaopu-ai

Spec first. Then the page code.

web-design, an open-source Claude Code skill, turns screenshots, PRDs, and reference URLs into web pages only after writing an editable DESIGN.md.

Mandatory loop

Understand

PRD, URL, screenshot, keywords, or brand.

→

DESIGN.md

Nine-section spec, saved and editable.

→

Generate

Code against the spec, then a 100-point audit.

Motion library · 124 items

Stacked columns are proportional (1 block ≈ 4 recipes). Backgrounds are the largest set.

Text

Animations

Components

Backgrounds

DESIGN.md sections

Brand presets

Style seeds

100

Point quality checklist

Why builders like it

Spec-before-code is treated as a sane gate: tokens stay named, the file can be edited, and later work can be checked against DESIGN.md.

Where it still stalls

Pixels omit interaction intent. A static shell can look right while hover, focus, and click wiring still take extra work. The preferred crawler path also expects Python.

Front-end pages only · MIT · needs Claude Code

Landing · portfolio · blog · SaaS intro Not for backends or databases 0 hardcoded hex in generated CSS WebGL scenes ≤ 1 per page

Continue reading

The rest of this article is for AI News Blitz readers. Choose an option below to keep reading.