Draw UI
设计 App、后台、游戏界面和完整网站落地页,生成 UI 设计稿;按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。
Install
npx skills add oil-oil/draw-ui --skill draw-uigit clone --depth 1 https://github.com/oil-oil/draw-ui.git /tmp/draw-ui
mkdir -p ~/.claude/skills
cp -r /tmp/draw-ui/. ~/.claude/skills/draw-uiPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# 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 设计文档处理。 ## 划分组件与素材 在生成或实现前明确边界:布局、文字、控件、普通图标和动态图表由代码实现;摄影、原创插画和特殊品牌视觉使用独立素材。图片放入明确容器,正文、数据标签和操作保持可编辑。 优先复用质量足够的原始素材、项目资源和干净裁图。缺失或不合格时才生成或重绘,不默认重画品牌标识。需要处理素材时读取 [参考素材与透明度验收](references/reference-assets.md),确定尺寸、裁切、背景和验收方法。 ## 选择生成工具
Details
- Skill name
draw-ui- Repository
- oil-oil/draw-ui
- Repo updated
- 4 October 2026
FAQ
What does the Draw UI skill do?
设计 App、后台、游戏界面和完整网站落地页,生成 UI 设计稿;按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。
How do I install the Draw UI skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add oil-oil/draw-ui --skill draw-ui. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Draw UI popular?
It lives in oil-oil/draw-ui, which has 524 GitHub stars and 77 forks.
Related skills
Product Launch Motion
398AbubakrChan/product-launch-motion
Use when asked to make a launch video, product film, motion design piece, UI motion reel, Dribbble-style UI animation or animated brand/logo sting — anything rendered to MP4 from HTML with a cursor, morphing UI, springs, beat-synced music and SFX. Carries Chan's full creative direction (one shape never cut, blur content swaps, springs, real data, logo slams, no creative limits) and the proven build/render pipeline (pure seek(t), closed-form springs, Playwright subframes, ffmpeg tmix, numpy beat grid).
SVG Diagram
640bybit-exchange/svg-diagram
SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.
D3 Viz
251chrisvoncsefalvay/claude-d3js-skill
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
Spine Animation
616GenielabsOpenSource/spine-animation-ai
Create Spine 2D skeletal animations from pre-existing character assets (separated body-part PNGs, atlas spritesheet, or a full character image). Use this skill whenever the user wants to animate a 2D character, create Spine JSON from existing art assets, rig a character with bones, build walk/idle/run/attack animations, produce an interactive Spine Web Player preview, or generate Spine-compatible export files (.json + .atlas + .png). Also trigger when the user mentions "Spine animation", "2D rigging", "skeletal animation", "bone animation", "cutout animation", "animate this character", "make t
React Email
208resend/resend-skills
Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.
Qiaomu Design
666joeseesun/qiaomu-design
为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA, 也创作与修改微信公众号封面、B站封面、YouTube 缩略图、小绿书配图和小红书封面,按平台检查裁切与可读性。 在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统、参考某种风格, 或创作公众号封面、设计公号头图、修改微信文章封面、制作 B站封面、YouTube 封面、小绿书配图、小红书配图时使用; 不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行, 只有用户在当前任务明确点名 K3 时才调用外部模型。
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.