A design skill that refuses to hand you a screenshot as a webpage

What it does

draw-ui is an agent skill (Python, MIT) for UI design and design-to-code. Given a page goal and real content, it first settles the visual direction and information hierarchy, then generates a design mockup. Given an existing screenshot or confirmed mockup, it splits the page into code (layout, text, buttons, tables, plain icons) and image assets (logos, photos, complex illustration), and rebuilds it as HTML/CSS, into an existing React/Vue/TypeScript project, or as a WeChat mini-program.

The interesting bit

The skill is unusually honest about its own limits: it explicitly distinguishes a generated design image from a verified runnable page, refuses to call a sequence of images a “working prototype,” and won’t dress up a diff score as a “fidelity percentage.” It also measures colors, spacing, and proportions from the source, then re-captures the built page on the same baseline and compares element boxes and crops — actual calibration, not vibes.

Key highlights

• Works with Claude Code and Codex; uses the host’s built-in image generation by default, with optional script adapters (ZenMux, OpenAI Responses API) if you choose them.
• Reference-image strategy is deliberate: extract fonts, proportions, and color relations from a good design without importing its irrelevant layout.
• Landing pages default to full-length desktop-width pages, generated in sections and assembled when the tool can’t output one long image.
• Runs fully offline for planning and local image processing; online generation needs network and quota.
• API keys are entered via a local config page and stored in the system credential store — never pasted into chat.

Caveats

• Scripts were tested on macOS only; Windows and Linux are unverified in practice (a PowerShell entry exists).
• Actual model, size, and reference-image support depends on the chosen service — the README is explicit that not all hosts and models are validated.
• Generated designs don’t cover interaction, responsiveness, or accessibility; those stay on your to-verify list.

Verdict

Worth a look if you want an agent that designs before it codes and tells you what’s still unverified. Skip it if you expected a magic screenshot-to-pixel-perfect-page converter — it’s a disciplined workflow, not a wand.