Skip to content

Commit a26f0a7

Browse files
aRustyDevclaude
aRustyDev
and
claude
committed
feat(plugins): scaffold design-to-code plugin
New plugin for design-to-code workflows: - Extract design tokens from Figma, Sketch, Penpot - Generate UI code for SwiftUI, React, Flutter, Tailwind - MCP servers: figma, sketch-context, penpot, iconify - LSP: design-tokens-language-server Plugin structure: - 8 skills (2 extend, 6 create) - 5 commands - 3 agents (1 extend, 2 create) - 5 output styles - 4 MCP servers (all reuse) - 1 LSP server (reuse) See .plans/plugins/design-to-code/ for roadmap. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 27f80ae commit a26f0a7

30 files changed

Lines changed: 1339 additions & 0 deletions

File tree

‎.claude-plugin/marketplace.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,31 @@
109109
"license": "MIT",
110110
"homepage": "https://docs.arusty.dev/ai/plugins/swiftui-dev",
111111
"repository": "https://github.com/aRustyDev/ai.git"
112+
},
113+
{
114+
"name": "design-to-code",
115+
"source": "./context/plugins/design-to-code",
116+
"description": "Bridge design tools and code generation, enabling seamless translation of design files into production-ready UI code across multiple frameworks.",
117+
"version": "0.1.0",
118+
"author": {
119+
"name": "Adam Smith",
120+
"email": "developer@gh.arusty.dev"
121+
},
122+
"keywords": [
123+
"design-tokens",
124+
"figma",
125+
"sketch",
126+
"penpot",
127+
"swiftui",
128+
"react",
129+
"flutter",
130+
"tailwind",
131+
"design-system",
132+
"code-generation"
133+
],
134+
"license": "MIT",
135+
"homepage": "https://docs.arusty.dev/ai/plugins/design-to-code",
136+
"repository": "https://github.com/aRustyDev/ai.git"
112137
}
113138
]
114139
}

‎.github/pre-commit/words/project.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,6 @@ xcodeproj
127127
appstore
128128
penpot
129129
Penpot
130+
iconify
131+
Iconify
132+
svgo

