Figma MCP Skill

IDS Figma（Cursor 技能入口）

何时使用

在通过 Figma MCP 生成或修改设计稿、且需符合 IDS 与业务配置时启用本技能。不适用：Figma 插件、Figma Make / Stitch 等内置 AI 设计工具。

Quick Start Card | 快速启动

Read this before loading any other file.

Core Rules (always apply)

1. 100% token coverage — no bare hex values, raw font sizes, or unitless shadows anywhere
2. Standard controls from IDS UI Kit — never hand-draw Button / Input / Select / Table / Modal / Tag / Checkbox / Radio / Switch / Tabs / Pagination
3. One screen per generation by default — additional screens/states only when explicitly requested

Most-Used Tokens

Modes (always confirm before generating)

• Guided Mode — Product with a business config (Space / DataSuite / Ask / Smart). Apply its Design Language + use Biz Components where they naturally fit. Layout decisions are creative and open.
• Open Mode — No product config, or the user wants IDS foundation only. Full creative freedom; IDS tokens + base components as the floor.

Always ask one question: "Guided Mode ([product]) or Open Mode?" — Never auto-enter either mode.

Forbidden Patterns | 绝对禁止

These are hard stops — violating any of these immediately invalidates the delivery:

• ❌ Bare hex values, raw font sizes, or unitless shadows — always use IDS tokens
• ❌ Hand-drawing Button / Input / Select / Table / Modal / Tag / Checkbox / Radio / Switch / Tabs / Pagination
• ❌ External icon libraries (Material, Heroicons, Feather, etc.) — IDS icons only, 12/16/20/24px
• ❌ Lorem ipsum or placeholder text — real product copy only
• ❌ Chinese characters in any UI element or layer name
• ❌ Detaching IDS components unless the user explicitly says "detach"
• ❌ Using underscore-prefixed components (_ComponentName) — internal base only
• ❌ Creating Figma files outside SHOPEE SINGAPORE PRIVATE LIMITED organization
• ❌ Writing into the IDS design system file (zANozorPV3t5sueU20e0Nx) — read-only library
• ❌ Generating more than one screen without explicit user confirmation
• ❌ Skipping Phase 1 structure preview (except for small targeted edits the user specifies)

第一步：读完整规范

必须先阅读同目录下的 figma-ids-design.md（完整工作流程：Pre-flight、模式确认、生成步骤、编辑流程、交付）。

输入类型处理 | Input Detection

自动检测用户提供的输入类型，无需询问——直接选择对应处理方式：

本目录资产（相对路径）

MCP 与 Cursor

1. 配置 Figma MCP（Personal Access Token，读写权限）。具体写法见 README.md；Cursor 侧以编辑器 MCP 文档为准。
2. 调用 MCP 工具前查看当前环境提供的工具 schema（参数名以实际 MCP 为准）。
3. Figma REST 调用（如刷新 tokens）以 figma-ids-design.md 中的命令为准；MCP 优先，REST 补全。

Common Patterns | 常见请求模板

For frequent request types, use the matching Phase 1 skeleton directly — no need to invent structure from scratch.

列表 / 数据管理页 (List & Data Management)

Trigger: "create a [X] management page", "list of [resources]", "data table for [entity]"

Proposed structure — [Page Name]:

Layout:  Page Header → Filter Bar → Table → Pagination
         (Consult business config for frame nesting and spacing rules)
Key components:
  - IDS Table with [N] columns: [col names]
  - IDS Input + Select for filters
  - IDS Button (Primary) for main action
  - IDS Pagination at bottom

States this pass: Default populated view

表单 / 配置页 (Form & Settings)

Trigger: "create / edit form", "settings page", "configuration panel"

Proposed structure — [Page Name]:

Layout:  Page Header → Form Sections (grouped by topic) → Footer Actions (Save / Cancel)
         (Consult business config for frame nesting and spacing rules)
Key components:
  - IDS Input, Select, Switch, Radio for fields
  - IDS Button (Primary + Default) for footer
  - Section dividers with Heading/4 labels

States this pass: Empty form (default) + Validation error state

Dashboard / 概览页 (Dashboard)

Trigger: "dashboard", "overview page", "home page", "summary"

Proposed structure — [Page Name]:

Layout:  Page Header → Stats Row (3-4 metric cards) → [Chart Zone / Activity Feed / Detail Panel]
         (Consult business config for frame nesting and spacing rules)
Key components:
  - IDS Card for metric tiles
  - Chart placeholder frames (annotated with chart type)
  - IDS Table or List for activity/detail

States this pass: Populated view

空状态 / 引导页 (Empty State / Onboarding)

Trigger: "empty state", "zero state", "onboarding", "getting started"

Proposed structure — [Page Name]:

Layout:  Centered zone — Illustration placeholder → Headline → Body copy → CTA button
Key components:
  - IDS Button (Primary) for main CTA
  - IDS Button (Default) for secondary action (optional)

States this pass: Empty state only

在已有页面添加元素 (Add to Existing)

Trigger: user provides a Figma URL + "add [X]", "insert [X]", "put [X] in"

Skip Phase 1 structure preview. Go directly to Edit flow (E1 → E2 → E3 in figma-ids-design.md): read the existing file → identify the target location → add only the requested element.

执行顺序（摘要）

完整步骤以 figma-ids-design.md 为准；此处仅作快速索引：

1. Pre-flight：从 Quick Start 卡读 Token，按需搜索 components-index.json，询问 Product / IDS 模式。
2. 生成：Phase 1 先以文字/ASCII 描述结构，等用户确认；Phase 2 再执行 MCP 操作，按需读取 specs 文件。
3. 设计说明（多页面项目）：全部页面完成后，主动询问是否在 Figma 中生成 Design Rationale 页——记录产品背景、设计决策与用户旅程（见 Phase 2.9）。
4. 交付：运行 specs/delivery-checklist.md 自检，输出结构化摘要与 Next Steps。

更新本技能内容

git -C ~/.cursor/skills/figma-mcp-skill pull

上游仓库：https://github.com/Vanessa723/figma-mcp-skill