figma2html SKILL.md skillA
figma2html from prodazhang/figkit is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add prodazhang/figkit/figma2html@git:20260805.6f61967Pins git:20260805.6f61967 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- prodazhang/figkit
- Path
figma2html/SKILL.md- Versions recorded
- 5
- Latest version
- git:20260805.6f61967, committed Aug 5, 2026
- First version recorded
- Jul 29, 2026
- Size
- 7,327 bytes
- Repository stars
- 14
- License
- MIT
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.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file 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@sha256:dfde0a36ca468099The line at the top of this page pins the label git:20260805.6f61967, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_frmuwc7ynwh5itsm)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 5 versions of this file, between Jul 29, 2026 and Aug 5, 2026, about one every 2 days.
| 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 · 14 stars · license MIT · pushed 2026-11-04 · 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 AI assistant 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.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.