skills.rest
tody-agent
tody-agentCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cm-design-system

Extract design tokens from URLs or sources to scaffold design systems.

48|23|Updated Mar 17, 2026
Search Tags:#mcp#design-system#design-tokens#ui-kit#stitch#token-extraction
One-click install
npx skills add https://github.com/tody-agent/codymaster --skill cm-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cm-design-system
Source: https://github.com/tody-agent/codymaster/tree/main/skills/cm-design-system
Command: npx skills add https://github.com/tody-agent/codymaster --skill cm-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams require a scalable, automated method to extract design tokens, scaffold complete design systems, and manage tokens across projects.

Core Features & Use Cases

  • Token extraction: derive design tokens from existing sources, including colors, typography, spacing, and radii.
  • System scaffolding: generate ready-to-use design system templates from premade kits (Shadcn, Halo, Lunaris, Nitro) or Harvester-driven sources.
  • MCP integration: coordinate Google Stitch and Pencil MCP workflows to produce DESIGN.md and token blocks for UI generation.
  • Use Case: Imagine you need a consistent design system for a new marketing site and a component library; this skill handles extraction and kit-based generation in one workflow.

Quick Start

Provide a target URL or design-kit preference to start extracting tokens or scaffolding a design system.

Frequently Asked Questions about cm-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens from an existing website URL?▼

Design token extraction from a URL captures colors, typography, spacing, and radii to build a structured design system. You provide a target URL to derive tokens and scaffold a complete UI kit from the source.

What is the best way to scaffold a design system for a new component library?▼

Scaffolding a design system from premade kits like Shadcn, Halo, Lunaris, or Nitro generates ready-to-use templates. This automated approach scales token management across web and mobile projects without manual configuration.

Does this design token workflow support Google Stitch and Pencil MCP integrations?▼

Google Stitch and Pencil MCP workflows are fully supported for design token generation. The system coordinates these MCP integrations to produce a DESIGN.md file and structured token blocks for automated UI generation.

Can I use Harvester extraction to pull design tokens from custom sources?▼

Harvester extraction pulls design tokens from custom sources to build a scalable design system. This method automates token derivation for colors, typography, spacing, and radii across web and mobile projects.

What design tokens are included when generating a UI kit from a source?▼

Design tokens generated include colors, typography, spacing, and radii. These tokens are extracted from URLs or premade kits like Shadcn, Halo, Lunaris, and Nitro to ensure UI consistency across projects.

Related Skills

Explore More Design & Creative Skills→
TechsioCZTechsioCZ
2

input-usage

Guide Input atom usage for sizing, variants, and token-first validation in forms.

Official
Basic
supermalangsupermalang

design-import

Convert Google Stitch designs into implementation-ready design specs.

Community
Intermediate
taewook486taewook486

moai-design-tools

Fetch Figma design context and export Pencil designs into React and Tailwind CSS code.

Community
Advanced
octavehqoctavehq

octave-get-brand-components

Capture website design systems to generate reusable component kits with CSS and HTML templates.

Official
Advanced