draw-ui

draw-ui is an Agent Skill for UI design that produces design mockups first and then rebuilds them into code. It runs inside agent hosts such as Claude Code and Codex, takes a page brief or an existing screenshot as input, and outputs either UI design images or runnable pages (HTML/CSS, code inside an existing React/Vue/TypeScript project, or WeChat mini-program WXML/WXSS with TS/JS).

What is draw-ui?

draw-ui is a UI design and design-to-code Skill maintained by oil-oil. It first fixes the visual direction and the business priorities of a page, then generates an implementable UI design; alternatively it converts an existing screenshot or generated image back into HTML/CSS, an existing frontend project, or a WeChat mini-program page. Design mockups and verified, runnable pages are kept explicitly distinct in its output.

Key Features

• Brief-first workflow — before drawing, it confirms which page it is, the core function, whether App screenshots or design mockups exist, and which regions (e.g. sidebar, top navigation) must stay unchanged; it skips repeated questions when the brief is already clear.
• Native image generation — uses the Agent's built-in image generation by default, follows user choice when a model, service, or generation Skill is specified, and explains limitations when no capability is available.
• Long-page landing pages — website and landing pages are generated as full vertical pages from navigation to footer at desktop width; when a clear long image can't be output directly, blocks are generated separately and assembled into one preview.
• Reference-image strategy — four documented modes: no reference image for free exploration, fixed navigation/sidebar with a neutral content-area copy, style borrowing (type, proportions, color planes, detail relationships), and precise reproduction from a full screenshot.
• Code vs. asset split — layout, cards, text, buttons, tables, filters, and simple line icons are coded; logos, brand marks, complex illustrations, photos, 3D or glass effects are kept or regenerated as image assets.
• Framework-aware output — reuses the architecture of existing React, Vue, or TypeScript projects, delivers standalone pages as HTML/CSS, and builds mini-programs in WXML/WXSS with TS/JS, validated in the official mini-program devtools rather than a browser prototype.
• Calibration by measurement — colors, spacing, and proportions are recorded through region measurement; after implementation the real page is captured on the same baseline and element boxes plus cropped screenshots are compared.
• Optional script adapters — Python 3.10+ scripts, with ZenMux and OpenAI Responses API adapters (ZenMux needs google-genai and Pillow); measurement, image processing, assembly, and screenshot checks need Pillow.

Who is it for?

• Agent users with Claude Code or Codex: describe a page (e.g. a creator analytics page with 30-day trends and revenue data) and receive a design mockup.
• Frontend developers: hand over a screenshot and get runnable HTML/CSS or project-native interface code with an explicit list of which parts need separate image assets.
• WeChat mini-program developers: rebuild an approved design into WXML/WXSS pages and verify them in the mini-program devtools.
• Designers exploring styles: generate one base image, then extend it across pages or interaction states with multi-panel flow overviews.

How does draw-ui work?

1. Install via the GitHub repo link given to the Agent, or run npx skills add oil-oil/draw-ui (this install route needs Node.js/npm but is not a runtime dependency).
2. Invoke with [$draw-ui] plus a page description, or attach a screenshot with instructions such as "rebuild this design as HTML/CSS, keep the sidebar unchanged, and list which parts need separate image assets."
3. Receive the design mockup, a short implementation note, and items still to be verified; when a design is confirmed, draw-ui rebuilds it and compares the result against the baseline.

Pros and cons

• Separates mockups from verified pages, and lists what remains unverified (interaction, responsiveness, accessibility) instead of calling a design a working prototype.
• Reference-image handling is explicit, and it requires confirming the model's image-input capability rather than treating a text description as having sent an image.
• macOS script tests have been run; Windows has a PowerShell entry point, but Windows and Linux are not yet verified on real machines.
• No browser means interaction and responsive behavior stay unverified.

FAQ

Is draw-ui free?

draw-ui is released under the MIT license. Online image generation still needs network access and service quota from whichever model service is configured; offline use is limited to organizing plans, processing existing images, and running local tests.

Does draw-ui need an API key?

Only when an external image service is used. Keys can be entered on a local configuration page and are stored in the system credential store; that page requires Node.js 22.18+ and a working system credential service. Pure local processing needs no key.

Can draw-ui make posters or illustrations?

No by default — it serves product interfaces and website pages, not posters, illustrations, or storyboards. Pure visual exploration is allowed when explicitly requested, with relaxed implementation constraints.

What if I only need the first screen?

Website and landing pages default to a full vertical page from navigation to footer; only an explicit request for the first screen limits the output to the area above the fold.