Calque

Figma → production UI · not a demo

The Figma frame
already knows the code.

Calque is a deterministic engine. Same node tree → same React/Vue every run. Loops fold into .map(). Layout from geometry—not vibes. Open a PR the first time.

See the conversion Agent playbook →
r = b = 0
structure floor on corpus
~0.97 IoU
geometry fidelity
0 keys
free cloud convert
1 shot
byte-identical reruns

Watch the engine think.

Each layer is boxed on the design, then the same slice lights up in the product while its source streams — in lockstep. Three .maps + hoisted Card.

  • 3× .map
  • Card hoist
  • absolute + flex
  • SVG + media
Idle
Design · HomeScreen waiting
9:41
Discover
Search products…
All Electronics Fashion Home
Summer Sale Up to 50% off Shop Now
PopularSee all

Wireless Headphones

$129

Smart Watch Series 6

$299

Portable Speaker

$79

Camera Lens Kit

$449
HomeSearchCartProfile

Algorithm boxes layers · geometry first

Product · runtime preview —
9:41
Discover
Search products…
All Electronics Fashion Home
Summer Sale Up to 50% off Shop Now
PopularSee all

Wireless Headphones

$129

Smart Watch Series 6

$299

Portable Speaker

$79

Camera Lens Kit

$449
HomeSearchCartProfile

UI materializes as layers lock

HomeScreen.tsx · streaming —

3 loops · Card hoist · absolute tab · flex-wrap grid

Same engine on other hard cases

Overlapping stacks, data tables, admin grids—still deterministic.

loops · overlap

Facepile.tsx

export function Facepile() {
  const items = [/* 4 avatars */]
  return (
    <div className="flex … pl-3">
      {items.map((item, i) => (
        <img key={i}
          className="-ml-[12px] w-10 h-10
            rounded-full border-2 border-white"
          src={item.avatar} />
      ))}
    </div>
  )
}
True overlap → shared negative margin + single map
grid · admin table

Dashboard rows

function Item2({ title, email, … }) {
  return (
    <div className="grid
      grid-cols-[320px_280px_200px_120px]
      items-center … border-b">
      <div className="flex gap-3 col-start-[1]">
        <div className="w-8 h-8 rounded-full" />
        <span>{title}</span>
      </div>
      <span className="col-start-[2]">{email}</span>
      …
    </div>
  )
}
CSS grid tracks from bbox edges · row component hoist
vs AI tools

Why this hits different

  • AI codegen — different JSX every run, nested loops often flattened wrong, fake imports
  • Calque — multi-period fold, component hoist, absolute only where geometry forces it
  • Your job — wire data & routes. Structure is already commit-ready.

calque /kalk/ — a tracing. Design laid over implementation without losing the line.

Free cloud convert. Zero Calque keys.

Engine lives on the server—clients never download the converter. Paste a Figma design URL (needs your Figma token) or node JSON.

curl -sS -X POST https://calque.flowsrun.com/v1/convert \
  -H 'content-type: application/json' \
  -H "X-Figma-Token: $FIGMA_TOKEN" \
  -d '{
    "figma_url": "https://www.figma.com/design/…?node-id=4368-321208",
    "markup": "react",
    "style": "tailwind"
  }'
Full agent guide

One frame.
One honest commit.

Stop regenerating. Start reviewing.

Start converting Replay the proof