cm-design-system

Name: cm-design-system
Author: tody-agent

47stars23forks

How to install cm-design-system?

tody-agent/codymaster/cm-design-system

$npx -y skills add tody-agent/codymaster --skill cm-design-system

Installs into the current project.

Summary

Ultimate Design System Intelligence. Manage, extract, replicate, and improve UI design systems. Extracts design tokens visually from existing sites (Harvester v5), manages multi-page tokens, and utilizes MCP servers like Google Stitch and Pencil.dev to generate complete, consiste

Files · 1

View on GitHub

SKILL.md

1	# Goal
2	Establish a robust, stable, and consistent UI Design System by either extracting tokens from an existing source (Harvester mode) or scaffolding a fresh system based on premium Kits (Shadcn, Halo, Lunaris, Nitro). Output a strictly formatted `DESIGN.md` artifact ready for UI generation.
3
4	# Instructions
5	0. Load Design Taste (if `.cm/design-taste.json` exists): Before proposing tokens, call `topTaste(cwd, 'color')`, `topTaste(cwd, 'font')`, `topTaste(cwd, 'layout')` from `src/utils/design-taste.ts`. Bias selections toward `approved` entries; avoid `rejected`. Decay is 5 %/week so stale taste fades — trust live weights. After the user accepts or rejects a palette, call `recordTaste(cwd, { dimension, value, verdict })` so future runs improve.
6	1. Clarify Intent: Determine if the user wants to extract an existing design from a URL/Image or create a new system from a specific UI Kit.
7	2. Harvester Extraction (If applicable):
8	- Analyze the target visual source.
9	- Extract semantic colors (Primary, Secondary, Success, Warning, Danger), neutral ramps (50-900), typography scales, spacing tokens, and border radii.
10	3. Pre-built UI Kits (Default Mode):
11	- If the user wants a beautiful design quickly, DO NOT try to generate tokens manually.
12	- Instead, copy one of the pre-built design systems from `skills/cm-design-system/resources/` into the project's `.stitch/DESIGN.md` or pass directly to `cm-ui-preview`:
13	- `shadcn-default.md` (Use this as the absolute DEFAULT if no style is specified)
14	- `halo-modern.md` (Premium dark mode, glowing accents)
15	- `lunaris-advanced.md` (Tech-focused, monospaced fonts)
16	- `nitro-enterprise.md` (High-contrast, data-dense enterprise)
17	4. Pencil.dev & Google Stitch MCP:
18	- Stitch path: Use `DESIGN.md` with `<!-- STITCH_TOKENS_START -->` JSON block to feed design tokens into Google Stitch's AI generator via `cm-ui-preview`.
19	- Pencil path: Use the Pencil MCP tools to create and manage `.pen` design files directly:
20
21	Pencil.dev Workflow:
22	```
23	1. open_document() → Create/open a .pen file
24	2. get_guidelines("web-app") → Load design rules for target platform
25	3. get_style_guide_tags() → Browse available style tags
26	4. get_style_guide(tags) → Get color palette, typography, spacing
27	5. set_variables() → Apply design tokens as .pen variables
28	6. batch_get(reusable:true)→ Read existing design system components
29	7. batch_design() → Insert/update components and screens
30	8. get_screenshot() → Verify visual output
31	```
32
33	Mapping DESIGN.md tokens to .pen variables:
34	```javascript
35	mcp_pencil_set_variables({
36	filePath: "design-system.pen",
37	variables: {
38	"primary": { "type": "color", "value": "#3B82F6" },
39	"secondary": { "type": "color", "value": "#10B981" },
40	"surface": { "type": "color", "value": "#FFFFFF" },
41	"text-primary": { "type": "color", "value": "#0F172A" },
42	"border-radius": { "type": "number", "value": 8 },
43	"spacing-sm": { "type": "number", "value": 8 },
44	"spacing-md": { "type": "number", "value": 16 },
45	"spacing-lg": { "type": "number", "value": 32 }
46	}
47	})
48	```
49
50	- For UI component rendering against these tokens, you MUST hand off to `cm-ui-preview`.
51	- IMPORTANT: Never use `view_file` or `grep_search` on `.pen` files. Always use `mcp_pencil_batch_get`.
52	5. Export Custom `DESIGN.md` (Extraction Mode):
53	- If extracting from a site visually, create the `DESIGN.md` document.
54	- You MUST construct the exact JSON token block wrapped in `<!-- STITCH_TOKENS_START -->` and `<!-- STITCH_TOKENS_END -->`.
55
56	# Examples
57
58	## Example 1: Extract design from a URL
59	Input: "Can you extract the design system from stripe.com to use in our project?"
60	Action:
61	1. Extract semantic colors: Primary (Blurple), surface colors, typography (Inter), rounded corners.
62	2. Build the `DESIGN.md` including the Stitch STITCH_TOKENS JSON block with these tokens.
63	3. Tell the user: "Extraction complete. I've saved the tokens in `DESIGN.md`. Would you like me to hand this off to `cm-ui-preview` to generate components?"
64
65	## Example 2: Scaffold a new robust design system
66	Input: "Create a modern dark-mode design system using Halo UI kit."
67	Action:
68	1. Generate a premium deep-dark color palette.
69	2. Structure the tokens using Halo's spacing and glassmorphic shadow valu

