21 skills · sorted by relevance
Create DESIGN.md files that combine exact design values with explanations for coding agents. Validate file structure and color contrast, compare versions, and export shared design settings to Tailwind or a standard design-token JSON format.
Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.
The English summary is being prepared. Showing the original description.
Generates production-ready design tokens from natural language descriptions. Outputs Tailwind configs, CSS custom properties, and DTCG W3C tokens from 24 trends + 31 AI-ready styles with 2800+ component examples.
The English summary is being prepared. Showing the original description.
対話または既存トークンファイル（W3C DTCG / CSS variables など）をもとに、プロダクトに合った DESIGN.md を生成する。AIがつくるUIに一貫性を。
The English summary is being prepared. Showing the original description.
Generates production-ready design tokens from natural language descriptions. Outputs Tailwind configs, CSS custom properties, and DTCG W3C tokens from 24 trends + 31 AI-ready styles with 2800+ component examples.
The English summary is being prepared. Showing the original description.
Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.
The English summary is being prepared. Showing the original description.
Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
The English summary is being prepared. Showing the original description.
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
The English summary is being prepared. Showing the original description.
Use when you derive, change or extend a design system - where tokens live per stack, the DTCG token tree, role-based names for both themes, base vs layer vs drift, the DESIGN.md section order, the inventory format, the contrast check and the lint every proposal returns
The English summary is being prepared. Showing the original description.
Validate DESIGN.md files against the official Google specification using the `@google/design.md` CLI linter. Works with local files. Use when the user wants to lint a DESIGN.md, check spec compliance, find broken token references, verify WCAG contrast ratios, diff two versions, export tokens to Tailwind or DTCG format, or audit a design system file for structural correctness. Trigger on mentions of "validate DESIGN.md", "lint DESIGN.md", "check my design.md", "design.md spec compliance", "WCAG contrast check", "broken token references", "design token validation", "export design tokens", "diff design systems", "design.md audit", "@google/design.md", "npx design.md lint", "design system validation", "frontmatter tokens", or any request to verify a DESIGN.md file.
The English summary is being prepared. Showing the original description.
Read and write design tokens in W3C DTCG format (tokens.json) and emit CSS, Tailwind, and Mantine outputs. Use when modifying or generating design tokens.
The English summary is being prepared. Showing the original description.
建立设计令牌系统时使用。适用于设计系统建立、跨平台一致性、设计代码同步。优先使用 W3C DTCG 2025.10 标准 + 三层 Token + JSON 输出。
The English summary is being prepared. Showing the original description.
Design token architecture - primitive/semantic/component tiers, naming grammar, CSS custom property delivery, and DTCG build pipelines
The English summary is being prepared. Showing the original description.
Anti-AI-slop design system for distinctive, premium interfaces. Bold typography, dark-first #060610, fluid clamp() type, cascade layers + native nesting + container queries, OKLCH color, @starting-style, View Transitions API, DTCG tokens.
The English summary is being prepared. Showing the original description.
Extract real brands (Wayback for rebuilds). Copy system, headline/CTA rules, trust surfaces, legal pages, SEO+structured data, anti-AI-slop, microcopy, DESIGN.md, W3C DTCG tokens, pSEO 5 types, GEO/AI search.
The English summary is being prepared. Showing the original description.
Derive a type system from a style constraint — font pairings, scale/line-height/weights, DTCG tokens via design-tokens. Use to choose fonts or build a typographic scale.
The English summary is being prepared. Showing the original description.
Author a 3-layer DTCG token system (primitive → semantic → component) with light/dark theming; generate CSS vars + Tailwind colors and lint hardcoded values. Use on design tokens / CSS variables.
The English summary is being prepared. Showing the original description.
Turn a confirmed brand identity into a DTCG tokens.json source of truth — emit CSS vars + Tailwind via design-tokens, export locked brand deck templates.
The English summary is being prepared. Showing the original description.
Use when choosing an animation engine, defining motion tokens, adding scroll effects or micro-interactions, or auditing motion for accessibility and performance. Covers engine selection (GSAP, Motion.dev, Anime.js, React-Spring, Three.js, CSS Native), DTCG motion tokens, and the anti-slop/a11y quality gate.
The English summary is being prepared. Showing the original description.
Use when acting as the authoritative design lead for all frontend work, enforcing brand discovery, Anti-Slop rules, DTCG design tokens, fluid motion, and data-driven design generation.
The English summary is being prepared. Showing the original description.
Author/validate/export Google's DESIGN.md token spec files.
The English summary is being prepared. Showing the original description.