Skip to content

Commit 5b285c3

Browse files
freemafreema
authored
Merge pull request #9 from freema/feature/claude-plugin
feat: Add Claude Code plugin
2 parents 5ce9de3 + 24604f9 commit 5b285c3

9 files changed

Lines changed: 286 additions & 1 deletion

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mcp-design-system-extractor",
3-
"version": "1.1.0",
3+
"version": "1.1.1",
44
"description": "Simplified MCP server for Storybook design system extraction with component analysis tools",
55
"author": "graslt",
66
"license": "MIT",

‎plugins/claude/design-system/.claude-plugin/plugin.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "design-system",
3+
"description": "Extract components from Storybook design systems. Get HTML, styles, themes, and component metadata for AI-assisted UI development.",
4+
"version": "1.1.1",
5+
"author": {
6+
"name": "Tomáš Grasl",
7+
"url": "https://www.tomasgrasl.cz/"
8+
},
9+
"repository": "https://github.com/freema/mcp-design-system-extractor",
10+
"license": "MIT"
11+
}

‎plugins/claude/design-system/.mcp.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"mcpServers": {
3+
"design-system": {
4+
"command": "npx",
5+
"args": ["-y", "mcp-design-system-extractor@latest"]
6+
}
7+
}
8+
}

‎plugins/claude/design-system/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Design System Extractor Plugin for Claude Code
2+
3+
Extract components, HTML, styles, and themes from Storybook design systems for AI-assisted UI development.
4+
5+
## What's Included
6+
7+
- **MCP Server** - Connects Claude Code to Storybook instances
8+
- **Skills** - Auto-triggers when building UIs with design systems
9+
- **Agents** - `ui-builder` for component-based development
10+
- **Commands** - `/design:list`, `/design:extract`, `/design:theme`
11+
12+
## Installation
13+
14+
```bash
15+
claude plugin install design-system
16+
```
17+
18+
**Required environment variable:**
19+
```
20+
STORYBOOK_URL=http://localhost:6006
21+
```
22+
23+
## Commands
24+
25+
### /design:list
26+
27+
List all components in the design system:
28+
29+
```
30+
/design:list
31+
/design:list buttons
32+
/design:list --category=forms
33+
```
34+
35+
### /design:extract
36+
37+
Extract HTML from a component:
38+
39+
```
40+
/design:extract button--primary
41+
/design:extract card--default
42+
```
43+
44+
### /design:theme
45+
46+
Get design system theme (colors, spacing, typography):
47+
48+
```
49+
/design:theme
50+
/design:theme colors
51+
```
52+
53+
## Agents
54+
55+
Spawn the UI builder for focused development:
56+
57+
```
58+
spawn ui-builder to create a login form using the design system
59+
spawn ui-builder to build a dashboard layout with cards
60+
```
61+
62+
## Usage Examples
63+
64+
- "Show me all button variants"
65+
- "Extract the HTML for the primary button"
66+
- "What colors are in the design system?"
67+
- "Build a form using the design system components"
68+
69+
## Links
70+
71+
- [Repository](https://github.com/freema/mcp-design-system-extractor)
72+
- [npm](https://www.npmjs.com/package/mcp-design-system-extractor)

‎plugins/claude/design-system/agents/ui-builder.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
name: ui-builder
3+
description: Agent for building UIs using Storybook design system components. Extracts components and assembles them into complete interfaces.
4+
model: sonnet
5+
---
6+
7+
You are a UI builder agent specializing in component-based development using Storybook design systems.
8+
9+
## Your Task
10+
11+
When given a UI task, find appropriate components from the design system, extract their HTML/styles, and assemble them into the requested interface.
12+
13+
## Process
14+
15+
1. **Understand requirements**: What UI needs to be built?
16+
2. **Search components**: Use `search_components` to find relevant components
17+
3. **Check variants**: Use `get_component_html` with `variantsOnly: true`
18+
4. **Extract HTML**: Get the actual HTML for chosen variants
19+
5. **Get theme**: Use `get_theme_info` for colors, spacing if needed
20+
6. **Assemble**: Combine components into the final UI
21+
7. **Return**: Provide clean, usable code
22+
23+
## Available Tools
24+
25+
| Tool | Purpose |
26+
|------|---------|
27+
| `list_components` | List all components (use `compact: true`) |
28+
| `search_components` | Find components by name/purpose |
29+
| `get_component_html` | Extract HTML (async, poll with `job_status`) |
30+
| `get_theme_info` | Get design tokens |
31+
| `get_component_dependencies` | See component relationships |
32+
33+
## Guidelines
34+
35+
- Always use `compact: true` when listing components
36+
- Check variants before extracting HTML
37+
- Use design system colors/spacing from theme
38+
- Return clean, production-ready code
39+
- Mention which components were used

‎plugins/claude/design-system/commands/extract.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
description: Extract HTML from a Storybook component
3+
argument-hint: <component-id>
4+
---
5+
6+
# /design:extract
7+
8+
Extract the rendered HTML from a specific component story.
9+
10+
## Usage
11+
12+
```
13+
/design:extract <component-id>
14+
```
15+
16+
Component ID format: `component-name--story-name` or just `component-name` (uses default variant).
17+
18+
## Examples
19+
20+
```
21+
/design:extract button--primary
22+
/design:extract card--default
23+
/design:extract input
24+
```
25+
26+
## What Happens
27+
28+
1. Calls `get_component_html` in async mode (returns job_id)
29+
2. Polls `job_status` until complete
30+
3. Returns the extracted HTML
31+
32+
Use `variantsOnly: true` to first see available variants.

‎plugins/claude/design-system/commands/list.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
description: List components in the Storybook design system
3+
argument-hint: [search-query]
4+
---
5+
6+
# /design:list
7+
8+
List all components available in the Storybook design system.
9+
10+
## Usage
11+
12+
```
13+
/design:list # All components
14+
/design:list <query> # Search by name
15+
/design:list --category=<cat> # Filter by category
16+
```
17+
18+
## Examples
19+
20+
```
21+
/design:list
22+
/design:list button
23+
/design:list --category=forms
24+
/design:list input
25+
```
26+
27+
## What Happens
28+
29+
Calls `list_components` with `compact: true` for minimal output, or `search_components` if a query is provided.

‎plugins/claude/design-system/commands/theme.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
description: Get design system theme (colors, spacing, typography)
3+
argument-hint: [section]
4+
---
5+
6+
# /design:theme
7+
8+
Extract design tokens and theme information from the design system.
9+
10+
## Usage
11+
12+
```
13+
/design:theme # Full theme
14+
/design:theme <section> # Specific section
15+
```
16+
17+
## Examples
18+
19+
```
20+
/design:theme
21+
/design:theme colors
22+
/design:theme spacing
23+
/design:theme typography
24+
```
25+
26+
## What Happens
27+
28+
Calls `get_theme_info` to extract CSS custom properties and design tokens including colors, spacing, typography, and breakpoints.

‎plugins/claude/design-system/skills/design-extraction/SKILL.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
name: design-extraction
3+
description: This skill should be used when the user asks about Storybook, design systems, UI components, extracting HTML, or building interfaces using existing components. Activates for component listing, HTML extraction, theme analysis, or UI assembly.
4+
---
5+
6+
When the user asks about design systems or building UIs with components, use the design-system MCP tools.
7+
8+
## When to Use This Skill
9+
10+
Activate when the user:
11+
12+
- Asks about available components ("What buttons do we have?", "List form components")
13+
- Needs component HTML ("Extract the card component", "Get the modal HTML")
14+
- Wants theme info ("What colors are available?", "Show me the spacing scale")
15+
- Builds UIs ("Create a login form using our components")
16+
- Analyzes components ("What components does the header use?")
17+
18+
## Tools Reference
19+
20+
| Task | Tool |
21+
|------|------|
22+
| List all | `list_components` (use `compact: true`) |
23+
| Search | `search_components` |
24+
| Extract HTML | `get_component_html` (async) |
25+
| Check variants | `get_component_html` with `variantsOnly: true` |
26+
| Get theme | `get_theme_info` |
27+
| Get CSS | `get_external_css` |
28+
| Dependencies | `get_component_dependencies` |
29+
| Job status | `job_status` |
30+
31+
## Async Operations
32+
33+
`get_component_html` is async by default:
34+
35+
```
36+
get_component_html componentId="button--primary"
37+
→ Returns: { job_id: "abc123" }
38+
39+
job_status jobId="abc123"
40+
→ Returns: { status: "completed", result: "<button>..." }
41+
```
42+
43+
## Component ID Format
44+
45+
```
46+
button--primary # component--story
47+
card--default # component--story
48+
button # auto-resolves to default variant
49+
```
50+
51+
## Example Workflows
52+
53+
**List and extract:**
54+
```
55+
list_components compact=true
56+
get_component_html componentId="button" variantsOnly=true
57+
get_component_html componentId="button--primary"
58+
job_status jobId="..."
59+
```
60+
61+
**Build with theme:**
62+
```
63+
get_theme_info
64+
search_components purpose="form inputs"
65+
get_component_html componentId="input--default"
66+
```

0 commit comments

Comments
 (0)