Home / prodazhang / figkit · figma2dsl/SKILL.md · GitHub

figma2dsl skillA

figma2dsl is agent-read markdown (skill) from prodazhang/figkit: figma 节点树 → 高保真界面还原 + 可交互 harness。两条产物:全保真 .ui.json(渲染真源,逐节点真样式不折叠)+ DSL .md(语义抽象,喂 aigd/KB)。要把 figma 设计帧导成"可还原/可点/可跑"的客户端、或导成结构化 DSL 时用。文法权威在 references/界面DSL规范-figma2dsl扩展.md;本 skill 只编排、不复制文法。可移植、项目无关。.

Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.

What the file says

## 这个 skill 能干什么

把 **figma 设计帧**(节点树 JSON)还原成界面,两条并行产物、各司其职:

| 产物 | 生成脚本 | 性质 | 用途 |
|------|---------|------|------|
| **`<屏>.ui.json`** | `figma_capture.py` | **全保真**(每可见节点 + 全部样式,不折叠) | **渲染真源**:harness `render.js` / 实际 app / aigd 还原 |
| `<屏>.tree.html` | `figma_capture.py`(同次) | 全保真静态预览 | 眼比设计稿 |
| `<屏>.md`(DSL) | `figma_to_dsl.py` | **语义抽象**(折叠+flat skin,有损是本职) | 给人读 / AI 按意图生成 / KB 检索 / 喂 aigd |

**核心认知**:折损不是 DSL 造成的,是"折叠+压扁"这套抽象选择。要**完全还原画面走 `.ui.json`**;要**语义/意图走 DSL**。唯一躲不掉的损失=矢量路径→栅格 PNG(与 DSL 无关,由 DOM 渲染目标决定)。

---

## 第0步 读真源(每次必做,用 Read)

- `references/界面DSL规范-figma2dsl扩展.md` — 增补规范(§0 双轨架构 + .ui.json schema + 坐标系/原图/parent/跳隐藏 + 样式字段)
- `scripts/figma_capture.py` — **全保真捕获**(主路径)
- `scripts/figma_to_dsl.py` — DSL 转写(派生语义视图)
- `scripts/ui_render.py` — DSL→html 渲染校验(给 DSL 用)
- `scripts/export_assets.py` — 素材导出(figma REST)

## 第1步 准备输入

- `nodes.json` — figma 节点树(REST API `/v1/files/<key>/nodes?ids=...` 拉)
- `frameId`、`屏名/NN`、`fileKey`、`outdir`、`_assets/s<NN>/` 素材目录

## 第2步 全保真捕获(主路径)

```
python3 scripts/figma_capture.py <nodes.json> <frameId> <sNN> <assetDir> <assetRelPrefix> <out_basepath>
# 产物: <out_basepath>.ui.json  +  <out_basepath>.tree.html
```
…

Read the whole file at its exact version.

How to install

Latest version
mdr add prodazhang/figkit/figma2dsl@git:20260728.78f596d
Exact content
mdr add prodazhang/figkit/figma2dsl@sha256:b6346c01c49e4eb2

Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_5nvwx2zcwsevk4n2.svg)](https://markdownregistry.com/a/art_5nvwx2zcwsevk4n2)

1 badge views in 30 days

Versions

versioncommittedcommitsizeaudit
git:20260728.78f596d latest2026-07-28 78f596d 5,107 BA view · diff
git:20260703.4dd60842026-07-03 4dd6084 5,103 BA view

Audit of the latest version

A  17 of 17 checks passed. Deterministic, no model, same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (5107 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

prodazhang/figkit · 10 stars · license MIT · pushed 2026-09-21 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_5nvwx2zcwsevk4n2
GET https://markdownregistry.com/api/v1/resolve?ref=prodazhang/figkit/figma2dsl
GET https://markdownregistry.com/api/v1/blob/b6346c01c49e4eb2eef258e20059f03161fb2d12f72faacb4fa35ca34c7e767f

Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

More from prodazhang/figkit

figkit-motion skill
prodazhang/figkit · figkit-motion/SKILL.md · 界面动效的查阅层:59 条效果目录(什么时候用 / 什么时候别用 / 引擎无关的方法)+ 63 个参数令牌(值 / 值域后果 / 校准状态)+ 6 个共用算法(贝塞尔求解、弹簧解析解、动量投射、橡皮筋、速度采样、FLIP)。figkit…
git:20260804.3e361e1 · audit A · 10 stars
figma2cocos skill
prodazhang/figkit · figma2cocos/SKILL.md · 把 figma2html 管线产的 IR(.ui.json 像素快照 + flow.json 交互声明)落到 Cocos Creator 3.x —— TS 运行时解释器(组件加载 ui.json 动态建节点树 + flow 绑定器)+…
git:20260731.09781e7 · audit A · 10 stars
figma2godot skill
prodazhang/figkit · figma2godot/SKILL.md · 把 figma2html 管线捕获的中间表示(IR:.ui.json 像素快照 + flow.json 交互声明)编译成 Godot 4 文本场景(.tscn)与 GDScript 运行时 flow 绑定器。输入 = figma2html…
git:20260728.78f596d · audit A · 10 stars
figma2html skill
prodazhang/figkit · figma2html/SKILL.md · Use when you have a figma design frame (or several) and want to turn it into a high-fidelity, runnable HTML client —…
git:20260805.6f61967 · audit A · 10 stars
figma2unity skill
prodazhang/figkit · figma2unity/SKILL.md · 把 figma2html 管线捕获的中间表示(IR:.ui.json 像素快照 + flow.json 交互声明)编译成 Unity UI Toolkit 资产(UXML+USS)与 C# 运行时 flow 绑定器。输入 =…
git:20260728.78f596d · audit A · 10 stars

Every file in prodazhang/figkit

Browse by kind, by grade A, or by owner.