Figma Mobile

将 Figma 设计稿转为移动端 UI 代码（Android Jetpack Compose / XML，iOS SwiftUI / UIKit）。 在用户粘贴 Figma 链接并希望生成布局代码时使用。 通过 Figma REST API 提取设计树与 token，必要时追问澄清，再输出可落地的工程代码。

Security Scan

The skill's declared requirements and scripts match its Figma→mobile-code purpose, but the runtime instructions explicitly encourage asking users to paste their FIGMA_TOKEN into the chat and writing it into .env, which creates a clear credential-exfiltration risk and is disproportionate to the task.

Purpose & Capability

Name/description, required binary (node), and the single required env var (FIGMA_TOKEN) align with a tool that calls the Figma REST API and generates mobile UI code. Included scripts (figma-fetch, project-scan, feedback-analyze) are coherent with the stated functionality.

Instruction Scope

SKILL.md instructs interactive fetch/analysis and local file generation (expected), but also tells the agent to ask the user to paste the Personal Access Token into the conversation and then persist it into a project .env file. Asking users to paste secrets in chat and capturing them in logs or files is outside the necessary scope and raises data-leakage risk.

Install Mechanism

No external install/downloads are declared; the skill is instruction-first with bundled Node scripts and no third-party npm dependencies. That is proportionate and low-risk compared to remote downloads or unknown installers.

Credentials

Only FIGMA_TOKEN is requested (appropriate for calling Figma API). However, the skill's documented guidance to solicit the token in-chat and write it into a project .env is disproportionate and unsafe: the requested method of obtaining the secret (via conversation) is not justified by the functionality and may lead to accidental exposure.

Persistence & Privilege

always:false and normal autonomous invocation are fine. The skill does write/modify project files (feedback-log.md, .env per guidance) and can run scans against a provided project path — these behaviors are consistent with generating code but mean the skill will create and modify files in the project root. This is expected but worth confirming with the user before running.

What to consider before installing

This skill appears to be what it says (Figma → mobile UI code) and only needs a Figma Personal Access Token. However: do not paste your FIGMA_TOKEN into the chat. The SKILL.md explicitly tells the agent to ask for the token in conversation and save it to .env — that practice risks exposing your token in chat logs. Prefer one of these safer options: 1) set FIGMA_TOKEN as an environment variable or in a secure agent/secret store (not in chat), 2) inspect the included scripts (scripts/src/load-env.js and scripts/src/figma-fetch.js) yourself before running to confirm they only call api.figma.com and do not exfiltrate data elsewhere, 3) run the scripts locally on a machine you control rather than giving the token to a remote agent, 4) create a scoped/temporary Figma token you can revoke after use. If you decide to proceed, avoid providing secrets via chat and rotate any token that may have been shared.

Figma 转移动端

用交互式澄清流程，把 Figma 设计转为移动端 UI 代码。

支持：Android Compose、Android XML、iOS SwiftUI、iOS UIKit。

环境要求

• 环境变量 FIGMA_TOKEN（Figma → 头像 → Settings → Security → Personal Access Tokens）
• Node.js 18+（内置 fetch；脚本为纯 JavaScript，无需 npm install）
• 脚本入口：在 scripts/ 下执行 node src/figma-fetch.js，或 npm run figma-fetch --（package.json 仅用于声明 type: module 与 npm 脚本快捷方式，无第三方依赖）

触发与输入

用户粘贴 Figma 设计链接 时启用本技能。

用户也可能在链接旁给出 内联提示，例如：

• 目标平台：「Android XML」「Compose」「SwiftUI」「UIKit」
• 布局偏好：「用 ConstraintLayout」「优先 StackView」
• 组件说明：「开关用我们的 CompactSwitch」「这块是动态列表」

若用户已通过内联说明回答某类问题，则不要再问同类问题。 例如用户已写「Android XML，三张卡是 RecyclerView 列表」，则不要再问输出格式或列表动静态。

工作流

步骤 1：拉取与分析

用户提供 Figma 链接后：

1. 在技能根目录进入 scripts/，运行： node src/figma-fetch.js "<url>" [--json] [--depth N] 若用户提供 多个链接（同一页不同状态），使用 --compare 拉取并对比差异，便于多状态代码（selector、条件样式等）： node src/figma-fetch.js --compare "<url1>" "<url2>" [--json]
2. 分析结构：区块、重复模式、组件类型
3. 关注 INSTANCE 节点（组件实例），结合 variantProperties 理解状态（如 State=Default）
4. 复杂渐变/阴影在总结中向用户点明
5. 生成代码前遵守 references/figma-interpretation.md 中的节点语义规则

详细解读规则：阅读 references/figma-interpretation.md

步骤 1.5：结构摘要

在提问之前，先用 2～3 行 向用户确认你理解的结构，例如：

我看到：顶部导航（返回 + 标题）→ 两大块内容（用户资料卡、设置列表约 8 项）→ 底部主按钮。约 25 个节点。

