పాడైపోయిన AI UIని మాన్యువల్‌గా సరిచేయడం ఆపండి

మీ AI కోడింగ్ టూల్స్ తరచుగా డిజైన్ విషయంలో విఫలమవుతుంటాయి.

మీరు ఒక బటన్ కావాలని అడుగుతారు. AI మీకు ఒక రకమైన బ్లూ షేడ్‌ను ఇస్తుంది. మీరు మరొక కాంపోనెంట్ కావాలని అడిగితే, AI మీకు వేరొక బ్లూ షేడ్‌ను ఇస్తుంది. AI వద్ద కచ్చితమైన డిజైన్ సిస్టమ్ లేకపోవడం వల్ల ఇలా జరుగుతుంది.

దీనిని పరిష్కరించడానికి Google Labs design.mdను విడుదల చేసింది.

ఇది Cursor, Claude Code మరియు GitHub Copilot వంటి టూల్స్ మీ డిజైన్ నియమాలను చదవడానికి అనుమతించే ఒక స్పెసిఫికేషన్. ఇది అస్థిరమైన స్పేసింగ్, తప్పు ఫాంట్లు మరియు మారుతున్న రంగులను నివారిస్తుంది.

ఇది ఎలా పనిచేస్తుంది:

design.md అనేది రెండు భాగాలు కలిగిన ఒక Markdown ఫైల్.

  • YAML Front Matter: ఇందులో ఖచ్చితమైన డిజైన్ టోకెన్లు (design tokens) ఉంటాయి. మీరు ఇక్కడ రంగులు, టైపోగ్రఫీ, స్పేసింగ్ మరియు కార్నర్ రేడియస్‌లను నిర్వచించవచ్చు.
  • Markdown Body: ఇందులో డిజైన్ యొక్క కారణం (design rationale) ఉంటుంది. మీరు ఒక రంగును ఎందుకు ఉపయోగిస్తున్నారు మరియు దానిని ఎప్పుడు ఉపయోగించకూడదు అనే విషయాలను ఇది వివరిస్తుంది.

ఈ నిర్మాణం AI డేటా మరియు లాజిక్ రెండింటినీ అర్థం చేసుకోవడానికి సహాయపడుతుంది. ఇది కేవలం ఒక hex కోడ్‌ను మాత్రమే చూడదు. ఒక నిర్దిష్ట రంగు హెడ్‌లైన్‌ల కోసం అని మరియు దానిని బాడీ టెక్స్ట్ కోసం ఉపయోగించకూడదని ఇది అర్థం చేసుకుంటుంది.

design.md CLI యొక్క ముఖ్య ఫీచర్లు:

  • Linting: మీ టోకెన్లు సరిగ్గా ఉన్నాయో లేదో ఇది తనిఖీ చేస్తుంది. ఇది WCAG AA యాక్సెసిబిలిటీ కాంట్రాస్ట్‌ను కూడా తనిఖీ చేస్తుంది.
  • Diffing: మీరు మీ డిజైన్‌ను అప్‌డేట్ చేసినప్పుడు ఏ టోకెన్లు మారాయో ఇది ఖచ్చితంగా చూపిస్తుంది.
  • Exporting: ఇది మీ డిజైన్ ఫైల్‌ను Tailwind CSS, JSON లేదా W3C Design Tokensగా మారుస్తుంది.
  • Spec: మీ ఫైల్‌ను ఎలా చదవాలో మీ AIకి నేర్పించడానికి మీరు ఇచ్చే ఒక గైడ్‌ను ఇది రూపొందిస్తుంది.

ఇది ఎందుకు ముఖ్యం:

చాలా మంది డెవలపర్లు సాధారణ నియమాల కోసం CLAUDE.md లేదా AGENTS.mdలను ఉపయోగిస్తారు. ఇవి సహాయకరంగా ఉన్నప్పటికీ, ఇవి ఎక్కువగా నేచురల్ లాంగ్వేజ్ (natural language) రూపంలో ఉంటాయి. దీనివల్ల AI ఇప్పటికీ నిర్దిష్ట విలువలను ఊహించాల్సి ఉంటుంది.

design.md మీ డిజైన్ సిస్టమ్‌ను మెషిన్-రీడబుల్ డేటాగా మారుస్తుంది.

దీనిని ఉపయోగించడానికి:

  1. DESIGN.mdని మీ ప్రాజెక్ట్ రూట్ (project root)లో ఉంచండి.
  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