figma2cocos skillA
figma2cocos is agent-read markdown (skill) from prodazhang/figkit: 把 figma2html 管线产的 IR(.ui.json 像素快照 + flow.json 交互声明)落到 Cocos Creator 3.x —— TS 运行时解释器(组件加载 ui.json 动态建节点树 + flow 绑定器)+ python 离线校验器(引用完整性 + 资产清单)。要在 Cocos 工程里还原 figma 界面与交互(底屏+弹窗/守卫/列表/勾选)时使用;capture 本身归 figma2html。.
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
# figma2cocos — figma IR → Cocos Creator 3.x
## 这个 skill 干什么
figma2html 已把 figma 帧变成 **`.ui.json`(像素真值)+ `flow.json`(声明的交互)**。本 skill 是这套 IR 的
**Cocos 落地端**:
- **TS 运行时解释器**(`runtime/`):`FigmaUI` 组件读 JsonAsset(cap)动态建节点树(Graphics/Label/Sprite);
`FlowBinder` 读 flow.json 组装"底屏常驻 + 弹窗叠加 + 事件 + guard + 列表克隆 + checkbox",域内语义走
`FigmaAppHook`(对齐 assemble.js 的 APPHOOK)。
- **python 离线校验器**(`scripts/ui_check.py`):不开 Cocos 就能测的部分——IR/flow 引用完整性 + 资产清单。
分工:**capture / flow 编写规范 → figma2html**;**HTML 落地 → figma2html**;**Cocos 落地 → 本 skill**。
## 内容
```
runtime/ parse-css.ts(rgba/渐变/radius四角/border/shadow 解析,纯函数)
figma-ui.ts(@ccclass FigmaUI:cap→节点树;buildSubtree=弹窗抽子树;paintRect 复用)
flow-binder.ts(@ccclass FlowBinder:flow→层/事件/guard/列表/勾选;FigmaAppHook 注册口)
references/ mapping.md(IR→Creator 映射全表 + 坐标转换推导 + known-loss 表 + 集成冒烟清单)
scripts/ ui_check.py(离线校验:caps 可载入、el id 引用完整、列表模板行、assets-manifest.json)
bake_motion.py(flow.json → motion.json:转场缓动解成采样点,TS 侧只插值)
motion.py(figma2html 主拷贝的**逐字节镜像**,tools/conformance 逐字节守)
tests/(run_all.py 发现式 runner + test_ui_check.py + test_runtime_source.py;
…Read the whole file at its exact version.
How to install
mdr add prodazhang/figkit/figma2cocos@git:20260731.09781e7mdr add prodazhang/figkit/figma2cocos@sha256:85f657ccc15b23aePin 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_enxftkxk5whzfmkt)
1 badge views in 30 days
Versions
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20260731.09781e7 latest | 2026-07-31 | 09781e7 | 5,466 B | A | view · diff |
| git:20260729.63606e9 | 2026-07-29 | 63606e9 | 5,199 B | A | view · diff |
| git:20260728.78f596d | 2026-07-28 | 78f596d | 4,081 B | A | view · diff |
| git:20260706.cabbd58 | 2026-07-06 | cabbd58 | 4,079 B | A | view · diff |
| git:20260703.4dd6084 | 2026-07-03 | 4dd6084 | 3,866 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 (5466 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_enxftkxk5whzfmkt GET https://markdownregistry.com/api/v1/resolve?ref=prodazhang/figkit/figma2cocos GET https://markdownregistry.com/api/v1/blob/85f657ccc15b23ae5680b5c306647c121b728b51728dc7f302a6e88c8a590f41
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.