用途:把 Figma 设计属性与结构翻译为 IDS(Iress Design System)组件实现,供 AI 代理读取 Figma 设计元数据(如 Figma MCP 或导出的设计规格)并生成 IDS 代码。
主要能力:分析 Figma 结构(frame、auto-layout、组件实例),把 Figma 组件名称/变体映射到 IDS 组件,将设计值转换为 IDS 设计令牌,并生成简洁的 React/TypeScript 代码与正确的 IDS 导入;同时检查导入、令牌、响应式与常见反模式。
使用方式:需 Figma MCP 服务器读取文件;没有时可手动粘贴导出的设计规格或组件描述。配置需在 Figma 创建具有 File content(只读)权限的个人访问令牌,然后按工具在对应配置文件(如 Kiro CLI 的 ~/.kiro/settings/mcp.json、Cursor 的 .cursor/mcp.json、Claude 的 .claude/mcp.json、VS Code 的 .vscode/mcp.json)中注册 MCP 服务器。IDS v6 为 beta,安装命令:npm install @iress-oss/ids-components@beta;如需直接使用 token,另加 npm install @iress-oss/ids-tokens@beta。
适用场景与限制:适用于将 Figma 登录表单、提示横幅、状态弹窗、数据表格等界面翻译为 IDS 组件。应尽量少嵌套组件,避免用原始 HTML 替代 IDS 组件,不重建组件内部样式;间距按像素除以 4 映射为 token;优先使用语义属性。资料未提供收费、价格等信息。