Conversation
|
Size stats
|
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ℹ️ You can run this locally by executing |
Marcosld
requested review from
atabel,
aweell,
Copilot,
ieduardogf and
yceballost
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the developer-facing doc/llms.md documentation.
Changes:
- Adjusts the “Next.js optimization” subsection heading formatting.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| The `theme` object should be constant (outside the component) or memoized with `React.useMemo`. | ||
|
|
||
| ### Next.js optimization | ||
| ### Next.js optimization. |
Comment on lines
165
to
+167
| The `theme` object should be constant (outside the component) or memoized with `React.useMemo`. | ||
|
|
||
| ### Next.js optimization | ||
| ### Next.js optimization. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduction
The objective of this task was investigating whether enabling Figma Code Connect measurably improves the code that Claude generates when implementing a Mistica design from Figma MCP.
We tested a single Figma design (iPhone 14 product detail page) 6 times: 3 runs with Code Connect ENABLED and 3 runs with Code Connect DISABLED (instruction to
disableCodeConnect: trueon everyget_design_contextcall + unpublished code connect components). All 6 iterations were independent Claude Opus 4.7 (1M ctx) subagent runs of the same prompt — each one read themistica-reactskill, called Figma MCP on the root frame and its sub-sections, then wrote a single React component.Summary
Across 6 runs on the same design, Code Connect ON did not measurably beat Code Connect OFF. Both groups produced semantically similar Mistica component trees with ≥98% primitive purity, and the variance between iterations within each group was larger than the variance between groups. The differentiator that mattered was how deeply the agent read
llms.md(and the rest of the doc) along with randomness not whether Figma had Code Connect mappings.Patterns
<div>/ inlinestyle={{...}}was counted across the 6 files. 5 of the 6 iterations emitted exactly onestyle={{...}}block — and in every case it was for the ACABADO color swatches, because Mistica has no clickable color-swatch primitive and the swatch fills are physical product paint colors (not theme tokens). This is a Mistica gap, not a model gap. The iteration that didn't emit a style block used mistica Circle primitive for the swatches, but it didn't add interactability to it(there's no way using mistica).MainNavigationBar,NavigationBreadcrumbs,ResponsiveLayout,GridLayout,Slideshow,Image,Tag,Title1/4,Text2/3/7,InfoRating,RadioGroup,BoxedRow/BoxedRowList,Chip,ButtonPrimary,TextLink,MediaCard,Tabs,Accordion/AccordionItem,ProgressBar,Box,Stack,Inline,skinVars, plus the same set of icons.Random failures
Despite identical prompts and identical context, the iterations fail in different places:
Inline + Box width="32%"instead ofGrid columns={3}(NCC_3). This makes clear that creating layouts is what has the highest variability.style={{...}}directly.Methodology
disableCodeConnectoverride). Each independently:mistica-reactskill and use figma MCP.disableCodeConnect: trueto everyget_design_contextcall.App.tsx(wrapped in MovistarThemeContextProvider) and rendered against Vite dev server. Playwright captured a 1368-wide full-page screenshot after clicking every[aria-expanded="false"]so the accordion content is visible.Iterations
Pair 1 — CC_1 vs NCC_1
<div>count<div style={{flex:1}}>for rating histogram row — agent unaware MisticaInlinehas no per-child grow)style={{...}}count<style>block perllms.mdQuick Start instead)Net. Tie on visual fidelity (both miss the accessory card row). CC_1 is the cleanest of all 6 at the file level — 0 raw
<div>, 0 inline styles. Nevertheless it didn't add interactivity to the color swatches. It did just use a plain Circle. NCC_1's only Mistica-API knowledge gap (flex:1wrapper) is unrelated to Code Connect and makes ratings render right.Pair 2 — CC_2 vs NCC_2
<div>countstyle={{...}}countNet. CC_2 did make several mistakes and hallucinations in the layout, including misplaced media cards, centered bottom characteristics. It missed the main image and used a random figma one that is just the color swatches.
Pair 3 — CC_3 vs NCC_3
Inline + Box width="32%"workaround failed — should have beenGrid columns={3})<div>countstyle={{...}}countNet. CC_3 is the best Code-Connect run — most balanced overall (proper grid, correct circle swatches, complete nav, real asset positioning). It did make a common mistake consisting on rendering too many stars in the inforating component. NCC_3 is the worst run of all 6 — the 3-card row collapsed to ~32px narrow strips because the agent reached for
Inline + Box width="32%"instead ofGrid columns={3}.Results
Primitive purity at a glance
<div>count and inlinestyle={{...}}count across the 6 runs:<div>style={{...}}<style>block (perllms.mdQuick Start) but no inline styles.<div style={{flex:1}}>wrapper for rating histogram (Mistica-API gap).Both groups are ≥98% Mistica. The one consistent leak across all 6 runs is the color picker (no Mistica primitive exists for clickable physical-paint swatches).
Visual fidelity at a glance
Best/worst across the 6 runs:
CC_3andNCC_1.Code Connect comparative score
The total is essentially a tie, with the within-group spread (CC: 3-5; NCC: 3-5) larger than the between-group spread.
Conclusions
Grid columns={3}for the accessory row — but so did NCC_2. The CC group also had failures (CC_2's ellipse swatches) on par with the NCC group (NCC_3's collapsed grid).llms.mdin conjunction with randomness, not whether Figma has Code Connect mappings.style={{...}}for it.ref: WEB-2444