Guides
Two hard problems AI tools often botch: repeated units and semantic layout. Calque treats both as geometry + structure argmin, not freeform generation.
Repeated siblings with a shared structural signature fold into one template + data table.
{items.map((item, i) => (
<article key={i}>
<img src={item.image} />
<p>{item.title}</p>
<b>{item.price}</b>
</article>
))}Rich loops without a matched import become a local component hoist (React/Vue), not N copies of the same tree.
| Visual pattern | Preferred emit |
|---|---|
| Even spacing along an axis | gap |
| Ends flush, middle empty | justify-between |
| Cluster centered | justify-center / items-center |
| Last item sunk | mt-auto / ml-auto |
| Uniform multi-row cards | flex-wrap grid |
| Table / dashboard tracks | CSS grid + column templates |
| Avatar facepile | shared negative margin + one map |
| True 2D overlap without pattern | absolute only as needed |
absolute; left; top; width; height would maximize IoU and minimize usefulness.
Calque maximizes semantic layout under a fidelity budget (corpus IoU ≈ 0.97).
Single-frame coordinates cannot always recover grow ratios or “hug vs fixed multi-line text.”
Where underdetermined, Calque keeps measured sizes instead of inventing flex-grow myths.
See Capabilities for the full property matrix.