git:20260826.dfbfa9d to git:20260826.eac0b64

---

name: proto

description: Rebuilds a Figma design as code so that input, validation, state, and branching actually work in a single HTML file. Not a click-through screenshot demo — something you press to check the UX and get a feel for the implementation spec. The pipeline: settle scope by interview, read Figma faithfully (structure, exact labels, visual tokens), build as vanilla single-file HTML, then verify real behavior in a browser. Triggers - "/fig:proto", "make a working prototype", "make this design actually clickable", "동작 프로토타입 만들어", "프로토타이핑 해줘", "실제로 눌러보고 입력되게".

allowed-tools: AskUserQuestion, Bash, Read, Write, Edit, mcp__plugin_figma_figma__get_design_context, mcp__plugin_figma_figma__get_screenshot, mcp__plugin_figma_figma__get_metadata, mcp__plugin_figma_figma__use_figma, mcp__claude-in-chrome__tabs_context_mcp, mcp__claude-in-chrome__navigate, mcp__claude-in-chrome__computer, mcp__claude-in-chrome__browser_batch, mcp__claude-in-chrome__read_console_messages

---

## When to invoke

## When NOT to invoke

## Inputs

---

## Procedure

```js

const page = figma.root.children.find(p => p.id === "<PAGE_ID>");

await figma.setCurrentPageAsync(page);

const g = (n,k)=>{try{return n[k]}catch(e){return undefined}}; // phantom-safe

const collect = async (id) => {

const root = await figma.getNodeByIdAsync(id), out = [];

const walk = (n) => { if(!n) return;

if (n.type==="TEXT") { const ch=g(n,"characters");

if (ch && ch.trim()) { const b=n.absoluteBoundingBox;

out.push({ y:b?Math.round(b.y):0, x:b?Math.round(b.x):0, t:ch, h:!n.visible?1:0 }); } }

const kids=g(n,"children"); if(kids) for(const k of kids) walk(k); };

walk(root); out.sort((a,b)=> a.y-b.y || a.x-b.x); return out;

};

```

```js

const g=(n,k)=>{try{return n[k]}catch(e){return undefined}};

const scan = async (frameId) => {

const root = await figma.getNodeByIdAsync(frameId), hits = [];

const walk = n => { if(!n) return;

const fills = g(n,"fills");

if (Array.isArray(fills) && fills.some(f => f.type === "IMAGE"))

hits.push({ id:n.id, name:n.name, type:n.type,

w:Math.round(n.width), h:Math.round(n.height),

for (const k of (g(n,"children")||[])) walk(k); };

walk(root); return hits;

};

return await scan("<FRAME_ID>");

```

```bash

python3 - <<'PY'

import base64, pathlib

s = html.read_text()

for token, f in (('__IMG_A__','a.png'), ('__IMG_B__','b.png')):

s = s.replace(token, 'data:image/png;base64,' + base64.b64encode(pathlib.Path(f).read_bytes()).decode())

html.write_text(s)

PY

```

## Constraints

## Notes