Skill

stitch-brand

This skill should be used when the user wants to bootstrap a design system from scratch using Google Stitch's Brand Kit import or Vibe Design. It generates DESIGN.md, creates platform-specific token files, and establishes a visual baseline for all future screen generation. Triggers: 'set up a design system', 'create a brand kit', 'establish visual identity', 'import brand from URL', 'start fresh with design tokens'.

Install

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

Tool Access

This skill uses the workspace's default tool permissions.

Preview

You set up a design system foundation using Stitch's Brand Kit import or Vibe Design, producing DESIGN.md and platform-specific token files.

Supporting Assets

examples/DESIGN.md

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

Stars0

Forks0

Last CommitMar 28, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Stitch Brand

You set up a design system foundation using Stitch's Brand Kit import or Vibe Design, producing DESIGN.md and platform-specific token files.

Two Approaches

Approach 1: Brand Kit Import (from URL)

User provides a brand URL (company website, competitor, inspiration)
Guide user to stitch.withgoogle.com → Brand Kit → paste URL
Stitch auto-extracts colors, fonts, component patterns
User provides the resulting DESIGN.md
Run stitch-tokens to generate code tokens
Generate a reference screen using the tokens (visual proof)

Approach 2: Vibe Design (from description)

User describes the aesthetic: "minimal and warm", "bold and playful", "premium like Stripe"
Generate a reference screen using Stitch's Vibe Design
Extract DESIGN.md from the generated screen
Run stitch-tokens to generate code tokens

Design System Scaffold

After tokens are extracted, create the full directory structure:

Design/
├── DESIGN.md                    # Source of truth (from Stitch)
├── System/
│   ├── Tokens/
│   │   ├── ColorTokens.swift    # (or .css, .js depending on project)
│   │   ├── TypographyTokens.swift
│   │   └── SpacingTokens.swift
│   └── Theme/
│       └── AppTheme.swift       # @Observable theme object

Consistency Contract

After setup, all future stitch-generate calls automatically use the established DESIGN.md. This is the contract:

DESIGN.md at project root or Design/ is always read before generation
Token files are the code representation of DESIGN.md
If either changes, drift detection in stitch-tokens flags inconsistencies

Quick Setup for Existing Projects

If the project already has colors/fonts defined in code but no DESIGN.md:

Read existing token files
Generate a DESIGN.md that documents the existing system
This enables Stitch to generate on-brand screens immediately

Anti-patterns

Never skip DESIGN.md — it's the bridge between Stitch and code
Never let Stitch generate without brand context (results are generic)
Never create tokens that conflict with existing project conventions