Draw UI Skill
默认追求简洁、现代、有自身风格的 UI；已有品牌、明确主题和用户指定风格优先。视觉质量与业务完整性分别验收，不能用内容齐全、对齐规整替代设计成立。
脚本与资源路径相对于本 Skill 目录，执行前解析为绝对路径。设计说明、图片和运行记录保存到任务目录。浏览器、开发者工具及外部服务沿用当前任务授权；能力不可用时完成可执行部分，并说明未验证项。
确定范围
先从请求、项目和参考图提取以下信息。信息足够就执行；只有缺失信息会改变核心流程时才集中询问，不要求用户先找参考图。
| 判断 | 默认处理 |
|---|---|
| 页面目标 | 用户是谁、要完成什么任务、主要操作与真实内容 |
| 页面范围 | 区分组件、单屏、滚动页面和完整落地页；官网或落地页默认从导航到页脚 |
| 目标设备 | 分开记录逻辑视口与图片像素；竖向长图不代表手机布局 |
| 交付方式 | 只要设计稿就交付图片与实现说明；要求实现时才编写代码 |
| 现有约束 | 复用组件、字体和设计规范，保留用户指定的固定区域 |
选择执行路径
只读取当前路径需要的资源，沿用已有设计说明，不为相同信息重复建表。
| 路径 | 执行顺序 |
|---|---|
| 新设计或风格探索 | 按 UI 设计与验收 确定视觉构思、组织提示词、生成并检查；完整长页再读 长页生成 |
| 截图还原或视觉校准 | 先读 测量与校准，再按目标读取 现有软件实现 或 HTML／小程序实现；不重新设计已锁定的风格 |
| 设计后继续实现 | 检查已生成的设计图，将其作为还原基线，进入上一条路径 |
选择参考图策略
先区分借鉴风格与原样还原。风格参考提取业务焦点、字体对比、留白、比例和图像用途，按当前业务重组内容；不要复制无关营销模块或作品展示外框。
| 参考用途 | 使用方式 |
|---|---|
| 自由探索 | 无参考也可执行，从任务选择视觉方向 |
| 只保留导航或侧边栏 | 写清固定范围；必要时制作内容区中性的参考副本，保留原图 |
| 借鉴风格 | 使用实际参考图，说明借鉴的设计关系与允许变化的内容 |
| 精准还原 | 完整截图用于测量与整体对照；只有确需素材重绘时才将相应图片送入生成工具 |
图片输入能力与调用限制见 生成工具。没有实际传入图片时，只能称为文字提炼参考。多屏延展与模型对比按 UI 设计文档处理。
划分组件与素材
在生成或实现前明确边界：布局、文字、控件、普通图标和动态图表由代码实现；摄影、原创插画和特殊品牌视觉使用独立素材。图片放入明确容器，正文、数据标签和操作保持可编辑。
优先复用质量足够的原始素材、项目资源和干净裁图。缺失或不合格时才生成或重绘，不默认重画品牌标识。需要处理素材时读取 参考素材与透明度验收，确定尺寸、裁切、背景和验收方法。
选择生成工具
用户指定模型、服务或生成 Skill 时沿用其能力与调用规则；未指定时优先宿主内置生图工具。固定保存路径通过生成后复制解决，不能据此切换服务。只有用户选择脚本服务时才读取 生成工具 的脚本接口；没有可用工具时说明缺少的能力，不擅自改用收费服务。
需要外部服务凭据时读取 API Key 配置与业务读取，复用已有安全配置；本机缺少 Key 时使用随附页面，保存后通过业务包装入口读取。内置能力与纯本地流程不要求配置 Key。
检查与交付
生成后实际打开图片，在目标逻辑视口尺度按 UI 设计文档检查；实现后按校准流程检查真实页面与操作。未通过时定位内容、布局或素材问题，修正明确偏差，并对照上一版确认收益与损失。
交付图片或可运行文件、简短实现说明和未验证项。完整长页提供整张预览，分段生成时附分段原图。只完成生图称“设计稿”，不声称已通过交互验证；素材说明区分原始复用、截图裁切、生成与后处理。