SuperAPI AI 工具集

design-soul-saas

设计与创作

查看项目

更新于 10-16 06:05

技能介绍

用途

Design Soul — SaaS Dashboard Edition 用于从 SaaS 仪表盘、管理后台、内部工具、设置界面、数据密集型应用、分析平台、CRM 界面、开发者工具或 B2B 产品的代码库中,提取完整的视觉 DNA。它产出像素级的设计文档,目标是让从未见过原始代码库的开发者仅凭这些文档就能重建完全一致的视觉外观。

该技能不适用于营销网站、落地页、电商店面、博客或作品集网站,因为这些类型的设计 DNA 与仪表盘有本质区别。

主要能力

该技能通过六个阶段执行提取:

  1. 发现阶段:映射代码库架构,识别组件库位置、样式系统、组件库类型、CSS/主题文件位置、仪表盘专属代码位置以及导航结构。统计 UI 文件数量并规划执行策略。

  2. 基础提取阶段:提取不可见的系统——令牌、比例和策略。通过频率统计发现实际使用的间距、颜色、排版、阴影、圆角、动画等值。产出 system.md 和七份基础文档(间距比例、颜色令牌、排版比例、阴影深度、圆角比例、动画系统、焦点与状态)。

  3. 组件提取阶段:为每个可复用组件创建完整的视觉规格文档,包含 CSS 重建块。组件按类别组织:控件、容器、导航、覆盖层、反馈、数据展示和应用专属组件。交互组件需要记录状态机流转。

  4. 仪表盘专属模式阶段:提取该产品独有的模式,如仪表盘布局、指标展示、数据表格、设置页面、引导流程、搜索/命令面板、多租户、加载模式等。

  5. 验证阶段:检查完整性、交叉引用一致性,并进行最终测试——开发者能否仅凭文档重建像素级版本。

  6. 总结报告阶段:产出 _summary.md 和 INDEX.md 两个元文件。

使用方式

该技能通过 skills.sh 平台以技能形式提供,安装和使用方式暂未提供。用户可请求不同范围的提取:

  • "提取全部" / "完整设计系统" / "完整视觉 DNA":产出 system.md + 所有基础文档 + 所有组件文档(含 CSS 重建)
  • "提取按钮和卡片" / 特定组件:产出 system.md(精简版)+ 每个指定组件的详细文档
  • "仅令牌" / "仅基础" / "设计令牌":产出 system.md + 仅基础文档

适用场景

适用于需要从现有 SaaS 仪表盘代码库中提取设计系统、创建设计文档、进行设计审计或为重建视觉外观提供规格说明的场景。支持 Tailwind、CSS modules、styled-components、CSS-in-JS、纯 CSS、MUI、Ant Design、Chakra 等多种技术栈。

限制

该技能不适用于营销网站、落地页、电商店面、博客或作品集网站。输出目录为 .design-soul/。具体安装命令、收费信息、价格、平台支持细节暂未提供。