[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-designmd-agent-ready-ui-specs-en":3,"article-related-designmd-agent-ready-ui-specs-en":32,"series-industry-7f9867eb-30df-48d7-9ca0-a38c2fc75394":79},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":24,"views":28,"created_at":29,"published_at":30,"topic_cluster_id":31},"7f9867eb-30df-48d7-9ca0-a38c2fc75394","designmd-agent-ready-ui-specs-en","design.md turns brand tokens into agent-ready UI specs","\u003Cp data-speakable=\"summary\">design.md gives coding agents a persistent, structured \u003Ca href=\"\u002Fnews\u002Fclaude-design-assets-to-design-system-en\">design system\u003C\u002Fa> spec.\u003C\u002Fp>\u003Cp>design.md turns a visual identity into a file agents can lint, diff, and export, with one repo showing 16k stars and a CLI that outputs JSON for automation.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Item\u003C\u002Fth>\u003Cth>What it does\u003C\u002Fth>\u003Cth>Notable detail\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>design.md format\u003C\u002Ftd>\u003Ctd>Stores tokens plus prose\u003C\u002Ftd>\u003Ctd>YAML front matter and Markdown body\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>lint\u003C\u002Ftd>\u003Ctd>Checks structure and contrast\u003C\u002Ftd>\u003Ctd>Exit code 1 on errors\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>diff\u003C\u002Ftd>\u003Ctd>Compares design versions\u003C\u002Ftd>\u003Ctd>Flags token-level regressions\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>export\u003C\u002Ftd>\u003Ctd>Converts tokens for other systems\u003C\u002Ftd>\u003Ctd>Tailwind, CSS, and DTCG outputs\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>1. The file format itself\u003C\u002Fh2>\u003Cp>At the center of the project is a simple idea: a design system can be described in one file that agents can read without guessing. The format combines machine-readable YAML front matter with Markdown prose, so the file carries exact \u003Ca href=\"\u002Ftag\u002Ftoken\">token\u003C\u002Fa> values and the reasoning behind them.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781947068272-459j.png\" alt=\"design.md turns brand tokens into agent-ready UI specs\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>That split matters because the tokens are normative while the prose explains intent. An \u003Ca href=\"\u002Ftag\u002Fagent\">agent\u003C\u002Fa> can use \u003Ccode>{colors.primary}\u003C\u002Fcode> or \u003Ccode>{rounded.sm}\u003C\u002Fcode> exactly, then read the surrounding sections to understand whether the system wants matte, journalistic, minimal, or gallery-like output.\u003C\u002Fp>\u003Cul>\u003Cli>Top layer: YAML front matter\u003C\u002Fli>\u003Cli>Second layer: Markdown sections like Overview, Colors, Typography, and Components\u003C\u002Fli>\u003Cli>Token types include colors, dimensions, typography objects, and component maps\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>2. The lint command\u003C\u002Fh2>\u003Cp>The \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgoogle-labs-code\u002Fdesign.md\">design.md\u003C\u002Fa> CLI includes a linter that checks whether the file matches the spec, whether token references resolve, and whether contrast ratios pass WCAG thresholds. It returns structured JSON, which makes it easy for agents and scripts to act on findings instead of scraping plain text.\u003C\u002Fp>\u003Cp>The repo’s example shows a warning for a button text color on a dark background, along with a contrast ratio of 15.42:1 and a summary count of errors, warnings, and info. The command also supports stdin, so you can pipe a file in and keep the workflow inside a shell or CI job.\u003C\u002Fp>\u003Ccode>npx @google\u002Fdesign.md lint DESIGN.md\ncat DESIGN.md | npx @google\u002Fdesign.md lint -\n# Exit code: 1 if errors are found\u003C\u002Fcode>\u003Ch2>3. The diff command\u003C\u002Fh2>\u003Cp>For teams that iterate on brand systems, the diff command is the practical guardrail. It compares two DESIGN.md files and reports token additions, removals, and modifications, along with a regression flag if the newer file gets worse on errors or warnings.\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781947064306-8e1u.png\" alt=\"design.md turns brand tokens into agent-ready UI specs\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>That makes it useful for design reviews, release checks, and agent workflows that need to know whether a change altered the system in a meaningful way. In the sample output, a color token changes from tertiary to accent, while typography stays untouched.\u003C\u002Fp>\u003Cul>\u003Cli>Input: before and after DESIGN.md files\u003C\u002Fli>\u003Cli>Output: token-level change report in JSON\u003C\u002Fli>\u003Cli>Regression signal: true when the later file gets worse\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>4. The export command\u003C\u002Fh2>\u003Cp>One of the strongest parts of the spec is that the same source can feed other design pipelines. The export command converts DESIGN.md tokens into Tailwind v3 theme.extend config, Tailwind v4 CSS theme blocks, or DTCG-compliant JSON.\u003C\u002Fp>\u003Cp>This is useful when your source of truth lives in DESIGN.md but your implementation needs a different format. Rather than manually rewriting colors, spacing, and component values, you can generate the target format and keep the token set aligned across tools.\u003C\u002Fp>\u003Ccode>npx @google\u002Fdesign.md export --format json-tailwind DESIGN.md\nnpx @google\u002Fdesign.md export --format css-tailwind DESIGN.md\nnpx @google\u002Fdesign.md export --format dtcg DESIGN.md\u003C\u002Fcode>\u003Ch2>5. The Windows-friendly CLI details\u003C\u002Fh2>\u003Cp>The project also pays attention to real-world command-line friction. On Windows, invoking the package directly as \u003Ccode>design.md\u003C\u002Fcode> can collide with Markdown file association, so the docs recommend the dot-free \u003Ccode>designmd\u003C\u002Fcode> alias when running from a package.json script.\u003C\u002Fp>\u003Cp>That small detail prevents a common failure mode for teams that automate linting in scripts. The same alias resolves to the same entrypoint, and the docs also note that \u003Ca href=\"\u002Ftag\u002Fnpm\">npm\u003C\u002Fa> registry misconfiguration can cause ENOVERSIONS errors if the package is not being fetched from the public registry.\u003C\u002Fp>\u003Cul>\u003Cli>Use \u003Ccode>designmd lint DESIGN.md\u003C\u002Fcode> in scripts on Windows\u003C\u002Fli>\u003Cli>Check \u003Ccode>npm config get registry\u003C\u002Fcode> if installs fail\u003C\u002Fli>\u003Cli>The package publishes as \u003Ccode>@google\u002Fdesign.md\u003C\u002Fcode> on npm\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>How to decide\u003C\u002Fh2>\u003Cp>Pick DESIGN.md if you want a design system format that agents can parse, validate, compare, and export without losing the human context behind the tokens. It fits teams that already care about token hygiene, contrast checks, and reproducible UI output.\u003C\u002Fp>\u003Cp>If your workflow is mostly code-first and you need a bridge between brand intent and implementation, this format is a better fit than a loose style guide. If you need fewer moving parts, start with the file format and lint command, then add diff and export once your team wants version control and downstream generation.\u003C\u002Fp>","4 ways design.md gives coding agents persistent design-system context and checks tokens, contrast, and regressions.","github.com","https:\u002F\u002Fgithub.com\u002Fgoogle-labs-code\u002Fdesign.md",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781947068272-459j.png","industry","en","35538382-b124-4903-94cc-ccfdee792f8b",[17,18,19,20,21,22,23],"design tokens","design system","AI coding agents","CLI","Tailwind","WCAG contrast","JSON output",[25,26,27],"design.md combines exact tokens with prose so agents get both values and intent.","The CLI can lint, diff, and export design systems in structured JSON and target formats.","Windows users should prefer the designmd alias in package scripts to avoid .md command issues.",0,"2026-06-20T09:17:20.913274+00:00","2026-06-20T09:17:20.906+00:00","d19fc184-5852-4c4d-9ec0-db0c4841ac17",{"tags":33,"relatedLang":38,"relatedPosts":42},[34,36],{"name":19,"slug":35},"ai-coding-agents",{"name":20,"slug":37},"cli",{"id":15,"slug":39,"title":40,"language":41},"designmd-agent-ready-ui-specs-zh","design.md 把品牌 token 變成可執行 UI 規格","zh",[43,49,55,61,67,73],{"id":44,"slug":45,"title":46,"cover_image":47,"image_url":47,"created_at":48,"category":13},"92b6d981-2649-4c4f-a3bb-539c206861f7","solana-1000-target-fantasy-not-forecast-en","Solana’s $1,000 target is fantasy, not a forecast","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781956970314-ayh5.png","2026-06-20T12:02:19.637104+00:00",{"id":50,"slug":51,"title":52,"cover_image":53,"image_url":53,"created_at":54,"category":13},"b94d42b2-d124-4f93-98f7-305f60799562","wso2-600m-sale-open-source-enterprise-software-en","WSO2’s $600M sale caps a 20-year open-source run","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781951573378-b4r4.png","2026-06-20T10:32:31.01869+00:00",{"id":56,"slug":57,"title":58,"cover_image":59,"image_url":59,"created_at":60,"category":13},"36d8e7b0-ce1b-4870-b1ee-fae9ae5e2356","google-ax-resumable-agent-runtime-en","Google AX turns agent runs into resumable jobs","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781950658549-zc18.png","2026-06-20T10:17:16.910807+00:00",{"id":62,"slug":63,"title":64,"cover_image":65,"image_url":65,"created_at":66,"category":13},"2c317df8-4070-4c74-bab5-48f79fe2860e","claude-vs-gpt-vs-gemini-coding-benchmark-leaderboard-en","Claude vs GPT vs Gemini: Coding Benchmark Leaderboard","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781939876788-ivgw.png","2026-06-20T07:17:35.473285+00:00",{"id":68,"slug":69,"title":70,"cover_image":71,"image_url":71,"created_at":72,"category":13},"e018e62b-a712-4e2c-aee6-21fb492b993a","clip-converter-rivals-faster-safer-2026-en","Clip Converter’s 2026 rivals are faster and safer","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781935360953-hmtl.png","2026-06-20T06:02:19.249403+00:00",{"id":74,"slug":75,"title":76,"cover_image":77,"image_url":77,"created_at":78,"category":13},"e5877eb6-413d-46f3-b91e-3c4139b5e1f9","openai-sora-shutdown-unit-economics-en","OpenAI’s Sora shutdown proves hype can’t outrun unit economics","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1781933563230-w87h.png","2026-06-20T05:32:17.714689+00:00",[80,85,90,95,100,105,110,115,120,125],{"id":81,"slug":82,"title":83,"created_at":84},"d35a1bd9-e709-412e-a2df-392df1dc572a","ai-impact-2026-developments-market-en","AI's Impact in 2026: Key Developments and Market Shifts","2026-03-25T16:20:33.205823+00:00",{"id":86,"slug":87,"title":88,"created_at":89},"5ed27921-5fd6-492e-8c59-78393bf37710","trumps-ai-legislative-framework-en","Trump's AI Legislative Framework: What's Inside?","2026-03-25T16:22:20.005325+00:00",{"id":91,"slug":92,"title":93,"created_at":94},"e454a642-f03c-4794-b185-5f651aebbaca","nvidia-gtc-2026-key-highlights-innovations-en","NVIDIA GTC 2026: Key Highlights and Innovations","2026-03-25T16:22:47.882615+00:00",{"id":96,"slug":97,"title":98,"created_at":99},"0ebb5b16-774a-4922-945d-5f2ce1df5a6d","claude-usage-diversifies-learning-curves-en","Claude Usage Diversifies, Learning Curves Emerge","2026-03-25T16:25:50.770376+00:00",{"id":101,"slug":102,"title":103,"created_at":104},"69934e86-2fc5-4280-8223-7b917a48ace8","openclaw-ai-commoditization-concerns-en","OpenClaw's Rise Raises Concerns of AI Model Commoditization","2026-03-25T16:26:30.582047+00:00",{"id":106,"slug":107,"title":108,"created_at":109},"b4b2575b-2ac8-46b2-b90e-ab1d7c060797","google-gemini-ai-rollout-2026-en","Google's Gemini AI Rollout Extended to 2026","2026-03-25T16:28:14.808842+00:00",{"id":111,"slug":112,"title":113,"created_at":114},"6e18bc65-42ae-4ad0-b564-67d7f66b979e","meta-llama4-fabricated-results-scandal-en","Meta's Llama 4 Scandal: Fabricated AI Test Results Unveiled","2026-03-25T16:29:15.482836+00:00",{"id":116,"slug":117,"title":118,"created_at":119},"bf888e9d-08be-4f47-996c-7b24b5ab3500","accenture-mistral-ai-deployment-en","Accenture and Mistral AI Team Up for AI Deployment","2026-03-25T16:31:01.894655+00:00",{"id":121,"slug":122,"title":123,"created_at":124},"5382b536-fad2-49c6-ac85-9eb2bae49f35","mistral-ai-high-stakes-2026-en","Mistral AI: Facing High Stakes in 2026","2026-03-25T16:31:39.941974+00:00",{"id":126,"slug":127,"title":128,"created_at":129},"9da3d2d6-b669-4971-ba1d-17fdb3548ed5","cursors-meteoric-rise-pressures-en","Cursor's Meteoric Rise Faces Industry Pressures","2026-03-25T16:32:21.899217+00:00"]