‎.plans/plugins/design-to-code/brainstorm.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Plugin Brainstorm: design-to-code
2+
3+
## Domain & Purpose
4+
5+
**Domain**: UI/UX Design Integration
6+
**Purpose**: Bridge design tools and code generation, enabling seamless translation of design files into production-ready UI code across multiple frameworks.
7+
8+
## Use Cases
9+
10+
1. Extract design tokens (colors, typography, spacing) from Sketch/Penpot/Figma and generate framework-specific code
11+
2. Convert design components to SwiftUI, React, Flutter, or CSS code
12+
3. Maintain design system consistency across codebases
13+
4. Export and optimize assets (icons, images) for target platforms
14+
5. Validate implemented code against original designs
15+
16+
## Components
17+
18+
### Skills
19+
20+
| Name | Purpose | Priority |
21+
|------|---------|----------|
22+
| design-tokens-extraction | Extract colors, fonts, spacing, shadows from design files | must |
23+
| design-to-swiftui | Convert design components to SwiftUI views | must |
24+
| design-to-react | Convert design components to React/CSS | should |
25+
| design-to-flutter | Convert design components to Flutter widgets | should |
26+
| design-to-tailwind | Generate Tailwind CSS from design specs | should |
27+
| design-system-management | Create/maintain design system tokens and documentation | must |
28+
| asset-optimization | Export and optimize images, icons for platforms | should |
29+
| accessibility-audit | Check designs for accessibility compliance (contrast, touch targets) | nice |
30+
31+
### Commands
32+
33+
| Name | Purpose | Priority |
34+
|------|---------|----------|
35+
| /extract-tokens | Extract design tokens from a design file | must |
36+
| /generate-component | Convert selected design to code | must |
37+
| /sync-design-system | Sync design tokens to codebase | should |
38+
| /export-assets | Export and optimize assets | should |
39+
| /compare-design | Compare implementation to design | nice |
40+
41+
### Agents
42+
43+
| Name | Purpose | Priority |
44+
|------|---------|----------|
45+
| design-translator | Multi-step workflow: analyze design → extract specs → generate code | must |
46+
| design-system-architect | Create comprehensive design systems from designs | should |
47+
| asset-pipeline | Batch process and optimize assets for multiple platforms | nice |
48+
49+
### Output Styles
50+
51+
| Name | Purpose | Priority |
52+
|------|---------|----------|
53+
| design-token-json | JSON format for design tokens | must |
54+
| design-token-swift | Swift code for design tokens | must |
55+
| design-token-css | CSS custom properties format | should |
56+
| design-token-tailwind | Tailwind config format | should |
57+
| component-spec | Design specification document | should |
58+
59+
### Hooks
60+
61+
| Name | Purpose | Priority |
62+
|------|---------|----------|
63+
| validate-design-tokens | Validate token files on save | nice |
64+
65+
### MCP Servers
66+
67+
| Name | Purpose | Priority |
68+
|------|---------|----------|
69+
| sketch-context-mcp | Read Sketch design files | must |
70+
| penpot-mcp | Read/write Penpot design files | must |
71+
| figma-mcp | Read Figma design files (if available) | should |
72+
| iconify-mcp | Icon library access | nice |
73+
74+
### LSP Servers
75+
76+
| Name | Purpose | Priority |
77+
|------|---------|----------|
78+
| design-tokens-lsp | Autocomplete for design token references | nice |
79+
80+
## Summary
81+
82+
| Category | Must | Should | Nice | Total |
83+
|----------|------|--------|------|-------|
84+
| Skills | 3 | 4 | 1 | 8 |
85+
| Commands | 2 | 2 | 1 | 5 |
86+
| Agents | 1 | 1 | 1 | 3 |
87+
| Styles | 2 | 3 | 0 | 5 |
88+
| Hooks | 0 | 0 | 1 | 1 |
89+
| MCP | 2 | 1 | 1 | 4 |
90+
| LSP | 0 | 0 | 1 | 1 |
91+
| **Total**| 10 | 11 | 6 | 27 |

