从设计系统到代码落地的全栈助手 - UI/UX Pro Max

专业级 UI/UX 设计智能助手，支持生成完整设计系统、组件规范及可落地代码，适合产品团队快速构建高品质界面

基本信息

• 技能名称?UI/UX Pro Max
• 中文名称?从设计系统到代码落地的全栈助手
• 作者?xobi667
• 分类?专业技能
• 版本?0.1.0
• 标签?ui-design, ux-design, design-system, frontend, react, vue, svelte, tailwind, accessibility, component-library, figma, nextjs

使用方法

使用说明
核心用法
ui-ux-pro-max 是一个全栈式 UI/UX 设计辅助工具，整合设计决策、系统构建与代码实现三大环节。其工作流程分为三步：

1. 需求分诊 ：快速确认平台（Web/iOS/Android/桌面）、技术栈（React/Vue/Svelte/Tailwind 等）、目标（转化/速度/品牌调性/无障碍），以及现有资产（截图/Figma/代码仓库）；
2. 交付物生产 ：根据场景输出 UI 概念+布局、UX 流程图、设计系统（Token+组件规范）或具体代码实现方案；
3. 资产调用 ：内置设计智能数据库（配色、模式、启发式规则）及可选的 Python 脚本生成结构化 Token。
   显著优点
   端到端闭环 ：唯一覆盖"设计决策 → 系统规范 → 代码落地"全链路的 Skill，避免设计与开发断层
   强制具体化 ：要求命名组件、定义状态、标注间距/字体/交互细节，减少模糊沟通
   无障碍内置 ：默认覆盖 WCAG AA、键盘导航、焦点状态、对比度检查
   零依赖安全 ：纯本地 Python 标准库实现，无第三方包，供应链攻击面为零
   四合一交付能力 ：用户说"全部都要"时可按设计→UX→代码→系统顺序完整交付
   潜在缺点/局限
   无实时协作 ：不支持多人在线编辑或 Figma 实时同步，输出为静态文档或代码
   设计智能依赖本地 CSV ： assets/data/ 内的模板数据需手动更新，无法自动获取最新设计趋势
   脚本功能有限 ： design_system.py 仅生成 ASCII 友好 Token，复杂视觉系统仍需人工调整
   品牌深度受限 ：缺乏企业品牌资产（Logo、定制字体、VI 手册）的深度整合能力
   前端框架偏 Web ：移动端原生（SwiftUI、Jetpack Compose）的代码示例相对薄弱
   适合人群
   独立开发者/全栈工程师 ：需快速产出专业级界面而无专职设计师
   初创产品团队 ：MVP 阶段需建立一致的设计规范与组件库
   设计系统负责人 ：需生成 Token 文档、组件状态表及无障碍检查清单
   前端工程师接设计稿 ：需将 UX 建议转化为精确的文件级代码修改
   常规风险
   文件写入路径需确认： --persist 模式创建 design-system/ 目录，敏感目录使用前建议验证
   输出为建议性质：生成的配色、布局需结合真实用户测试验证，不宜直接生产上线
   无障碍检查非认证级：内置 WCAG 指导为启发式建议，正式产品仍需专业审计工具复核