SuperAPI AI 工具集

create-design-system-rules

设计与创作

查看项目

更新于 10-15 21:41

技能介绍

用途:该技能为项目生成定制化的设计系统规则,把代码库中“未写明的知识”编码为项目级指令,让 AI 编码代理在实现 Figma 设计时自动遵循团队约定、组件模式与架构决策,减少重复提示并保证输出一致。

主要能力:生成组件组织、样式方案、设计令牌、资源处理、Figma MCP 集成流程等规则;支持将规则保存到不同代理的规则文件:Claude Code 用 CLAUDE.md,Codex CLI 用 AGENTS.md,Cursor 用 .cursor/rules/figma-design-system.mdc(含 YAML frontmatter)。

使用方式:先确认 Figma MCP 服务器已连接且工具可用;调用 create_design_system_rules 工具,参数 clientLanguages(如 "typescript,javascript")与 clientFrameworks(如 "react"、"vue"、"svelte"、"angular"、"unknown");再分析代码库的组件位置、样式方案、令牌定义、命名与架构模式;按模板生成规则并保存到对应规则文件;最后用简单组件验证并迭代。

适用场景:新项目接入 Figma 设计、为已有项目引入 AI 代理、统一团队 Figma 转代码流程、更新设计系统约定。

限制:需 Figma MCP 服务器连接与代码库访问权限;Codex CLI 的 AGENTS.md 有 32 KiB 合并大小限制;规则需具体可执行,过多规则会增加延迟;资料未提供收费、价格与平台信息。