UX Collective: kako strukturirati dizajn sistem da ga AI može čitati

O čemu je članak

Dizajnerka Oleksandra Huba opisuje čest problem u AI-assisted workflow-ima dizajn-u-kod: kada promptujete LLM koristeći skrinšot dizajna, AI ne može razumeti strukturu, odnose između komponenti ni logiku imenovanja koja čini osnovu dizajn sistema. Rezultat je kod koji izgleda otprilike ispravno, ali ignoriše postojeće komponente, izmišlja nove ili krši konvencije imenovanja. Članak je strukturirani vodič za rešavanje problema na izvoru — čineći sam dizajn sistem čitljivim za AI.

Kontekst

Članak je napisan za dizajnere koji rade sa AI alatima za kodiranje poput Claude Code, Cursor ili GitHub Copilot i nailaze na situacije gde AI ili regeneriše već postojeći kod ili pravi pretpostavke o tome kako komponente funkcionišu. Ključni uvid je da problem nije u sposobnosti AI-a, već u odsustvu čistih, strukturiranih ulaznih podataka.

Ključna poruka

Članak nudi četiri konkretne intervencije. Prva je imenovanje i struktura fajlova u Figmi: semantički nazivi poput CreateProjectModal umesto Frame 74, ravna hijerarhija slojeva i Auto Layout kao podrazumevano. AI čita stablo slojeva da bi razumeo strukturu dizajna, pa zbrkano stablo daje zbrkani DOM.

Druga intervencija je povezivanje Figma komponenti sa stvarnom kodom bazom korišćenjem Code Connect, što stvara jedinstveni izvor istine umesto paralelnih implementacija već postojećih komponenti. Kada je Figma komponenta povezana sa stvarnom, AI tretira postojeću implementaciju kao cilj.

Treća je skup od tri fajla s pravilima u posebnom folderu: README sa osnovnim tehničkim odlukama, design-system-rules.md sa dokumentacijom upotrebe komponenti i figma-mcp-rules.md sa specifikacijom Figma-to-code workflow-a. Ovi fajlovi daju AI-u trajni kontekst kroz promptove.

Četvrta je struktura prompta: AI treba da radi na jednoj komponenti odjednom, a ne da generiše ceo interfejs, što smanjuje rizik od gubitka konteksta i nekonzistentnih odluka.

Ko bi trebalo da pročita

Dizajneri i lead-ovi dizajn sistema koji integrišu AI alate za kodiranje i primećuju da generisani rezultat ne poštuje njihovu postojeću biblioteku komponenti. Konkretne tehnike su relevantne za timove koji koriste Figmu sa bilo kojim MCP-kompatibilnim AI agentom.