Proč používám Cursor s Figma MCP – a proč stále testuji na kabelovém iPhone

„Front s podporou umělé inteligence“ dříve znamenalo vložit snímek obrazovky do chatu a získat zpět CSS, které bylo blízko, ale nikdy ne úplně správné mezery, správná šedá, správná výška řádku. Protokol kontextu modelu to změnil konkrétně pro předání návrhu. Cursor komunikuje se serverem Figma MCP a místo zploštění rámce na pixely, které má model odhadnout, získá skutečný strom uzlů: automatické rozvržení, hodnoty mezer, vázané proměnné, názvy komponent, měřítko typu. To je část, na kterou se vlastně spoléhám denně.

1. Co je MCP ve skutečnosti správné

I select a frame in Figma, hand Cursor the link, and it queries the MCP server for that node. To, co se vrací, je strukturované: mezera 8px je doslovné číslo 8, ne něco, co měřím pomocí nástroje pravítko na PNG. Barva je žeton designu nebo hex, který návrhář svázal, nikoli hodnota, kterou vyberu kapátkem a doufám, že se shoduje. Tloušťka písma, výška čáry, poloměr rohů, skutečná hierarchie komponent – ​​to vše přichází jako data, ne jako obrázek, který jsem reverzním inženýrstvím vytvořil.

• Rozestupy, které odpovídají konstrukčnímu systému, nikoli nejbližší kulaté číslo, které jsem uhodl.
• Barvy a typ jako tokeny, takže změna značky aktualizuje jednu proměnnou místo grep napříč komponentami.
• Hranice komponent, které odpovídají tomu, jak návrhář skutečně seskupoval věci, což usnadňuje zachování sémantiky generovaného označení.

2. Co ještě kontroluji ručně

Strukturovaná data nejsou úsudkem. Snímek Figma zobrazuje vždy jeden bod přerušení; it does not tell Cursor what happens between 768px and 1024px, or what a card looks like with a two-line title instead of one. Nemá žádný prázdný stav, žádný chybový stav, žádnou načítací kostru, protože ty na začátku nikdy neměly návrhový rámec. A generované označení může být strukturálně přesné pro rámec a přitom stále být divem, kam patří tlačítko, navigace nebo značka nadpisu – stále čtu každou komponentu pro sémantiku a přístup z klávesnice, než se sloučí.

3. Proč nestačí emulátor

Panel nástrojů zařízení Chrome DevTools je Chromium vykreslující výřez se změněnou velikostí. Není to WebKit, nemá dynamické chování výřezu iOS Safari a neukáže vám chyby, které existují pouze na skutečném enginu. Takže posledním krokem před odesláním čehokoli je připojení skutečného iPhone k mému Macu pomocí kabelu. Nastavení → Safari → Upřesnit → Webový inspektor, zapnuto jednou v telefonu. Pak Lightning nebo USB-C kabel k Macu, nabídka Safari v Develop zvedne zařízení a dostanu živý Web Inspector – skutečný DOM, skutečná konzole, skutečný síťový panel – připojený ke stránce, která skutečně běží na iOS Safari, nikoli jeho simulace.

To je místo, kde jsem zachytil chyby, které emulátor skrývá: vycpávka v bezpečné oblasti, která vypadá dobře v DevTools a klipy pod zářezem na skutečném telefonu, skok o 100 Vh, když se adresní řádek Safari zhroutí při posouvání (dvh to opraví, ale pouze testování naživo to dokazuje), rozvržení vstupního ostření, když se otevře klávesnice, přetažení přes stránku s gumičkou a opravené zápatí se chová přidaný na domovskou obrazovku jako samostatný PWA. Nic z toho se v emulátoru nezobrazí. Všechno se to zobrazí, když skutečný zákazník poprvé otevře odkaz na svém vlastním telefonu – takže bych to raději viděl jako první.

4. Proč zrovna Safari – prohlížeč, pro který ve skutečnosti dodávám

Než se rozhodnu, co pro projekt znamená „správné“, podívám se na analýzu. U většiny webů pro malé firmy a služby, které vytvářím, je zákazník, který web otevírá, na telefonu, přichází z Instagramu, Telegram, Google Maps nebo textovou zprávou – a pro velký podíl tohoto provozu je tím telefonem iPhone. Desktopový Chrome je místo, kde vyvíjím. iOS Safari je místo, kde se skutečně nachází osoba s kreditní kartou. Optimalizace pixelové dokonalosti pro prohlížeč, na který zírám celý den, a přeskakování toho, který zákazník mého klienta ve skutečnosti drží, je optimalizace pro nesprávné publikum.

Skutečná smyčka

Figma frame, selected and handed to Cursor through the MCP. Komponenta vytvořená ze skutečných tokenů, nikoli uhádnutých pixelů. Průchod pro sémantiku, stavy a body přerušení, které rámec nikdy neukázal. Poté se iPhone vysune ze zásuvky, připojí se k Macu a stejná stránka běží živě v Safari's Web Inspector na skutečném enginu. Teprve poté se něco spojí. Dva různé nástroje, dvě různé práce: jedna mě rychle přiblíží k návrhu, druhá mi řekne pravdu o zařízení, které klient klienta skutečně použije.

Chcete, aby skutečně vypadal přesně na telefonu, který má váš zákazník?

Toto je kanál, který spouštím na každé sestavě: skutečné designové tokeny dovnitř, skutečné zařízení ven. Obraťte se prostřednictvím kontaktního formuláře a sdělte mi, jakou platformu vaši zákazníci skutečně používají – vytvořím a otestuji pro tuto platformu, nikoli pro prohlížeč, který mi vyhovuje.