People who liked this also viewed

6 picks

Type

cm-design-system

47stars23forks

View on GitHub

How to install cm-design-system?

tody-agent/codymaster/cm-design-system

$npx -y skills add tody-agent/codymaster --skill cm-design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Goal
2	Establish a robust, stable, and consistent UI Design System by either extracting tokens from an existing source (Harvester mode) or scaffolding a fresh system based on premium Kits (Shadcn, Halo, Lunaris, Nitro). Output a strictly formatted `DESIGN.md` artifact ready for UI generation.
3
4	# Instructions
5	0. Load Design Taste (if `.cm/design-taste.json` exists): Before proposing tokens, call `topTaste(cwd, 'color')`, `topTaste(cwd, 'font')`, `topTaste(cwd, 'layout')` from `src/utils/design-taste.ts`. Bias selections toward `approved` entries; avoid `rejected`. Decay is 5 %/week so stale taste fades — trust live weights. After the user accepts or rejects a palette, call `recordTaste(cwd, { dimension, value, verdict })` so future runs improve.
6	1. Clarify Intent: Determine if the user wants to extract an existing design from a URL/Image or create a new system from a specific UI Kit.
7	2. Harvester Extraction (If applicable):
8	- Analyze the target visual source.
9	- Extract semantic colors (Primary, Secondary, Success, Warning, Danger), neutral ramps (50-900), typography scales, spacing tokens, and border radii.
10	3. Pre-built UI Kits (Default Mode):
11	- If the user wants a beautiful design quickly, DO NOT try to generate tokens manually.
12	- Instead, copy one of the pre-built design systems from `skills/cm-design-system/resources/` into the project's `.stitch/DESIGN.md` or pass directly to `cm-ui-preview`:
13	- `shadcn-default.md` (Use this as the absolute DEFAULT if no style is specified)
14	- `halo-modern.md` (Premium dark mode, glowing accents)
15	- `lunaris-advanced.md` (Tech-focused, monospaced fonts)
16	- `nitro-enterprise.md` (High-contrast, data-dense enterprise)
17	4. Pencil.dev & Google Stitch MCP:
18	- Stitch path: Use `DESIGN.md` with `<!-- STITCH_TOKENS_START -->` JSON block to feed design tokens into Google Stitch's AI generator via `cm-ui-preview`.
19	- Pencil path: Use the Pencil MCP tools to create and manage `.pen` design files directly:
20
21	Pencil.dev Workflow:
22	```
23	1. open_document() → Create/open a .pen file
24	2. get_guidelines("web-app") → Load design rules for target platform
25	3. get_style_guide_tags() → Browse available style tags
26	4. get_style_guide(tags) → Get color palette, typography, spacing
27	5. set_variables() → Apply design tokens as .pen variables
28	6. batch_get(reusable:true)→ Read existing design system components
29	7. batch_design() → Insert/update components and screens
30	8. get_screenshot() → Verify visual output
31	```
32
33	Mapping DESIGN.md tokens to .pen variables:
34	```javascript
35	mcp_pencil_set_variables({
36	filePath: "design-system.pen",
37	variables: {
38	"primary": { "type": "color", "value": "#3B82F6" },
39	"secondary": { "type": "color", "value": "#10B981" },
40	"surface": { "type": "color", "value": "#FFFFFF" },
41	"text-primary": { "type": "color", "value": "#0F172A" },
42	"border-radius": { "type": "number", "value": 8 },
43	"spacing-sm": { "type": "number", "value": 8 },
44	"spacing-md": { "type": "number", "value": 16 },
45	"spacing-lg": { "type": "number", "value": 32 }
46	}
47	})
48	```
49
50	- For UI component rendering against these tokens, you MUST hand off to `cm-ui-preview`.
51	- IMPORTANT: Never use `view_file` or `grep_search` on `.pen` files. Always use `mcp_pencil_batch_get`.
52	5. Export Custom `DESIGN.md` (Extraction Mode):
53	- If extracting from a site visually, create the `DESIGN.md` document.
54	- You MUST construct the exact JSON token block wrapped in `<!-- STITCH_TOKENS_START -->` and `<!-- STITCH_TOKENS_END -->`.
55
56	# Examples
57
58	## Example 1: Extract design from a URL
59	Input: "Can you extract the design system from stripe.com to use in our project?"
60	Action:
61	1. Extract semantic colors: Primary (Blurple), surface colors, typography (Inter), rounded corners.
62	2. Build the `DESIGN.md` including the Stitch STITCH_TOKENS JSON block with these tokens.
63	3. Tell the user: "Extraction complete. I've saved the tokens in `DESIGN.md`. Would you like me to hand this off to `cm-ui-preview` to generate components?"
64
65	## Example 2: Scaffold a new robust design system
66	Input: "Create a modern dark-mode design system using Halo UI kit."
67	Action:
68	1. Generate a premium deep-dark color palette.
69	2. Structure the tokens using Halo's spacing and glassmorphic shadow valu

People who liked this also viewed

6 picks

Type