跳到正文
cccskills
免费在 GitHub 公开中文介绍

figma-extract

从Figma文件中提取元素层级、颜色与文字等设计设置,以及标记为可导出的图像素材,并保存为项目文件,供后续转换和实现使用。

原文查看原文说明

Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.

集成工具Figma
AI 评分90分/ 100查看安装方法

适用场景

  • 提取Figma元素结构
  • 收集颜色、文字和间距设置
  • 准备实现所需素材
  • 检查不支持的设计元素

中文介绍

功能

figma-extract从Figma文件中提取元素层级、设计设置和标记为可导出的素材,并保存到项目的figma/目录中。层级写入tree.json,颜色、文字和间距等共用设置写入tokens.json,素材集中放入assets/。文件版本、修改时间等信息也会记录在meta.json中,为后续转换和生成步骤准备数据。

适用场景

在将Figma设计交付实现之前,可以用它整理结构与设置。提取结果还会记录组件引用关系和不支持的元素,便于检查哪些内容尚未完整提取。

使用示例

  • “请从这个Figma文件中提取元素层级和设计设置。”
  • “请保存标记为可导出的素材,并记录不支持的元素。”

注意事项

需要提供Figma文件的链接或node-id,以及Figma OAuth令牌。资料中所述的实现运行于OpenDesign的daemon runner。文件为空或令牌过期时,流程会报错并停止。身份验证失败时,不会根据截图推测文件结构。

本介绍由 AI(OpenAI Codex)根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容,从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么
A良好资料明确说明该技能在Figma迁移开始时提取结构、设置和素材。
步骤具体性步骤、输入输出和示例是否具体
A良好资料具体列明必需输入、输出文件结构、完成条件和错误处理方式。
安全性发送数据、删除文件、执行命令等是否有说明
A良好资料明确说明OAuth令牌传递路径、不存入SQLite及认证失败后重新询问用户。
安装难易度所需工具和 API 密钥是否少且有说明
B部分不足需要Figma OAuth和daemon runner,但未提供运行环境的安装步骤。

总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI(OpenAI Codex)于 2026年10月20日 评估。仅供参考,安装前请同时查看原文。

如果您认为评估有误,请申请复核

请写明哪一项有误以及原因。无需登录。我们会对照 SKILL.md 重新评估,并在此处更新结果。

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

包含的文件(2)

  • SKILL.md2.4 KB
  • open-design.json905 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Figma extract

Spec §10 / §21.3.1: the figma-migration scenario starts with a Figma file URL + an OAuth token. This atom turns that pair into the authoritative on-disk record subsequent stages (token-map, generate, critique) operate on.

Inputs

SourceRequiredNotes
Figma file URL or node-idyesProvide via the figma-oauth GenUI surface or od plugin apply --input fileUrl=…
Figma OAuth tokenyesRouted through oauth-prompt with oauth.route='connector' and connectorId='figma'; the daemon never stores the token in SQLite

Output

The atom writes a deterministic, JSON-shaped extract under the project cwd:

project-cwd/
├── figma/
│   ├── tree.json        # canonical node tree (id / type / parent / children / box / fills / text)
│   ├── tokens.json      # color + typography + spacing tokens lifted off the file
│   ├── assets/          # rasterised exports of every leaf node that the file marks for export
│   │   └── <node-id>.<png|svg|webp>
│   └── meta.json        # { fileUrl, version, lastModified, exportedAt, atomDigest }

figma/tree.json is the canonical pivot for every downstream atom. figma/tokens.json is the input to token-map. assets/ is the input to generate's media stage.

Convergence

The atom completes when figma/tree.json exists and is non-empty. The until evaluator reads figma.tree.nodes >= 1; if the figma file is empty or the OAuth token expired, the atom emits a clear error event and the run aborts (the user fixes auth or picks a different file).

Anti-patterns the prompt fragment forbids

  • Synthesising a tree from screenshots when the OAuth path failed — always re-prompt the user; never make up node ids.
  • Dropping unsupported node types silently; record them in meta.json.unsupportedNodes[] so the human can audit gaps.
  • Treating component instances as duplicates; record componentRef links so token-map can de-duplicate at the right boundary.

Status

Implemented by the daemon runner in apps/daemon/src/plugins/atoms/figma-extract.ts. It fetches and walks the Figma REST tree, records unsupported nodes, lifts tokens, and rasterizes supported assets.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

8-bit-orbit-video-template

免费有简介AI 评分 90分

使用Hyperframes的HTML模板制作复古像素风格的三场景视频,替换标题、标签和配色,同时保留场景转换节奏及可重复的动画时序。

  • 制作像素风格的介绍视频
  • 替换三场景视频中的内容
  • 通过HTML预览场景转换
nexu-io/open-design10.3万2026年10月20日 更新

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

中文简介正在准备中。当前显示英语简介。

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design10.3万2026年10月20日 更新

after-hours-editorial-template

免费有简介AI 评分 80分

以深色背景和衬线字体制作时尚杂志风格的三页动态展示,结合文字逐步显现与章节转场,最终生成内嵌CSS和JavaScript的单个HTML文件。

  • 制作时尚杂志风格的动态介绍
  • 用三页展示简短故事
  • 将现有品牌风格融入深色版面
nexu-io/open-design10.3万2026年10月20日 更新

agent-browser

免费有简介AI 评分 100分

通过浏览器查看页面,执行点击、输入、截图和信息提取。主要用于检查OpenDesign的本地预览,以及核查网页应用的运行情况与质量。

  • 检查OpenDesign本地预览
  • 测试网页应用的点击和输入
  • 截取页面或元素图像
nexu-io/open-design10.3万2026年10月20日 更新

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

中文简介正在准备中。当前显示英语简介。

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design10.3万2026年10月20日 更新

algorithmic-art

免费有简介AI 评分 80分

使用p5.js,根据计算规则与随机数创作生成艺术。固定随机种子即可重现相同画面,适合制作海报、表现动感的静态图像和艺术构图草案。

  • 根据规则制作海报
  • 创作具有动感的静态图像
  • 试验艺术作品的构图
nexu-io/open-design10.3万2026年10月20日 更新

查看 nexu-io 的全部技能

报告此技能的问题