（2873期）Ui Design Optimizer – 从数据到代码，一键生成可用界面

从数据到代码，一键生成可用界面 基于本地数据集生成可落地的 UI 设计规范与代码，支持从设计系统到实现文件的完整输出。 使用说明 核心用法 UI Design Optimizer 是一款面向开发者和设计师的实用技能，旨在将抽象的设计需求转化为具体的、可执行的 UI 输出。与仅提供通用设计建议的工具不同，该技能通过读取本地化的样式、色彩、排版和模式数据集，生成包含布局模式、颜色令牌、排版令牌和交互规则的紧凑设计规范。 标准工作流程： 从 data/styles.csv、data/colors.csv、data/typography.csv 等数据源读取相关行 根据产品类型（SaaS 仪表板、招聘工具、美容 SPA 等）和页面类型（落地页或仪表板），选择一套风格、配色和字体组合并说明理由 输出设计规范文档 如用户要求实现，生成可运行的 index.html + styles.css 文件 返回证据，包括文件路径和所选数据集的行/标识 显著优点 实用性优先：输出的是"可构建的 UI"而非泛泛的设计建议，直接产出代码文件 数据驱动决策：基于本地 CSV/JSON 数据集进行风格选择，确保设计决策有据可查 无障碍合规：强制遵循 WCAG AA 对比度标准，优先考虑可读性 一致性保障：通过统一的间距、字号比例和组件状态管理，确保设计系统内部协调 验证机制：内置文件存在性检查、样式表引用验证和设计令牌一致性核对 潜在缺点与局限性 数据源依赖：严重依赖本地 data/ 目录中的 CSV/JSON 文件，若数据集不全或质量不佳，输出质量受限 技术栈限制：默认输出 HTML/CSS，对于 React/Vue 等现代框架需要额外转换 创意天花板：基于预设数据集的组合选择，可能限制高度定制化或创新性的设计探索 无实时预览：生成的文件需手动打开浏览器查看，缺乏内置预览功能 PowerShell 依赖：scripts/search.ps1 辅助脚本需要 Windows PowerShell 环境，跨平台兼容性存疑 适合人群 需要快速启动项目的前端开发者 缺乏专业设计资源的小团队或个人开发者 希望建立统一设计系统的初创公司 需要为演示或 MVP 快速生成界面的产品经理 常规风险 数据集维护成本：需要持续更新本地数据集以保持设计趋势相关性 过度依赖风险：可能限制设计师发挥，形成"数据集内循环" 路径硬编码：生成的文件引用使用相对路径，在项目结构变更时可能失效 编码问题：虽然要求 UTF-8 清洁输出，但多语言内容仍可能出现编码问题 安全边界模糊：技能简介生成报告中明确说明"未执行安全扫描"，实际部署前需额外安全审查 原始说明 Generate practical UI design systems and starter pages using local style/color/typography datasets. Use for landing page or dashboard UI planning and impleme...