draw-ui
一个专注于UI设计稿生成与网页还原的AI绘图技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：draw-ui。 它的用途是：一个专注于UI设计稿生成与网页还原的AI绘图技能 完整的 Skill 内容见：https://321skill.com/skills/draw-ui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“设计一个数据分析工具的数据概览页，风格偏向Notion的简洁专注感。” AI会先询问页面核心功能、是否有参考图等关键信息，然后生成相应的UI设计稿。或者说：“帮我把这张截图里的登录页还原成HTML。” AI会启动设计稿还原流程，输出结构化的代码与处理好的视觉素材。
介绍
Draw UI Skill 是一个强大的AI助手，专门解决产品经理、设计师和前端开发者在创意构思和落地实现之间的断层问题。它能够根据你的文字描述，快速生成高质量的UI设计稿或落地页原型，极大地缩短了从想法到可视化的过程。
使用方式非常灵活：当你需要创意探索时，可以直接描述页面功能，AI会自由发挥；当你需要与现有产品风格保持一致时，可以上传截图作为参考图，AI会精准模仿导航栏、侧边栏等固定区域的视觉风格。它还内置了从设计稿到HTML/CSS的还原工作流，帮助前端工程师将视觉稿高效转化为代码。
这个技能特别适合产品经理快速验证想法、UI设计师寻找灵感、以及独立开发者或创业团队在资源有限的情况下快速产出可演示的界面原型。它降低了专业UI设计的门槛，让非设计师也能产出像样的设计稿。
与市面上通用的AI生图工具不同，Draw UI Skill 经过专门优化，深谙UI设计的核心逻辑。它不鼓励用户过度指定像素和布局（这反而会限制AI创意），而是通过“类比法”和“清单法”等经过验证的提示词构建方法，引导AI产出既美观又符合功能逻辑的界面。其独特的“纯净边框图”策略，能巧妙平衡风格统一与内容创新之间的矛盾。
核心特点
核心区别在于其专为UI设计优化的提示词工程与工作流：1) 强调通过“类比法”和“清单法”构建提示词，而非描述具体布局，能激发AI更好的设计感；2) 独创“纯净边框图”参考策略，能精准锁定导航等固定区域风格，同时释放内容区的创意空间，解决了通用图生图工具在UI场景下风格与内容难以兼顾的痛点。
注意事项
不适合需要高度精确控制每个像素位置、或完全复刻已有复杂设计稿中所有视觉细节的场景。
常见问题
如何让AI生成的多个页面风格保持一致？
使用“纯净边框图”作为参考图，并采用串行方式（一张完成后再生成下一张）依次生成。
能把我的App截图直接变成代码吗？
可以，但最佳实践是：先让AI参考截图生成优化后的设计稿，再基于新稿还原HTML/CSS，复杂视觉元素会单独处理为素材。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/draw-ui/raw/index.md 读取 draw-ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/draw-ui/raw/index.md（查看排版版本）