Acha Kurekebisha UI ya AI Iliyoharibika kwa Mkono

Zana zako za uandishi wa kodi za AI mara nyingi hushindwa katika usanifu.

Unaomba kitufe. AI inakupa rangi moja ya bluu. Unaomba sehemu (component) nyingine. AI inakupa rangi nyingine ya bluu. Hii hutokea kwa sababu AI haina mfumo thabiti wa usanifu (design system).

Google Labs imetoa design.md ili kutatua hili.

Ni maelezo ya kiufundi (specification) yanayoruhusu zana kama Cursor, Claude Code, na GitHub Copilot kusoma sheria zako za usanifu. Hii inazuia nafasi zisizo na mpangilio, fonti zisizo sahihi, na rangi zinazobadilika-badilika.

Jinsi inavyofanya kazi:

design.md ni faili la Markdown lenye sehemu mbili.

  • YAML Front Matter: Hii ina tokeni sahihi za usanifu. Unafafanua rangi, aina za maandishi (typography), nafasi, na radius za pembe hapa.
  • Markdown Body: Hii ina mantiki ya usanifu (design rationale). Inaeleza kwa nini unatumia rangi fulani na wakati gani wa kuiepuka.

Muundo huu unasaidia AI kuelewa data na mantiki kwa pamoja. Haioni tu kodi ya hex. Inaelewa kwamba rangi fulani ni kwa ajili ya vichwa vya habari na haipaswi kutumika kwa maandishi ya kawaida.

Sifa kuu za CLI ya design.md:

  • Linting: Inakagua ikiwa tokeni zako ni sahihi. Hata inakagua upatikanaji (accessibility) wa rangi kulingana na WCAG AA.
  • Diffing: Inakuonyesha ni tokeni zipi zilizobadilika hasa unapohuisha usanifu wako.
  • Exporting: Inabadilisha faili lako la usanifu kuwa Tailwind CSS, JSON, au W3C Design Tokens.
  • Spec: Inatengeneza mwongozo unaoweza kumpa AI yako ili kumfundisha jinsi ya kusoma faili lako.

Kwa nini hii ni muhimu:

Waendelezaji wengi hutumia CLAUDE.md au AGENTS.md kwa sheria za jumla. Ingawa zina msaada, faili hizi mara nyingi hutumia lugha ya kawaida. AI bado inabidi ikisia thamani mahususi.

design.md inageuza mfumo wako wa usanifu kuwa data inayoweza kusomwa na mashine.

Ili kuitumia:

  1. Weka DESIGN.md kwenye mzizi (root) wa mradi wako.
  2. Katika CLAUDE.md au sheria za Cursor, ongeza mstari huu: "Kwa kazi za UI, soma DESIGN.md kwanza na ufuate kwa ukamilifu tokeni na mantiki."

Acha kurudia "rangi isiyo sahihi" kwa AI yako. Mpe chanzo kimoja cha ukweli.

Chanzo: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

Jumuiya ya kujifunza ya hiari: https://t.me/GyaanSetuAi