Skill

stitch-tokens

This skill should be used when the user wants to extract design tokens from DESIGN.md and generate platform-specific token files (Swift, CSS custom properties, Tailwind config). It provides bidirectional sync between Stitch design tokens and code. Triggers: 'extract tokens', 'sync design system', 'generate color constants', 'generate typography constants', 'convert DESIGN.md to code', 'pull colors and typography', 'update my colors', 'regenerate theme file', 'token file is outdated', 'sync colors from DESIGN.md'.

Install

npx claudepluginhub ildunari/kosta-plugins --plugin stitch-studio

Tool Access

This skill uses the workspace's default tool permissions.

Preview

You extract design tokens from DESIGN.md files and generate type-safe, platform-specific token code. You also detect drift between DESIGN.md and existing code tokens.

Supporting Assets

examples/DESIGN.mdreferences/design-md-schema.mdscripts/parse-design-md.py

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.1k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

claude-code-plugin-release

1 file

Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.

claude-mem

64.7k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitMar 30, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Stitch Tokens

You extract design tokens from DESIGN.md files and generate type-safe, platform-specific token code. You also detect drift between DESIGN.md and existing code tokens.

Reference Files

File	Read when...
`references/design-md-schema.md`	Checking DESIGN.md structure or extending it
`scripts/parse-design-md.py`	Automating token extraction from DESIGN.md
`examples/DESIGN.md`	Seeing a complete example design system

Extract Mode (DESIGN.md → Code)

Read DESIGN.md (from project root, Design/ directory, or user-specified path)
Parse into structured categories: colors, typography, spacing, radii, shadows, layout
Detect project type (Swift, CSS, Tailwind, React)
Generate token files for detected platform(s)
If existing token files exist, show a diff before writing
Write files only after user confirmation

Import Mode (URL → DESIGN.md → Code)

User provides a URL or DESIGN.md content
If URL: guide user to use Stitch's Brand Kit import, then provide the DESIGN.md
Run Extract mode on the result

Drift Detection

Compare existing code tokens against DESIGN.md:

Colors that exist in code but not in DESIGN.md (orphans)
Colors in DESIGN.md not yet in code (missing)
Values that differ between DESIGN.md and code (conflicts)
Report as a table with recommendations

Platform-Specific Generation

Swift (iOS/macOS):

Generate Color extensions with hex initializer
Generate Font constants using .system(size:weight:)
Generate spacing/radius CGFloat constants
Generate a Theme @Observable object that groups all tokens
Follow project conventions if existing Design/System/ structure found

CSS Custom Properties:

Generate :root block with --color-*, --font-*, --spacing-* variables
Include dark mode via prefers-color-scheme media query

Tailwind:

Generate theme.extend block for tailwind.config.js
Map colors, fonts, spacing to Tailwind naming conventions

Token Naming Convention

Colors: primary, secondary, background, surface, error, text-primary, text-secondary, accent, border, muted
Typography: heading1-4, body, bodyLarge, caption, overline, code
Spacing: xs(4), sm(8), md(16), lg(24), xl(32), xxl(48)
Radii: sm(4), md(8), lg(12), xl(16), full(9999)

Anti-patterns

Never hardcode hex values in generated views — always reference tokens
Never overwrite existing token files without showing diff first
Never generate tokens without checking for an existing design system structure