zhu-guli326/image2_UI_skill

解决的问题

解决将静态 UI 参考、设计草图或文本描述转换为完全功能、可交互且可编辑的用户界面的问题。与仅生成 UI 平面图像的工具不同，该项目将结构元素（代码和组件）与视觉资产（图像）分离，确保最终输出是一个真正的前端项目，而非原型图。

如何工作

该工具以三种主要模式运行：从截图或设计文件中重建现有 UI，将参考内容重新设计以符合特定产品的品牌风格，或从文本描述创建全新的界面。它利用名为 "image2" 的系统生成高质量的视觉资产（如人物、产品或插图），同时使用标准设计系统（如 iOS、Material、Ant Design 或 shadcn/Radix）处理结构组件、导航和布局。

适用人群

该工具专为需要快速原型化可点击界面、复制现有应用布局、构建着陆页或仪表板，或为电商、社交及工具类产品生成高保真 UI 原型的开发者和设计师设计。

主要亮点

• 代码化输出：提供可编辑的 HTML 和前端项目，可与真实数据集成。
• 混合生成：将真实代码用于 UI 结构，AI 生成视觉资产用于图像内容。
• 设计系统集成：优先复用现有库中的组件和图标，以保持一致性。
• 设备特定细节：处理移动设备特有的元素，如安全区域、动态岛屿和状态栏。
• 高级布局支持：支持复杂的视觉构图，包括裁切主体、分层元素和编辑风格布局。