Codymaster cm-design-system

install

source · Clone the upstream repo

git clone https://github.com/tody-agent/codymaster

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/tody-agent/codymaster "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/cm-design-system" ~/.claude/skills/tody-agent-codymaster-cm-design-system && rm -rf "$T"

manifest: skills/cm-design-system/SKILL.md

source content

Goal

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.

Instructions

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.
Harvester Extraction (If applicable):
- Analyze the target visual source.
- Extract semantic colors (Primary, Secondary, Success, Warning, Danger), neutral ramps (50-900), typography scales, spacing tokens, and border radii.
Pre-built UI Kits (Default Mode):
- If the user wants a beautiful design quickly, DO NOT try to generate tokens manually.
- 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
```
  :
  - ```
  shadcn-default.md
```
  (Use this as the absolute DEFAULT if no style is specified)
- ```
halo-modern.md
```
    (Premium dark mode, glowing accents)
  - ```
  lunaris-advanced.md
```
  (Tech-focused, monospaced fonts)
- ```
nitro-enterprise.md
```
    (High-contrast, data-dense enterprise)

Pencil.dev & Google Stitch MCP:

Stitch path: Use
```
DESIGN.md
```
with
```

```
JSON block to feed design tokens into Google Stitch's AI generator via
```
cm-ui-preview
```
.
Pencil path: Use the Pencil MCP tools to create and manage
```
.pen
```
design files directly:

Pencil.dev Workflow:

1. open_document()         → Create/open a .pen file
2. get_guidelines("web-app") → Load design rules for target platform
3. get_style_guide_tags()  → Browse available style tags
4. get_style_guide(tags)   → Get color palette, typography, spacing
5. set_variables()         → Apply design tokens as .pen variables
6. batch_get(reusable:true)→ Read existing design system components
7. batch_design()          → Insert/update components and screens
8. get_screenshot()        → Verify visual output

Mapping DESIGN.md tokens to .pen variables:

mcp_pencil_set_variables({
  filePath: "design-system.pen",
  variables: {
    "primary": { "type": "color", "value": "#3B82F6" },
    "secondary": { "type": "color", "value": "#10B981" },
    "surface": { "type": "color", "value": "#FFFFFF" },
    "text-primary": { "type": "color", "value": "#0F172A" },
    "border-radius": { "type": "number", "value": 8 },
    "spacing-sm": { "type": "number", "value": 8 },
    "spacing-md": { "type": "number", "value": 16 },
    "spacing-lg": { "type": "number", "value": 32 }
  }
})

For UI component rendering against these tokens, you MUST hand off to
```
cm-ui-preview
```
.

IMPORTANT: Never use

view_file

grep_search

.pen

files. Always use

mcp_pencil_batch_get

Export Custom
```
DESIGN.md
```
(Extraction Mode):
- If extracting from a site visually, create the
```
DESIGN.md
```
  document.
- You MUST construct the exact JSON token block wrapped in
```

```
  and
```

```
  .

Examples

Example 1: Extract design from a URL

Input: "Can you extract the design system from stripe.com to use in our project?" Action:

Extract semantic colors: Primary (Blurple), surface colors, typography (Inter), rounded corners.
Build the
```
DESIGN.md
```
including the Stitch STITCH_TOKENS JSON block with these tokens.
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?"

Example 2: Scaffold a new robust design system

Input: "Create a modern dark-mode design system using Halo UI kit." Action:

Generate a premium deep-dark color palette.
Structure the tokens using Halo's spacing and glassmorphic shadow values.
Output
```
DESIGN.md
```
with STITCH_TOKENS.
Provide standard Tailwind config parameters matching the system.

Example 3: Create a design system in Pencil.dev

Input: "Create a design system for our SaaS dashboard directly in Pencil.dev." Action:

Open or create a

.pen

file:

mcp_pencil_open_document({ filePathOrTemplate: "new" })

Load design guidelines:

mcp_pencil_get_guidelines({ topic: "design-system" })

Browse and select a style guide:

mcp_pencil_get_style_guide_tags()

→

mcp_pencil_get_style_guide({ tags: ["saas", "dashboard", "modern", "website", "clean"] })

Apply design tokens via
```
mcp_pencil_set_variables()
```
using the style guide's recommendations.
Create reusable components (buttons, cards, inputs) via
```
mcp_pencil_batch_design()
```
.
Verify with
```
mcp_pencil_get_screenshot()
```
.
Tell the user: "Design system created in
```
design-system.pen
```
. Would you like me to build screens using these components?"

Constraints

🚫 DO NOT generate or build React/Vue UI components directly in this skill. Handoff UI generation to
```
cm-ui-preview
```
.
🚫 DO NOT skip the
```

```
wrapper in
```
DESIGN.md
```
. It is critical for Stitch MCP parsing.
🚫 DO NOT guess accessibility constraints — ensure text-on-background contrast aligns with WCAG AA (handled via
```
cm-ux-master
```
heuristics).
🚫 DO NOT use
```
view_file
```
or
```
grep_search
```
on
```
.pen
```
files. Always use Pencil MCP tools (
```
batch_get
```
,
```
batch_design
```
, etc.).
✅ ALWAYS define a complete neutral scale (50-900) even if the source site only uses a few grays.