oil-oil/draw-ui

解决的问题

draw-ui 为 AI 代理提供了一种专门的 UI 设计技能，弥合了抽象页面需求与具体视觉设计或功能代码之间的差距。通过强制执行需求确认和基于参考的生成流程，解决了 AI 生成界面过于通用或与业务需求视觉脱节的问题。

工作原理

该工具以两种主要模式运行：

1. 设计生成：将文本需求转换为 UI 设计草图。代理首先确认页面的核心功能、可用的参考截图以及固定区域（如导航栏）。采用两种提示策略："类比"用于提供创意方向，"清单"用于确保精确的业务数据。可使用参考图像保持风格一致性，或锁定特定布局框架。
2. 代码重构：将设计草图或截图转换为可运行的 HTML/CSS 或微信小程序页面。将布局（由代码处理）与复杂视觉资产（由图像生成/提取处理）分离，然后迭代比较生成的页面与原始设计，以优化输出结果。

适用人群

• 希望自动化创建 UI 原型或原型的 AI 代理用户。
• 希望快速将设计截图转换为功能前端代码（HTML/CSS 或微信小程序）的 开发者。
• 需要利用 AI 快速探索不同 UI 方向的 产品设计师。

核心亮点

• 参考驱动设计：支持「框架锁定」，在重新生成内容区域时保持导航栏/侧边栏的一致性。
• 多平台输出：可生成标准网页代码（HTML/CSS）和微信小程序专用代码（WXML/WXSS）。
• 资产分离：智能地将页面拆分为由 CSS 驱动的布局和独立的图像资产，避免文字模糊或伪影。
• 迭代优化：采用截图对比工作流，确保最终代码与原始设计像素完全匹配。