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.
English界面动效的查阅层:59 条效果目录(什么时候用 / 什么时候别用 / 引擎无关的方法)+ 63 个参数令牌(值 / 值域后果 / 校准状态)+ 6 个共用算法(贝塞尔求解、弹簧解析解、动量投射、橡皮筋、速度采样、FLIP)。figkit 各后端共用它;要给界面加动效、或要判断某处该不该加动效时使用。它不产物、不吃 IR —— 需要落地实现时回到对应的 figma2…
Chinese把 figma2html 管线产的 IR(.ui.json 像素快照 + flow.json 交互声明)落到 Cocos Creator 3.x —— TS 运行时解释器(组件加载 ui.json 动态建节点树 + flow 绑定器)+ python 离线校验器(引用完整性 + 资产清单)。要在 Cocos 工程里还原 figma 界面与交互(底屏+弹窗/守卫/列表/勾选)时使用;capture 本身归…
Chinesefigma 节点树 → 高保真界面还原 + 可交互 harness。两条产物:全保真 .ui.json(渲染真源,逐节点真样式不折叠)+ DSL .md(语义抽象,喂 aigd/KB)。要把 figma 设计帧导成"可还原/可点/可跑"的客户端、或导成结构化 DSL 时用。文法权威在 references/界面DSL规范-figma2dsl扩展.md;本 skill…
Chinese把 figma2html 管线捕获的中间表示(IR:.ui.json 像素快照 + flow.json 交互声明)编译成 Godot 4 文本场景(.tscn)与 GDScript 运行时 flow 绑定器。输入 = figma2html capture 的产物;本 skill 是 Godot 4 编译后端,不含 capture。要在 Godot 工程里还原 figma…
Chinese把 figma2html 管线捕获的中间表示(IR:.ui.json 像素快照 + flow.json 交互声明)编译成 Unity UI Toolkit 资产(UXML+USS)与 C 运行时 flow 绑定器。输入 = figma2html capture 的产物;本 skill 是编译后端,不含 capture。要在 Unity 里还原 figma…
Chinese
AGENT SKILLS ATLASIncludes Figma2html and other workflows.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Figma2html
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.
Figkit Motion
界面动效的查阅层:59 条效果目录(什么时候用 / 什么时候别用 / 引擎无关的方法)+ 63 个参数令牌(值 / 值域后果 / 校准状态)+ 6 个共用算法(贝塞尔求解、弹簧解析解、动量投射、橡皮筋、速度采样、FLIP)。figkit 各后端共用它;要给界面加动效、或要判断某处该不该加动效时使用。它不产物、不吃 IR —— 需要落地实现时回到对应的 figma2 后端。
Figma2cocos
把 figma2html 管线产的 IR(.ui.json 像素快照 + flow.json 交互声明)落到 Cocos Creator 3.x —— TS 运行时解释器(组件加载 ui.json 动态建节点树 + flow 绑定器)+ python 离线校验器(引用完整性 + 资产清单)。要在 Cocos 工程里还原 figma 界面与交互(底屏+弹窗/守卫/列表/勾选)时使用;capture 本身归 figma2html。
Figma2dsl
figma 节点树 → 高保真界面还原 + 可交互 harness。两条产物:全保真 .ui.json(渲染真源,逐节点真样式不折叠)+ DSL .md(语义抽象,喂 aigd/KB)。要把 figma 设计帧导成"可还原/可点/可跑"的客户端、或导成结构化 DSL 时用。文法权威在 references/界面DSL规范-figma2dsl扩展.md;本 skill 只编排、不复制文法。可移植、项目无关。
Figma2godot
把 figma2html 管线捕获的中间表示(IR:.ui.json 像素快照 + flow.json 交互声明)编译成 Godot 4 文本场景(.tscn)与 GDScript 运行时 flow 绑定器。输入 = figma2html capture 的产物;本 skill 是 Godot 4 编译后端,不含 capture。要在 Godot 工程里还原 figma 界面像素与交互(底屏+弹窗/守卫/列表/勾选)时使用。
Figma2unity
把 figma2html 管线捕获的中间表示(IR:.ui.json 像素快照 + flow.json 交互声明)编译成 Unity UI Toolkit 资产(UXML+USS)与 C 运行时 flow 绑定器。输入 = figma2html capture 的产物;本 skill 是编译后端,不含 capture。要在 Unity 里还原 figma 界面像素与交互(底屏+弹窗/守卫/列表/勾选)时使用。
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Figma2html skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- Reported license for the skills shown: MIT. The author’s terms apply.