Terrazzo
CLIDesign token CLI (formerly Cobalt UI): reads W3C DTCG tokens for color, type, spacing and more, validates them and generates CSS, Sass, JS/TS, Swift, Tailwind and other code via plugins. Runs in CI so design specs flow into code automatically. Needs a Node.js project.
⛋ Terrazzo Monorepo
This repo serves as the home for:
- Terrazzo CLI: generate code from DTCG tokens (formerly known as “Cobalt UI”)
- Terrazzo Color Picker, a futuristic colorpicker that can handle wide gamut and high bit-depth colors in stunning color reproduction
- Token Lab (coming soon): generate design systems from scratch, or start from an existing OSS design system
🔹 Cobalt UI
Cobalt UI 2.0 was renamed to Terrazzo (same project, same people). To see the code for Cobalt 1.0, see the 1.x branch.
Ähnliche Ressourcen
designlang
CLIReads any website's design system in a headless browser and exports DTCG design tokens, Tailwind config, Figma variables and a brand guide in one command, scoring contrast and cross-page consistency. Also an MCP server or Claude Code plugin. Needs Node.js and Chromium or Chrome.
Manavarya09/design-extract4.2k
DESIGN.md
CLIGoogle Labs' DESIGN.md format and CLI: designers capture colors, typography and spacing in a file for agents; lint checks broken references and WCAG contrast, diff compares versions and export outputs design tokens for Tailwind and more. Needs Node.js; the format is in alpha.
google-labs-code/design.md28.4k
Tailwind CSS
SkillGeneral guidance for building UI with Tailwind CSS: responsive and state variants, dark mode, sparing arbitrary values, components before @apply, and pitfalls such as dynamically built class names missing in production, with button and hero examples.
MengTo/Skills6.8k
Landing Page Design
SkillBuilds landing pages in two halves: intake questions, page structure, layout choice, conversion copy and SEO first, then a strict visual system for fonts, Tailwind type scale, spacing, radius, backgrounds, icons and motion. The rules are opinionated, e.g. no Inter font and no background gradients.
elayadesign/ai-design-skills2.7k
Budge
SkillWhen the agent changes a single CSS value or Tailwind class in a Next.js App Router project, a floating bar appears on the page so you can fine-tune it with arrow keys before persisting. Loads a runtime script from budge.design in app/layout.tsx.
millionco/skills34
UnoCSS
SkillReference for UnoCSS, the atomic CSS engine: config, rules, shortcuts, theme and variants, presets like Wind3, Wind4, Icons and Attributify, and Vite and Nuxt setup. Tells the agent to check uno.config first and stick to plain classes when unsure. Generated by Anthony Fu from official docs.
antfu/skills6k