需覆盖：主要区域、重复模式（如「8 个相似列表项」）、显眼元素（渐变、插画、叠卡）。

若用户纠正结构，先修正理解再进入步骤 2。

结构非常简单时（如单卡片 + 少量输入框）可跳过本步。

步骤 2：确认与追问

问题顺序（严格先问靠前的）：

1. 输出形态（除非用户已说明，否则必须先问） → Android XML / Compose / SwiftUI / UIKit
   决定后续分析与代码风格。

2. 结构歧义（只问真正不确定的） → 「这几项看起来相似——动态列表还是写死布局？」 → 「这块是整图资源还是图标+背景组合？」

3. 组件选型（仅在与平台相关时） → 「是否有指定自定义组件？没有则使用系统默认。」

追问规则：

• 用户已在提示里回答的项一律跳过
• 总共 最多 3～5 个问题，越少越好
• 每个问题给具体选项 + 一句利弊，并保留「或详细说说你的需求」
• 自然语言表述，不要甩原始 JSON
• 若上下文已足够且结构简单，可跳过步骤 2 直接进入步骤 3

何时追问 vs 直接生成：

• 同级下 ≥3 个结构相似子节点 → 可能是列表 → 应追问动静态
• 共享 componentId 的 INSTANCE → 复用组件 → 可说明并给默认实现
• 层次单一、无歧义 → 高置信度 → 可不问直接生成
• 设计中有渐变/重阴影 → 在摘要中说明处理方式

步骤 2.5：工程扫描（可选，建议）

若本地能访问目标工程，可运行扫描以复用颜色、字符串等资源：

cd scripts
node src/project-scan.js /path/to/project --json --output scan-report.json

如何在生成代码时使用扫描结果：阅读 references/figma-scan-usage.md

步骤 3：生成代码

用户确认后（或无需追问时）生成代码文件。

详细生成规则：阅读 references/code-generation.md

多文件时每个文件用清晰标题标出，例如：

📄 activity_notification_settings.xml
[代码]

📄 item_expert_notification.xml
[代码]

步骤 4：迭代与反馈记录

展示代码后简短询问：

是否贴合设计？需要调整的地方？

用户可能继续迭代：间距、替换组件、删区块、换平台、改色值等。

除非用户要求整页重写，否则每轮只改变化部分。

反馈记录（建议自动执行）：
每当用户纠正生成结果，在项目根目录维护 feedback-log.md（不存在则创建）。每条格式：

## YYYY-MM-DD HH:MM
- **Platform**: Android XML / Compose / SwiftUI / UIKit
- **Figma node type**: （如：带图标的 FRAME、Tab 栏、按钮组）
- **Issue**: 问题简述
- **Before**: 原先生成内容（片段或说明）
- **After**: 用户期望（片段或说明）
- **Rule candidate**: （可选）可沉淀为通用规则的说明

记录应 简洁、可分类、偏映射错误；不要记录纯个人偏好或一次性命名。

可在适当时机或应用户要求运行：

cd scripts
node src/feedback-analyze.js [path/to/feedback-log.md]

用于汇总模式与规则候选（默认读取当前目录下的 feedback-log.md）。

矢量与 SVG

需从 Figma 导出 SVG 时（见 references/code-generation.md）：

cd scripts
node src/figma-fetch.js "<url>" --export-svg [--nodes "节点id1,节点id2"]

简化后的 JSON 中每个节点含 id 字段，可用于 --nodes 附加导出。

异常处理

• FIGMA_TOKEN 未设置（脚本打印 FIGMA_TOKEN_NOT_SET）→ 不要让用户自行敲复杂命令。应：

  1. 说明需要 Figma Personal Access Token
  2. 指引：Figma → 头像 → Settings → Security → Personal Access Tokens
  3. 请用户在对话中粘贴 token（通常以 figd_ 开头）
  4. 将 token 写入项目根目录 .env：FIGMA_TOKEN=figd_xxx（脚本会自动读取 .env）
  5. 再次执行 node src/figma-fetch.js 或 npm run figma-fetch --

• Token 无效（401/403）→ 可能过期或撤销，请用户重新生成并更新 .env

• 链接无效 → 给出正确示例：https://www.figma.com/design/<fileKey>/<name>?node-id=<id>

• API 其它错误 → 展示错误信息，提示检查网络/代理

• 子节点过多（>200） → 脚本会在 JSON 中标注 _largeChildList，建议缩小选区 Frame

• 深度截断 → 脚本会将 _truncated 标在节点上，必要时提高 --depth（最高可自动提升到 15 层对比模式）

参考文档说明

references/ 下文档按 命名约定 区分用途（见 README.md「目录与命名」）：figma-* 为 Figma 语义与扫描用法，platform-* 为各平台映射表，code-generation.md 为生成总则。正文为 中文，代码与 API 标识保留英文原名；工作流以本 SKILL.md 为准。