draw‑ui – AI‑assisted UI design skill for agents

What it is

draw‑ui is a skill (plug‑in) that lets an AI agent turn a textual description of a product page – or an existing screenshot – into a complete UI design and, optionally, into runnable HTML/CSS (or a WeChat mini‑program). The skill handles the whole workflow:

1. Clarify the page purpose, core function and any immutable regions (e.g., a fixed sidebar).
2. Optionally ingest reference images to steer style, typography, spacing, etc.
3. Generate a visual mock‑up (PNG/JPEG) that follows the chosen visual direction.
4. Split the mock‑up into code (layout, components, text) and assets (logos, illustrations, photos).
5. Emit the design mock‑up and a ready‑to‑use implementation (HTML/CSS or WXML/​WXSS for mini‑programs).

The skill is meant to be called by an LLM‑powered agent (e.g., a ChatGPT‑style bot) that already has image‑generation capability. It does not replace a front‑end framework; it simply produces the design artefacts that a developer can drop into an existing React/Vue/TS project or serve as a static page.

---

How to use it

There are two entry points:

1. Directly from an agent

请安装这个 Skill：https://github.com/oil-oil/draw-ui

After the skill is installed, the agent can be prompted:

[$draw-ui] 帮我设计一个创作者数据分析页面，包含 30 天趋势、热门内容和收入数据。

or, to reconstruct an existing UI:

[$draw-ui] 把这张设计稿还原成 HTML/CSS，侧边栏保持不变，先告诉我哪些部分需要单独准备图片素材。

The skill will ask the three clarification questions (page purpose, reference screenshot, immutable zones) only if the information is ambiguous.

2. Command‑line installation

npx skills add oil-oil/draw-ui   # registers the skill

The skill can then be invoked from the terminal or from a script that talks to the underlying LLM service.

---

Core capabilities

Input	What draw‑ui does	Output
Text description only	Generates a full‑page visual concept from scratch, decides layout, colour palette, component hierarchy.	One or more design mock‑up images + a short implementation guide.
Screenshot + immutable zones	Extracts the fixed parts (e.g., navigation bar), re‑designs the rest while preserving those zones.	Updated mock‑up + HTML/CSS (or mini‑program) that re‑uses the unchanged sections.
Reference style image	Copies font choices, spacing, visual language from the reference while re‑arranging content for the new business case.	Style‑aligned mock‑up + code that mirrors the reference’s visual grammar.
Existing front‑end project	Uses the project’s stack (React, Vue, TS, etc.) to emit components that fit the generated design.	Component files that can be dropped into the project.

The skill distinguishes design artefacts (images) from executable artefacts (HTML/CSS, WXML/WXSS). It never claims to have produced a fully responsive or accessible implementation – those aspects must be verified by a developer.

---

Technical details

• Dependencies – Python 3.10+, Pillow for image handling, optional google‑genai for ZenMux adapter. Node 22.18+ is required only for the npx skills add wrapper.
• Supported platforms – macOS (tested), Windows (PowerShell entry point, not fully validated), Linux (via Bash). The core logic is OS‑agnostic; only the script wrappers differ.
• Model integration – By default it uses the host agent’s built‑in image generation model. You can override the model/service via the skill’s configuration (see references/generation.md).
• Workflow –
  1. Prompt orchestration – the skill builds a prompt that includes the clarified requirements and any reference images.
  2. Image generation – calls the selected image model to produce the UI mock‑up (single long‑page or segmented blocks).
  3. Measurement & extraction – uses Pillow to measure component bounding boxes, extracts clean assets, and records colour/spacing values.
  4. Code synthesis – assembles HTML/CSS (or WXML/WXSS) based on the measured layout, inserting placeholders for assets that need manual creation.
• Testing – Unit tests (python -m unittest discover) and a shell test (bash tests/test_ask_draw.sh) cover request packaging, output sanitisation, block assembly, asset transparency, and region measurement.
• API‑key handling – When an external image service is used, a local configuration UI stores the key in the system credential store; keys are never sent to the LLM.

---

When it’s not suitable

• Pure graphic work such as posters, illustrations, or story‑boards – draw‑ui focuses on product‑oriented UI pages.
• Projects that require full interaction logic, responsive breakpoints, or accessibility compliance out‑of‑the‑box.
• Environments without any image‑generation capability; the skill will simply report the limitation.

---

License

MIT – you can freely use, modify, and redistribute the skill.

---

In short: draw‑ui is an AI‑driven, agent‑friendly plug‑in that turns a page description or screenshot into a visual design and a starter HTML/CSS (or mini‑program) implementation, handling style reference, immutable zones, and asset extraction while leaving the final coding and QA to the developer.