‎.plans/plugins/design-to-code/research.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# Plugin Research: design-to-code
2+
3+
## Existing Plugins
4+
5+
| Plugin | Domain | Coverage | Recommendation |
6+
|--------|--------|----------|----------------|
7+
| swiftui-dev | iOS UI development | 15% | reference (has sketch/penpot MCP for handoff) |
8+
| frontend-dev | Web frontend | 10% | reference (component generation target) |
9+
| browser-extension-dev | Browser extensions | 5% | reference (CSS generation target) |
10+
11+
No existing plugin covers design-to-code workflows directly. This is a new domain.
12+
13+
## Component Research
14+
15+
### Skills
16+
17+
| Need | Existing | Source | Coverage | Action |
18+
|------|----------|--------|----------|--------|
19+
| design-tokens-extraction | design-brand-applying-dev | local | 60% | **extend** - has color/font specs, needs extraction logic |
20+
| design-to-swiftui | (none) | - | 0% | **create** |
21+
| design-to-react | (none) | - | 0% | **create** |
22+
| design-to-flutter | (none) | - | 0% | **create** |
23+
| design-to-tailwind | (none) | - | 0% | **create** |
24+
| design-system-management | design-theme-factory-dev | local | 50% | **extend** - has themes, needs token management |
25+
| asset-optimization | (none) | - | 0% | **create** |
26+
| accessibility-audit | (none) | - | 0% | **create** |
27+
28+
### Commands
29+
30+
| Need | Existing | Source | Coverage | Action |
31+
|------|----------|--------|----------|--------|
32+
| /extract-tokens | (none) | - | 0% | **create** |
33+
| /generate-component | (none) | - | 0% | **create** |
34+
| /sync-design-system | (none) | - | 0% | **create** |
35+
| /export-assets | (none) | - | 0% | **create** |
36+
| /compare-design | (none) | - | 0% | **create** |
37+
38+
### Agents
39+
40+
| Need | Existing | Source | Coverage | Action |
41+
|------|----------|--------|----------|--------|
42+
| design-translator | ui-designer | local | 40% | **extend** - has design system knowledge, needs translation logic |
43+
| design-system-architect | (none) | - | 0% | **create** |
44+
| asset-pipeline | (none) | - | 0% | **create** |
45+
46+
### Output Styles
47+
48+
| Need | Existing | Source | Coverage | Action |
49+
|------|----------|--------|----------|--------|
50+
| design-token-json | (none) | - | 0% | **create** |
51+
| design-token-swift | (none) | - | 0% | **create** |
52+
| design-token-css | (none) | - | 0% | **create** |
53+
| design-token-tailwind | (none) | - | 0% | **create** |
54+
| component-spec | (none) | - | 0% | **create** |
55+
56+
### Hooks
57+
58+
| Need | Existing | Source | Coverage | Action |
59+
|------|----------|--------|----------|--------|
60+
| validate-design-tokens | (none) | - | 0% | **create** |
61+
62+
### MCP Servers
63+
64+
| Need | Existing | Source | Coverage | Action |
65+
|------|----------|--------|----------|--------|
66+
| sketch-context-mcp | sketch-context-mcp | [GitHub](https://github.com/jshmllr/sketch-context-mcp) | 100% | **reuse** - `npx sketch-context-mcp` |
67+
| penpot-mcp | penpot-mcp | [GitHub](https://github.com/penpot/penpot-mcp) | 100% | **reuse** - official, requires local build |
68+
| figma-mcp | figma-mcp | [Figma Official](https://developers.figma.com/docs/figma-mcp-server/) | 100% | **reuse** - official Figma server, desktop or remote |
69+
| iconify-mcp | iconify-mcp-server | [GitHub](https://github.com/imjac0b/iconify-mcp-server) | 100% | **reuse** - `npx iconify-mcp-server@latest` |
70+
71+
### LSP Servers
72+
73+
| Need | Existing | Source | Coverage | Action |
74+
|------|----------|--------|----------|--------|
75+
| design-tokens-lsp | design-tokens-language-server | [Blog](https://bennypowers.dev/posts/introducing-design-tokens-language-server/) | 90% | **reuse** - autocomplete for design tokens |
76+
77+
## MCP Server Details
78+
79+
### Figma MCP (Official)
80+
- **Source**: [Figma Developer Docs](https://developers.figma.com/docs/figma-mcp-server/)
81+
- **Install**: Desktop app integration or remote endpoint `https://mcp.figma.com/mcp`
82+
- **Features**: Read design metadata, frames, components, design tokens, layout constraints
83+
- **Priority**: should (widely used design tool)
84+
85+
### Sketch Context MCP
86+
- **Source**: [GitHub](https://github.com/jshmllr/sketch-context-mcp)
87+
- **Install**: `npx sketch-context-mcp --local-file=/path/to/file.sketch`
88+
- **Features**: get_file, list_components, get_selection, create_rectangle, create_text
89+
- **Priority**: must (already in swiftui-dev)
90+
91+
### Penpot MCP (Official)
92+
- **Source**: [GitHub](https://github.com/penpot/penpot-mcp)
93+
- **Install**: Local build required (npm install && npm run bootstrap)
94+
- **Features**: Data retrieval, design modification, code-to-design workflows
95+
- **Priority**: must (already in swiftui-dev)
96+
97+
### Iconify MCP
98+
- **Source**: [GitHub](https://github.com/imjac0b/iconify-mcp-server)
99+
- **Install**: `npx iconify-mcp-server@latest`
100+
- **Features**: Search 200k+ icons, get icon sets, retrieve icon data with framework examples
101+
- **Priority**: nice (useful for asset workflows)
102+
103+
## Summary
104+
105+
- **Reuse**: 5 components (4 MCP servers, 1 LSP server)
106+
- **Extend**: 3 components (2 skills, 1 agent)
107+
- **Create**: 19 components (6 skills, 5 commands, 2 agents, 5 output styles, 1 hook)
108+
109+
## Key Insights
110+
111+
1. **Design tool integration is well-covered** - Official MCP servers exist for Figma, Penpot, and community servers for Sketch
112+
2. **Code generation is a gap** - No existing skills for design-to-code translation (SwiftUI, React, Flutter, Tailwind)
113+
3. **Local design skills provide foundation** - `design-brand-applying-dev` and `design-theme-factory-dev` can be extended
114+
4. **LSP support exists** - `design-tokens-language-server` provides IDE autocomplete for tokens

‎.plans/plugins/design-to-code/roadmap.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# Plugin Roadmap: design-to-code
2+
3+
## Summary
4+
5+
| Action | Count |
6+
|--------|-------|
7+
| Reuse | 5 |
8+
| Extend | 3 |
9+
| Create | 19 |
10+
11+
---
12+
13+
## P0 — MVP
14+
15+
Core functionality for extracting design tokens and generating code for primary frameworks.
16+
17+
### Reuse (add to plugin.sources.json)
18+
19+
| Component | Type | Source Path |
20+
|-----------|------|-------------|
21+
| sketch-context-mcp | mcp | `npx sketch-context-mcp` |
22+
| penpot-mcp | mcp | local build from [penpot/penpot-mcp](https://github.com/penpot/penpot-mcp) |
23+
| figma-mcp | mcp | Figma desktop app or `https://mcp.figma.com/mcp` |
24+
25+
### Extend
26+
27+
| Component | Type | Base | Gap | Effort |
28+
|-----------|------|------|-----|--------|
29+
| design-tokens-extraction | skill | design-brand-applying-dev | Add extraction logic from MCP server data, token normalization | medium |
30+
| design-system-management | skill | design-theme-factory-dev | Add token CRUD, multi-format export, version tracking | medium |
31+
| design-translator | agent | ui-designer | Add MCP integration, code generation pipelines, framework routing | large |
32+
33+
### Create
34+
35+
| Component | Type | Description | Dependencies |
36+
|-----------|------|-------------|--------------|
37+
| design-to-swiftui | skill | Convert design specs to SwiftUI views with proper modifiers | design-tokens-extraction |
38+
| /extract-tokens | command | Extract tokens from design file via MCP, output to chosen format | sketch-context-mcp, penpot-mcp, figma-mcp, design-tokens-extraction |
39+
| /generate-component | command | Analyze design selection, generate code for target framework | design-translator, design-to-swiftui |
40+
| design-token-json | style | W3C Design Tokens format output | - |
41+
| design-token-swift | style | Swift Color/Font extension output | - |
42+
43+
---
44+
45+
## P1 — Enhancement
46+
47+
Additional framework support and design system tooling.
48+
49+
### Reuse (add to plugin.sources.json)
50+
51+
| Component | Type | Source Path |
52+
|-----------|------|-------------|
53+
| iconify-mcp | mcp | `npx iconify-mcp-server@latest` |
54+
55+
### Create
56+
57+
| Component | Type | Description | Dependencies |
58+
|-----------|------|-------------|--------------|
59+
| design-to-react | skill | Convert design specs to React components with CSS/styled-components | design-tokens-extraction |
60+
| design-to-flutter | skill | Convert design specs to Flutter widgets with proper theming | design-tokens-extraction |
61+
| design-to-tailwind | skill | Generate Tailwind config and utility classes from design specs | design-tokens-extraction |
62+
| /sync-design-system | command | Sync tokens from design file to codebase, detect drift | design-system-management |
63+
| /export-assets | command | Export and optimize images/icons for target platforms | iconify-mcp |
64+
| design-system-architect | agent | Create comprehensive design systems from design files | design-tokens-extraction, design-system-management |
65+
| design-token-css | style | CSS custom properties output | - |
66+
| design-token-tailwind | style | Tailwind config.js theme output | - |
67+
| component-spec | style | Design specification markdown document | - |
68+
| asset-optimization | skill | Image/icon optimization for iOS, Android, web | iconify-mcp |
69+
70+
---
71+
72+
## P2 — Nice-to-have
73+
74+
Quality of life improvements and advanced features.
75+
76+
### Reuse (add to plugin.sources.json)
77+
78+
| Component | Type | Source Path |
79+
|-----------|------|-------------|
80+
| design-tokens-lsp | lsp | [design-tokens-language-server](https://bennypowers.dev/posts/introducing-design-tokens-language-server/) |
81+
82+
### Create
83+
84+
| Component | Type | Description | Dependencies |
85+
|-----------|------|-------------|--------------|
86+
| accessibility-audit | skill | Check designs for WCAG compliance (contrast, touch targets, etc.) | design-tokens-extraction |
87+
| /compare-design | command | Visual diff between design file and implemented code | figma-mcp, sketch-context-mcp |
88+
| asset-pipeline | agent | Batch process assets across multiple platforms | asset-optimization |
89+
| validate-design-tokens | hook | Validate token JSON files on save | design-token-json |
90+
91+
---
92+
93+
## Dependency Graph
94+
95+
```
96+
MCP Servers (foundation)
97+
├── sketch-context-mcp ─┐
98+
├── penpot-mcp ─────────┼──→ design-tokens-extraction ──→ design-to-swiftui
99+
├── figma-mcp ──────────┘ │ │
100+
│ │ ├──→ design-to-react
101+
│ │ ├──→ design-to-flutter
102+
│ │ └──→ design-to-tailwind
103+
│ │
104+
│ └──→ design-system-management
105+
│ │
106+
│ └──→ design-system-architect
107+
│
108+
├── iconify-mcp ──────────────────────────────────────→ asset-optimization
109+
│ │
110+
│ └──→ asset-pipeline
111+
│
112+
Commands
113+
├── /extract-tokens ←── design-tokens-extraction + MCP servers
114+
├── /generate-component ←── design-translator + design-to-* skills
115+
├── /sync-design-system ←── design-system-management
116+
├── /export-assets ←── iconify-mcp + asset-optimization
117+
└── /compare-design ←── MCP servers (P2)
118+
119+
Output Styles (parallel, no dependencies)
120+
├── design-token-json
121+
├── design-token-swift
122+
├── design-token-css
123+
├── design-token-tailwind
124+
└── component-spec
125+
```
126+
127+
---
128+
129+
## Implementation Order
130+
131+
### Phase 1: Foundation (P0)
132+
1. Configure MCP servers (sketch, penpot, figma)
133+
2. Extend `design-tokens-extraction` skill
134+
3. Create `design-token-json` and `design-token-swift` output styles
135+
4. Create `/extract-tokens` command
136+
5. Create `design-to-swiftui` skill
137+
6. Extend `design-translator` agent
138+
7. Create `/generate-component` command
139+
8. Extend `design-system-management` skill
140+
141+
### Phase 2: Framework Expansion (P1)
142+
1. Add `iconify-mcp` server
143+
2. Create `design-to-react`, `design-to-flutter`, `design-to-tailwind` skills
144+
3. Create remaining output styles
145+
4. Create `/sync-design-system` and `/export-assets` commands
146+
5. Create `design-system-architect` agent and `asset-optimization` skill
147+
148+
### Phase 3: Polish (P2)
149+
1. Add `design-tokens-lsp` server
150+
2. Create `accessibility-audit` skill
151+
3. Create `/compare-design` command
152+
4. Create `asset-pipeline` agent
153+
5. Create `validate-design-tokens` hook

0 commit comments

Comments
 (0)