Checklist the per-video bar — engine/sim
81.0/100
quantitative quality · weights learn from your reviews (
engine.sim.memory review thread-the-stack-W36-Tue good|bad)⚠ 6 flag(s) — not yet ship-ready: low_vo_coveragedead_airgeneric_scene · see docs/strategy/VIDEO-CHECKLIST.md
Composition comp · template family · expected output
9:16 Reelrendered1:1 Squarepending16:9 Widepending9:16 4Kpending1:1 4Kpending16:9 4KpendingGIF (SMS)pending
expected output: 1/7 rendered — same matrix the /media preview surfaces for this asset.
Composition layer × scene 6 scenes · 31.9s · comp_id + rendered still + tier + the script
| # | Layer (comp_id · still · tier) | Beat | Timecode | Motion | Logo | Audio | VO / on-screen / caption |
|---|---|---|---|---|---|---|---|
| 1 |  matches intent shared field signature-3d | hook | 0–5.0s | kinetic-build | icon·wireframe | ♪ node_lock | The tool is Figma, where designs live and die. The trouble is the file stops at a picture, not working code. on-screen: Figma stops at the mockup |
expected on screen: white ground · box hero in the shared Signal Field · Faber leads · mark · kinetic-build · icon·wireframe logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldvisual markshape boxground whitetreatment wireframemotion kinetic-buildpower laser-lockinstrument laser-trace→Figma stops at the mockup | |||||||
| 2 |  first render · fix pending ChecklistCard templatedead_air | teach | 5.0–10.0s | kinetic-build | icon·wireframe | ♪ node_lock | So we point a Figma MCP at the file and let it read the frame, the spacing, and the exact color values. on-screen: Figma MCP reads the file |
expected on screen: white ground · a ChecklistCard panel over a dimmed Signal Field · Faber leads · node-graph · kinetic-build · icon·wireframe logo · caption bottom-left spec (the prompt): comp_id ChecklistCardvisual node-graphshape boxground whitetreatment wireframemotion kinetic-buildpower morphinstrument morph+laser→Figma MCP reads the filecurate items, nodes | |||||||
| 3 |  matches intent LogStream template | build | 10.0–15.9s | type-on | icon·wireframe | ♪ node_lock | Now the jump from design to working front-end takes minutes, with spacing and colors pulled straight on-screen: Mockup to components fast |
expected on screen: white ground · a LogStream panel over a dimmed Signal Field · Faber leads · code · type-on · icon·wireframe logo · caption bottom-left spec (the prompt): comp_id LogStreamvisual codeshape boxground whitetreatment wireframemotion type-onpower summoninstrument draw-on→Mockup to components fastcurate codeLines, rows | |||||||
| 4 |  matches intent AnnotatedDiagram template | proof | 15.9–21.9s | receipts-count | icon·wireframe | ♪ node_lock | So connect the Figma MCP and have it turn one frame into a component. Compare it to the design. on-screen: Read one frame to code |
expected on screen: white ground · a AnnotatedDiagram panel over a dimmed Signal Field · Faber leads · receipts · receipts-count · icon·wireframe logo · caption bottom-left spec (the prompt): comp_id AnnotatedDiagramvisual receiptsshape boxground whitetreatment wireframemotion receipts-countpower receiptsinstrument spotlight→Read one frame to codecurate callouts, statsLabels | |||||||
| 5 |  first render · fix pending shared field signature-3ddead_airgeneric_scene | futurist | 21.9–26.9s | spatial-parallax | icon·wireframe | ♪ bed | The Stack |
expected on screen: white ground · box hero in the shared Signal Field · Faber leads · spatial-parallax · icon·wireframe logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldshape boxground whitetreatment wireframemotion spatial-parallaxpower spatial-parallaxinstrument laser-fire→The Stack | |||||||
| 6 |  first render · fix pending shared field signature-3ddead_airgeneric_scene | resolve | 26.9–31.9s | coalescence | icon·color | ♪ bed_out | The Stack |
expected on screen: white ground · box hero in the shared Signal Field · Faber leads · coalescence · coalescence · icon·color logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldvisual coalescenceshape boxground whitetreatment colormotion coalescencepower coalescenceinstrument coalescence→The Stack | |||||||
Format stack 3 aspects · same scenes[], re-cropped
9:16
1080×1920
Stories · TikTok · YouTube Shorts · Reels
1:1
1080×1080
LinkedIn · Facebook · Instagram
16:9
1920×1080
X/Twitter · YouTube · LinkedIn video
Channels 9 destinations
LinkedInX/TwitterYouTubeInstagramFacebookThreadsTikTokPinterestBluesky
Social captions supplemental published copy · per channel (comp_id level)
tiktokThe stack: Figma stops at the mockup. So we point a Figma MCP at the file and have it read one frame, then turn that frame into a working component, spacing and colors pulled straight from the design. Compare it back to the mockup. Minutes, not days. (AI-assisted)
instagramFigma stops at the mockup.
Point a Figma MCP at the file.
Read one frame.
Turn it into a component, spacing and colors pulled straight from the design.
Design to front-end in minutes.
#figma #frontend #mcp #webdesign #devtools
linkedinThe stack this week: Figma, where designs live and die at the mockup.
So we point a Figma MCP at the file. Now the jump from design to working front-end takes minutes, with spacing and colors pulled straight from the frame.
The move: connect the Figma MCP, have it turn one frame into a component, then compare it back to the design. Small loop, fast result.
xThe stack: Figma stops at the mockup. Point a Figma MCP at the file, have it turn one frame into a component, spacing and colors pulled from the design. Compare it back. Minutes, not days.
facebookThis week's stack: Figma, where designs usually stop at the mockup. So we point a Figma MCP at the file. Now going from design to working front-end takes minutes, with spacing and colors pulled straight from the frame. Try it: connect the Figma MCP, have it turn one frame into a component, then compare it to the design.
threadsFigma stops at the mockup.
So we point a Figma MCP at the file and have it read one frame.
That frame becomes a working component, spacing and colors pulled straight from the design. Compare it back. Minutes, not days.
pinterestTurn Figma designs into working front-end code fast. Point a Figma MCP at your file, have it read one frame, and generate a component with spacing and colors pulled straight from the design. A practical developer workflow for going from mockup to code in minutes.
blueskyFigma stops at the mockup. Point a Figma MCP at the file, have it turn one frame into a working component, spacing and colors pulled from the design. Compare it back. Minutes, not days.
youtubeTitle: From Figma Frame to Component With an MCP
Figma is where designs live and die at the mockup. So we point a Figma MCP at the file. Now the jump from design to working front-end takes minutes, with spacing and colors pulled straight from the frame. The move: connect the Figma MCP, have it turn one frame into a component, then compare it back to the design. Search terms: Figma, MCP, front-end, design to code, developer workflow.