- Category
- Developer Tools
- Rank
- No. 222Tools index
- Type
- APP
- Builder
- google-labs-code
- GitHub
- 27.9k stars
- Latest release
- 0.4.0
- Date
About
A format specification for describing a visual identity to coding agents, so they generate consistent, on-brand UI.
What it does
The tool pairs exact design tokens in YAML with plain-language rationale in Markdown. Its command-line utility validates structure and references, checks color contrast, compares revisions, and exports tokens for Tailwind, CSS custom properties, or the W3C token format. Structured JSON output supports automated workflows.
Why it's ranked here
This is a practical bridge between design intent and implementation checks. It covers authoring conventions, validation, change detection, and useful exports in one small package. The typed library API and predictable exit codes also make it suitable for CI, though its schema covers a deliberately narrow slice of design systems.
What's good
The split between normative tokens and explanatory prose gives consumers both exact values and application context. Validation catches broken references, invalid values, weak contrast, misspelled keys, missing typography, and section-order problems. Revision comparison flags regressions, while exports target multiple common token consumers. Unknown sections and extension keys can remain intact.
Tradeoffs
The schema concentrates on colors, typography, spacing, rounding, and a short list of component properties. Interaction variants require separate component entries rather than a richer state model. Unknown component properties only trigger warnings, so extensions may receive little validation. Exports succeed despite lint findings, requiring a separate validation gate. Windows users need the dot-free command alias.
How to use it well
It fits teams that want design decisions stored beside code and checked during pull requests. Establish tokens and rationale together, run validation before exports, and compare revisions in CI to catch regressions. Use the library when custom rules or typed reports matter. It does not create interfaces, manage design assets, or replace visual review and design judgment.
Technical notes+
The root package.json defines a private Bun and Turbo monorepo with packages/* workspaces. packages/cli/src/index.ts registers lint, diff, export, and spec subcommands through citty. packages/cli/src/linter/lint.ts runs parsing, model resolution, lint rules, and Tailwind generation, returning LintReport data exposed by packages/cli/src/linter/index.ts. packages/cli/src/commands/export.ts supports css-tailwind, json-tailwind, tailwind, dtcg, and css-vars, with optional CSS variable prefixes. packages/cli/src/utils.ts accepts files or stdin and defaults output to JSON. Tests appear in packages/cli/src/utils.test.ts, packages/cli/src/version.test.ts, and packages/cli/src/linter/index.test.ts. Source headers declare Apache License 2.0.
Observed
- License
- Apache License 2.0, declared in source headers
- Primary language
- TypeScript
- Packaging
- Published npm package with direct npx execution; repository uses Bun workspaces and Turbo
- Interfaces
- Command-line interface and typed programmatic library API
- CLI surface
- Validation, revision comparison, token export, and specification output
- Export targets
- Tailwind v3 JSON, Tailwind v4 CSS, W3C design tokens, and CSS custom properties
- Platform support
- A dot-free command alias is provided for Windows command resolution
- Repository structure
- Private monorepo root with package workspaces and colocated Bun tests
Read from README.md, package.json, packages/cli/src/index.ts, packages/cli/src/utils.ts, packages/cli/src/version.ts, packages/cli/src/utils.test.ts, packages/cli/src/version.test.ts, packages/cli/scripts/check-package.ts, packages/cli/src/linter/lint.ts, packages/cli/src/linter/index.ts, packages/cli/src/commands/diff.ts, packages/cli/src/commands/lint.ts, packages/cli/src/commands/spec.ts, packages/cli/src/commands/export.ts, packages/cli/src/linter/index.test.ts.
Intel on DESIGN.md
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.