Extrator de DESIGN.md för Google Chrome

Extrahera visuella design tokens till AI-klara DESIGN.md-filer

Extrator de DESIGN.md, skapat av Vitor M. M. i samarbete med ibe.IA, är en Chrome-tillägg som konverterar en sidas visuella identitet till en standardiserad DESIGN.md-referens för AI-assisterad UI-kod. Den inspekterar sidor och fångar färg, typografi, avstånd och andra tokeniserade regler för att bilda ett maskinläsbart dokument. Tillägget använder en kompakt sidopanel för snabb extraktion och riktar sig till frontend-utvecklare, UI/UX-designers och promptingenjörer som behöver konsekvent visuell vägledning för LLM-drivna gränssnitt.

Det konverterar sidans stilar till en strukturerad design token-fil

Förlängningen extraherar konkret stilinformation från vilken aktiv flik som helst och skriver den till en DESIGN.md-fil. Extraktorn identifierar färger, typografiska skalor, avståndsenheter, kantstilar och skuggor och formaterar dem som en tokenreferens. Utdata följer W3C Design Tokens Community Group (DTCG) specifikationen så att team får en standardiserad tokenmodell snarare än en ad-hoc färglista. Detta hjälper nedströmsverktyg att tolka tokens på ett tillförlitligt sätt.

Det integreras i webbläsningen utan att lämna sidan

Extraktionen körs från en sidopanel byggd på Chrome Side Panel API, vilket låter användare initiera fångst med ett klick medan de ser den levande webbplatsen. Panelens design håller arbetsflödet kompakt och icke-invasivt, så att designers kan inspektera komponenter och utlösa extraktioner utan att öppna ett separat fönster. Fångster över flera sidor konsoliderar tokens över navigerade sidor till en enda referensfil för projektets konsekvens.

Det håller bearbetningen lokal till webbläsaren för integritet

All analys sker i användarens webbläsare; förlängningen dokumenterar att den inte överför eller lagrar data externt och inte kräver ett konto. Den lokala bearbetningen passar professionella miljöer med strikta integritetsregler, eftersom extraherade tokens och den genererade DESIGN.md förblir i klientmiljön och kan exporteras direkt för internt bruk.

Det förbereder tokenfiler för AI-redigerare och programmatisk användning

Verktyget producerar AI-klara artefakter inklusive en AI Consolidation Prompt och en exportbar Markdown-fil med YAML frontmatter lämplig för programmatisk inhämtning. Prompten presenteras för att hjälpa LLMs som Claude och Cursor att tillämpa tokensatsen, medan Markdown-utdata är formaterad för integration i utvecklarens pipelines. Förlängningen körs på Chrome och andra Chromium-baserade webbläsare på grund av dess API-beroende.

Bäst lämpad för team som vill ha reproducerbar designvägledning för AI-assisterad kod

Förlängningen är ett praktiskt alternativ för frontendteam och promptingenjörer som behöver en upprepningsbar, maskinläsbar designreferens för att minska visuell avvikelse i LLM-genererad UI. En avvägning är att anta den kräver en liten arbetsflödesändring för att importera och versionera tokenfiler inom befintliga bygg- eller granskningsprocesser. För projekt som upprätthåller designfidelitet ger förlängningen ett fokuserat, integritetsmedvetet sätt att kodifiera visuella regler.