Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From stitch-studio
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'.
npx claudepluginhub ildunari/kosta-plugins --plugin stitch-studioHow this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-studio:stitch-brandThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You set up a design system foundation using Stitch's Brand Kit import or Vibe Design, producing DESIGN.md and platform-specific token files.
Generates reusable design systems or UI kits from brands, codebases, Figma files, products, or screenshots. Outputs to ./opendesign/design-systems/<name>/ with tokens, JSX components, assets, and docs.
Generates BRAND-IDENTITY.md file defining colors, typography, spacing, components, accessibility, and responsive design for project roots. Guides via discovery questions or uses user-provided tokens.
Extracts design tokens from existing sites and generates consistent UI design systems using Shadcn UI, Halo, Lunaris, or Nitro kits with MCP servers.
Share bugs, ideas, or general feedback.
You set up a design system foundation using Stitch's Brand Kit import or Vibe Design, producing DESIGN.md and platform-specific token files.
Approach 1: Brand Kit Import (from URL)
Approach 2: Vibe Design (from description)
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
After setup, all future stitch-generate calls automatically use the established DESIGN.md. This is the contract:
If the project already has colors/fonts defined in code but no DESIGN.md: