AI દ્વારા બનેલા ખામીયુક્ત UI ને મેન્યુઅલી સુધારવાનું બંધ કરો

તમારા AI કોડિંગ ટૂલ્સ ઘણીવાર ડિઝાઇનમાં નિષ્ફળ જાય છે.

તમે બટન માટે પૂછો છો. AI તમને વાદળીનો એક શેડ આપે છે. તમે બીજા કમ્પોનન્ટ માટે પૂછો છો. AI તમને વાદળીનો બીજો શેડ આપે છે. આવું એટલા માટે થાય છે કારણ કે AI પાસે કોઈ સખત ડિઝાઇન સિસ્ટમ હોતી નથી.

Google Labs એ આ સમસ્યાના ઉકેલ માટે design.md બહાર પાડ્યું છે.

તે એક એવી સ્પષ્ટીકરણ (specification) છે જે Cursor, Claude Code અને GitHub Copilot જેવા ટૂલ્સને તમારા ડિઝાઇન નિયમો વાંચવાની મંજૂરી આપે છે. આનાથી અસંગત સ્પેસિંગ, ખોટા ફોન્ટ્સ અને બદલાતા રંગોને રોકી શકાય છે.

તે કેવી રીતે કામ કરે છે:

design.md એ બે ભાગો ધરાવતી Markdown ફાઇલ છે.

  • YAML Front Matter: આમાં ચોક્કસ ડિઝાઇન ટોકન્સ (design tokens) હોય છે. તમે અહીં રંગો, ટાઇપોગ્રાફી, સ્પેસિંગ અને કોર્નર રેડિયસ (corner radii) વ્યાખ્યાયિત કરી શકો છો.
  • Markdown Body: આમાં ડિઝાઇનનું તર્ક (design rationale) હોય છે. તે સમજાવે છે કે તમે કોઈ ચોક્કસ રંગનો ઉપયોગ શા માટે કરો છો અને ક્યારે તેનો ઉપયોગ ટાળવો જોઈએ.

આ માળખું AI ને ડેટા અને લોજિક બંને સમજવામાં મદદ કરે છે. તે માત્ર હેક્સ કોડ (hex code) નથી જોતું, પરંતુ તે સમજે છે કે ચોક્કસ રંગ હેડલાઇન્સ માટે છે અને તેનો ઉપયોગ બોડી ટેક્સ્ટ માટે ન કરવો જોઈએ.

design.md CLI ની મુખ્ય વિશેષતાઓ:

  • Linting: તે તપાસે છે કે તમારા ટોકન્સ સાચા છે કે નહીં. તે WCAG AA એક્સેસિબિલિટી કોન્ટ્રાસ્ટ પણ તપાસે છે.
  • Diffing: જ્યારે તમે તમારી ડિઝાઇન અપડેટ કરો છો, ત્યારે કયા ટોકન્સ બદલાયા છે તે તે તમને બરાબર બતાવે છે.
  • Exporting: તે તમારી ડિઝાઇન ફાઇલને Tailwind CSS, JSON, અથવા W3C Design Tokens માં રૂપાંતરિત કરે છે.
  • Spec: તે એક માર્ગદર્શિકા (guide) બનાવે છે જે તમે તમારા AI ને તમારી ફાઇલ કેવી રીતે વાંચવી તે શીખવવા માટે આપી શકો છો.

આ શા માટે મહત્વનું છે:

મોટાભાગના ડેવલપર્સ સામાન્ય નિયમો માટે CLAUDE.md અથવા AGENTS.md નો ઉપયોગ કરે છે. જોકે તે મદદરૂપ છે, પરંતુ આ ફાઇલો મોટે ભાગે નેચરલ લેંગ્વેજ (natural language) માં હોય છે. AI એ હજુ પણ ચોક્કસ મૂલ્યોનો અંદાજ લગાવવો પડે છે.

design.md તમારી ડિઝાઇન સિસ્ટમને મશીન-રીડેબલ (machine-readable) ડેટામાં ફેરવે છે.

તેનો ઉપયોગ કરવા માટે:

  1. DESIGN.md ને તમારા પ્રોજેક્ટ રૂટમાં મૂકો.
  2. તમારા CLAUDE.md અથવા Cursor નિયમોમાં, આ લાઇન ઉમેરો: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

તમારા AI ને વારંવાર "wrong color" કહેવાનું બંધ કરો. તેને સત્યનો એકમાત્ર સ્ત્રોત (single source of truth) આપો.

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

વૈકલ્પિક લર્નિંગ કોમ્યુનિટી: https://t.me/GyaanSetuAi