draw-ui skill
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
- 523 ★ on the repository
- Last commit
Extended access
Why this level
- Prompts and reference images go to the chosen image generation service
- The scripts run Python and install missing packages into a virtual environment
- The setup page saves keys into the system credential store
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/draw-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Prompts and reference images go to the chosen image generation service
- The scripts run Python and install missing packages into a virtual environment
- The setup page saves keys into the system credential store
This is third-party code. Review the repository files before installing.
What it does
draw-ui gives an agent the working order of a UI designer. Before generating it asks: which page this is and what its main function is; whether a screenshot or mockup exists to lean on; and which areas must stay untouched, such as a sidebar. If the data is enough it starts right away without extra questions. Then it picks a visual direction, sets emphasis by business meaning and generates a mockup, without forcing different products into the same card template. For websites and landing pages the default is a full vertical page from navigation to footer. If the tool cannot return a long image in good quality, the skill generates blocks in parts, checks them and assembles one preview file. A single first screen is made only on request. The second half of the work is moving the mockup into code. The skill splits the page into parts written as code (markup, text, controls) and parts kept as images (logos, illustrations, complex effects). It measures colors, sizes and coordinates by anchor region, then opens the built page in a browser and reads the same metrics. The program reports deviations from the mockup and helps locate where the layout drifted; whether a round passes is decided by a person from the final result. For existing React, Vue or TypeScript projects it follows their architecture, for a standalone page it delivers HTML and CSS, and for mini programs it writes WXML, WXSS and TS or JS. By default images come from the agent's built-in image generation. The ZenMux and OpenAI Responses API scripts are used only if you choose them. The design notes, images and run records are saved to the task directory.
Who it is for. For designers and frontend developers who want a page mockup from an agent and then build it in code, checking the result against the mockup by color and size.
Good fit when
- You need a mockup of a new page or a full landing page from navigation to footer
- You have an app screenshot and want to keep the sidebar while redrawing the content
- A finished mockup must be moved into HTML and CSS or into an existing React or Vue project
- You need to build a WeChat mini program page in WXML and WXSS from an image
- You want a series of screens in one style or a flow of several states on a shared base
Not a fit when
- You need an ordinary poster, illustration or storyboard: the skill is built for interfaces and websites
- You only want business logic changed with no design task
- You need to edit a photo or process an image with no interface task: the skill is not meant for that
- The agent has no built-in image generation and no access to a chosen service: a mockup cannot be produced without it
Example request
[$draw-ui] Design an analytics page for creators with a 30-day trend, top content and revenue, then rebuild it in HTML and CSSLimitations
A generated image does not prove that interactivity and responsiveness work; check them in code. Reference images hint at fonts, proportions and detail, but they can bring in an unwanted layout, so state what is taken from the reference.
Script adapters need Python 3.10 or newer. The ZenMux adapter needs google-genai and Pillow, measuring and assembly need Pillow, and the shell wrapper installs missing packages into a separate virtual environment. Keys are needed only when an external service is chosen, and a setup page stores them in the system credential store; that page needs Node.js 22.18 or newer. The OpenAI API is unavailable from Russia, so the OpenAI Responses adapter will not fit there.
The scripts were tested on macOS; Windows has a PowerShell entry point, while Linux and Windows have not been verified on real machines. Prompts and reference images go to the chosen service. Without generation online, the skill can only draft a plan, process existing images and run local tests.
How to disable. Delete the draw-ui skill folder from the agent's skills directory, for example `~/.claude/skills/`. Keys you saved through the setup page sit in the system credential store and are removed there.
FAQ
How do I install draw-ui in Claude Code?
Run `npx skills add oil-oil/draw-ui`; Node.js is required. You can also simply ask the agent: "Install this skill: https://github.com/oil-oil/draw-ui". After installing, call the skill as `[$draw-ui]` and describe the page.
How does a mockup differ from a working page?
A mockup stays an image, and verified HTML counts as a working page. The skill keeps them apart and reports what has been checked and what is still pending: interactivity, responsiveness, accessibility.
Does draw-ui need an API key?
Not for normal use: it uses the agent's built-in image generation by default. A key is needed only if you pick the external ZenMux or OpenAI Responses API service. It is entered on a local setup page and never goes into chat.
How does draw-ui move a mockup into code?
It splits the page into code and images: markup, text and ordinary icons are written by hand, while logos, photos and complex effects stay images. Then it opens the built page in a browser, reads its colors, sizes and coordinates and compares them with the mockup measurements to see where the layout drifted.
Can I get a page for a WeChat mini program?
Yes. For mini programs the skill writes WXML, WXSS and TS or JS and verifies them in the developer tools. A browser prototype does not count as mini program verification.
Discussion
No questions or reviews yet.
Related
SkillsA UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| draw-ui (this entry) | no | 523 | |
| Oil UI | no | 2,507 | same author: three directions side by side and polish from real screenshots, without mini program output |
| Hallmark | no | 41,678 | a design skill against templated interfaces: pages, audit and redesign without measured comparison to a mockup |
| AI Website Cloner Template | no | 37,922 | recreates a site from its URL as a Next.js app, whereas draw-ui starts from a mockup built from a description |
README in short
MIT license. The skill is built for interfaces and websites, and ordinary posters, illustrations and storyboards are out of scope. The script tests run with `python3 -m unittest discover -s tests -p 'test_*.py'` and `bash tests/test_ask_draw.sh`.
README badge
Original SKILL.md
--- name: draw-ui description: "设计 App、后台、游戏界面和完整网站落地页，生成 UI 设计稿；按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。" --- # Draw UI Skill 默认追求简洁、现代、有自身风格的 UI；已有品牌、明确主题和用户指定风格优先。视觉质量与业务完整性分别验收，不能用内容齐全、对齐规整替代设计成立。 脚本与资源路径相对于本 Skill 目录，执行前解析为绝对路径。设计说明、图片和运行记录保存到任务目录。浏览器、开发者工具及外部服务沿用当前任务授权；能力不可用时完成可执行部分，并说明未验证项。 ## 确定范围 先从请求、项目和参考图提取以下信息。信息足够就执行；只有缺失信息会改变核心流程时才集中询问，不要求用户先找参考图。 | 判断 | 默认处理 | | --- | --- | | 页面目标 | 用户是谁、要完成什么任务、主要操作与真实内容 | | 页面范围 | 区分组件、单屏、滚动页面和完整落地页；官网或落地页默认从导航到页脚 | | 目标设备 | 分开记录逻辑视口与图片像素；竖向长图不代表手机布局 | | 交付方式 | 只要设计稿就交付图片与实现说明；要求实现时才编写代码 | | 现有约束 | 复用组件、字体和设计规范，保留用户指定的固定区域 | ## 选择执行路径 只读取当前路径需要的资源，沿用已有设计说明，不为相同信息重复建表。 | 路径 | 执行顺序 | | --- | --- | | 新设计或风格探索 | 按 [UI 设计与验收](references/ui-design.md) 确定视觉构思、组织提示词、生成并检查；完整长页再读 [长页生成](references/full-page.md) | | 截图还原或视觉校准 | 先读 [测量与校准](references/calibration.md)，再按目标读取 [现有软件实现](references/software-reconstruction.md) 或 [HTML／小程序实现](references/html-reconstruction.md)；不重新设计已锁定的风格 | | 设计后继续实现 | 检查已生成的设计图，将其作为还原基线，进入上一条路径 | ## 选择参考图策略 先区分借鉴风格与原样还原。风格参考提取业务焦点、字体对比、留白、比例和图像用途，按当前业务重组内容；不要复制无关营销模块或作品展示外框。 | 参考用途 | 使用方式 | | --- | --- | | 自由探索 | 无参考也可执行，从任务选择视觉方向 | | 只保留导航或侧边栏 | 写清固定范围；必要时制作内容区中性的参考副本，保留原图 | | 借鉴风格 | 使用实际参考图，说明借鉴的设计关系与允许变化的内容 | | 精准还原 | 完整截图用于测量与整体对照；只有确需素材重绘时才将相应图片送入生成工具 | 图片输入能力与调用限制见 [生成工具](references/generation.md)。没有实际传入图片时，只能称为文字提炼参考。多屏延展与模型对比按 UI 设计文档处理。 ## 划分组件与素材 在生成或实现前明确边界：布局、文字、控件、普通图标和动态图表由代码实现；摄影、原创插画和特殊品牌视觉使用独立素材。图片放入明确容器，正文、数据标签和操作保持可编辑。