SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场product-design

product-design

设计与创作

查看项目

更新于 10-25 16:17

技能介绍

Product Design Skill 是一个用于自动化设计交接的 AI 技能，核心目标是将 Figma 设计稿到代码的实现过程标准化和自动化，减少手动沟通成本。它通过设计系统智能，提取设计令牌、映射组件、检测设计漂移，并生成实施计划。根据资料，该技能可将设计交接时间从 6-10 小时大幅缩短（描述中称 5 分钟，正文中为 15-20 分钟，95% 减少）。

用途

该技能主要用于设计评审和设计交接场景。当用户提出“评审这个设计”、“分析 Figma 原型”、“为某功能做设计交接”、“检查设计系统影响”、“规划设计实现”、“从 Figma 提取令牌”或“设计有什么变化”等请求时，会自动触发。它帮助团队在设计和开发之间建立高效的协作流程，确保设计系统的一致性和代码实现的准确性。

主要能力

技能提供了一套五步工作流：

  1. 设计分析：从 Figma 提取设计模式、组件和令牌。支持通过 Figma MCP 自动化获取数据，也支持手动输入设计信息。使用 Python 脚本 design_analyzer.py 进行分析，输出新组件、相似组件、新设计令牌和破坏性变更等结果。
  2. 代码库审计：对比设计稿与代码实现，检测设计漂移。通过 token_extractor.py 提取令牌并转换为 DTCG 格式，component_mapper.py 映射 Figma 组件到代码组件（优先使用 Code Connect，其次模糊匹配），design_system_auditor.py 审计令牌对齐、组件复用机会和未使用令牌等。
  3. 实施规划：生成分阶段的实施任务文档。implementation_planner.py 根据分析结果生成 Navigator 任务文档，包含分阶段实施（令牌→原子→分子→组织）、复杂度评估、验收标准、测试策略和发布计划。同时可创建设计评审报告。
  4. 任务分配：创建任务并分配上下文。如果配置了项目管理工具（如 Linear、GitHub Issues、Jira），可自动创建工单并链接相关文档；否则任务文档作为唯一来源。更新 Navigator 文档索引。
  5. 实施交接：展示结果并获取用户决策。用户可选择立即开始实施、先查看计划或修改计划。实施完成后，建议设置视觉回归测试以确保像素级还原。

此外，技能支持 Figma MCP 集成，可自动检测本地或远程 MCP 服务器，优化令牌使用（通过渐进式细化减少令牌消耗）。还提供 Tailwind CSS 集成，将设计令牌通过 Style Dictionary 转换为 Tailwind @theme 变量，并支持 Figma Auto Layout 到 Tailwind 类的翻译规则。

使用方式

使用前需满足前置条件：安装 Python 依赖（运行 ./setup.sh 或 pip install -r requirements.txt），并确保 Figma Desktop 正在运行且启用 MCP（在 Figma 偏好设置中启用本地 MCP 服务器）。可选增强功能包括 Figma Enterprise 的 Code Connect（自动组件映射）、Tailwind CSS（设计令牌集成）和 Storybook（组件文档和视觉回归）。

快速开始：进入技能目录 cd skills/product-design 并运行 ./setup.sh。详细安装指南参考 INSTALL.md。

工作流协议中，Step 0 会自动检查环境是否就绪；若未安装，则提示运行 setup 或使用手动工作流。Step 1 设计分析可通过 Figma MCP 自动完成（Python 直接连接 Figma MCP，地址为 http://127.0.0.1:3845/mcp），也可手动输入设计信息。后续步骤依次调用相应 Python 脚本，生成分析结果、审计报告和任务文档。最终在 Step 5 向用户展示摘要并等待决策。

适用场景

该技能适用于需要频繁进行设计交接的团队，尤其是使用 Figma 进行设计、使用 React/Vue/Svelte 等前端框架开发的项目。它有助于维护设计系统的一致性，减少设计到代码的偏差，并提升开发效率。典型场景包括：新功能设计评审、设计系统更新、组件库扩展、设计漂移检测等。

限制

  • 自动化 Figma 工作流需要 Figma Desktop 运行并启用 MCP，且需安装 Python 依赖。
  • Figma Enterprise 的 Code Connect 功能为可选，未提供时组件映射依赖模糊匹配。
  • 远程 MCP 服务器功能有限（无 code_connect，需明确 URL）。
  • 大屏幕设计可能产生超过 350k 令牌，需通过 get_metadata 分步获取，并建议设置环境变量 MAX_MCP_OUTPUT_TOKENS=100000。
  • 资料中未提供具体的收费、价格或平台兼容性细节。
  • 技能依赖于项目结构中的 .agent/design-system/ 目录和组件代码库，首次运行会自动创建相关文件。
  • 视觉回归测试为建议项，非强制，需额外设置。