figma2html skillA
figma2html is agent-read markdown (skill) from prodazhang/figkit: Use when you have a figma design frame (or several) and want to turn it into a high-fidelity, runnable HTML client — pixel-faithful rendering plus declared interactions (modals, data binding, guards). For figma-sourced UIs; non-figma authoring (brief/screenshot) goes through the 界面 DSL instead..
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
# figma2html — figma 节点树 → 高保真可跑 HTML
## 这个 skill 干什么
figma 帧 → **全保真 `.ui.json`(像素)** + **`flow.json`(声明的交互/Events)** → 通用引擎组装成**可点可跑**的 HTML 客户端。
- **像素**:`figma_capture.py` 把每个可见节点 + 全部样式抠成 `.ui.json`,`render.js` 1:1 重建 DOM。
- **交互**:figma 没有交互逻辑,**Events 在 `flow.json` 手写**(按 figma node id、抗重抓);`assemble.js` 读 flow 把"底屏 + 弹窗叠加 + 事件 + 绑定"装起来。**域内语义(数据→行、回填、状态色)由 app hook 注册**,引擎不写死。
边界:**figma 进 → 本 skill**(像素优先);**非 figma 进(brief/截图)→ 界面 DSL → ui_render**(语义优先)。两边共享 figma node id 键空间 + Events 语法。
## 内容
```
scripts/ figma_capture.py(节点树→ui.json+tree.html)· flow_from_figma.py(figma 原型交互→flow.json 初稿)
subset_font.py(字体子集woff2)· shoot.py(Edge无头截图)
tests/(capture 冒烟:夹具→断言 records;`python3 scripts/flow_check.py <flow.json> # 手写完 flow.json 先跑这个:坏引用离线就报,
# 别等浏览器里"点了没反应"才发现
python3 scripts/tests/run_all.py`)
runtime/ render.js(ui.json→DOM,subtreeOf抽子树)· assemble.js(通用引擎:flow→底屏+弹窗+事件+绑定)· app.tmpl.html
references/ ui.json-schema.md(含「已知限制:旋转」)· flow-events.md(flow/Events 契约)
…Read the whole file at its exact version.
How to install
mdr add prodazhang/figkit/figma2html@git:20260805.6f61967mdr add prodazhang/figkit/figma2html@sha256:dfde0a36ca468099Pin 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.
[](https://markdownregistry.com/a/art_frmuwc7ynwh5itsm)
1 badge views in 30 days
Versions
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20260805.6f61967 latest | 2026-08-05 | 6f61967 | 7,327 B | A | view · diff |
| git:20260804.1e73f84 | 2026-08-04 | 1e73f84 | 6,999 B | A | view · diff |
| git:20260804.78d6b15 | 2026-08-04 | 78d6b15 | 7,014 B | A | view · diff |
| git:20260729.d4629eb | 2026-07-29 | d4629eb | 5,934 B | A | view · diff |
| git:20260729.8d7ab02 | 2026-07-29 | 8d7ab02 | 5,498 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (7327 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
prodazhang/figkit · 10 stars · license MIT · pushed 2026-09-21 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_frmuwc7ynwh5itsm GET https://markdownregistry.com/api/v1/resolve?ref=prodazhang/figkit/figma2html GET https://markdownregistry.com/api/v1/blob/dfde0a36ca46809968b699e4c0d7739cd5e5ea745cfd96603ccca3a7ef2e172d
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.