DESIGN.md Anatomy: How Tokens and Prose Work Together

·2 views

A DESIGN.md has two parts: YAML front matter with machine-readable design tokens, and a markdown body with human-readable rationale. Tokens give an agent exact values; prose gives it the rules. Pairing them is the format's core insight. The front matter holds your colors, typography, spacing, rounded corners and components as typed values. It opens and closes with three dashes: --- colors: primary: "#1A1C1E" surface: "#FFFFFF" spacing: sm: 8px md: 16px --- This gives the agent precise values to use directly.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

MCP is finally here: stop building REST boilerplate and start shipping

TL;DR: BugiaData MCP is live. Point Cursor, Claude, or Windsurf at a hosted SSE server, paste one config block, and ask your agent for relational fake data with valid foreign keys—no custom REST glue in your repo. If you build with AI agents, you already know the loop: You need realistic test data. You wire up an HTTP client, auth headers, error handling, and JSON parsing. You repeat that for every new tool, every new environment, every new IDE.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

The DESIGN.md CLI: lint, diff, export and spec

The DESIGN.md CLI has four commands, run through npx with no install: lint, diff, export and spec. Together they turn the file from a passive document into something you can validate, compare and convert. $ npx @google/design.md lint DESIGN.md $ npx @google/design.md lint --format json DESIGN.md Lint catches broken token references, flags a missing primary color, and verifies WCAG contrast. It returns structured JSON and exits non-zero on errors, so it works in CI: { "findings": [{ "severity": "warning", "path": "components.button-primary", "message": "contrast 15.42:1 - passes WCAG AA" }], "s

0 comments Read more at DEV Community

ProgrammingDEV Community ·

DESIGN.md, CLAUDE.md, AGENTS.md: The Agent-Context File Family

DESIGN.md, CLAUDE.md and AGENTS.md are plain-text, repo-resident files that give AI coding agents persistent context. CLAUDE.md and AGENTS.md cover code and conventions; DESIGN.md covers the visual identity. Complementary layers an agent reads on every interaction. CLAUDE.md / AGENTS.md -> code & project context (stack, conventions, commands) SKILL.md -> on-demand capabilities DESIGN.md -> the design system (tokens + rationale) Each handles a different concern, and they do not overlap. Separation keeps each focused and lets you adopt them independently.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Sizing a Mac mini M4 for Local AI: An Architect's Breakdown by Task

Every few weeks someone asks me the same question: "Should I buy a Mac mini M4 to run AI locally?" And every time, my answer is the same - that's the wrong question to lead with. The right question is: which task, at what quality, on how much memory? Hardware is the last decision, not the first. I've been chasing the same goal a lot of practitioners have: becoming self-sufficient on local AI so I'm less dependent on cloud LLM subscriptions, without sacrificing output quality. My current Windows machine has no usable GPU, which makes tools like Ollama and LM Studio frustrating at best.

0 comments Read more at DEV Community