Skip to content

Commit 6c1282f

Browse files
dwillitzerclaude
dwillitzer
and
claude
committed
Add Claude Plugin Marketplace integration
- Create design-os marketplace structure with .claude-plugin/marketplace.json - Add modular plugins for different aspects of the Design OS workflow: * buildermethods: Complete workflow bundle (main plugin) * design-os-product-vision: Product planning and roadmap * design-os-design-system: Design tokens and UI shell * design-os-section-designer: Section design and mockups * design-os-exporter: Export to production code - Include comprehensive README with installation and usage instructions - Configure GitHub-based distribution from buildermethods/design-os This enables Claude Code users to easily discover and install Design OS features via: /plugin marketplace add https://github.com/buildermethods/design-os Installation command: /plugin install buildermethods@design-os 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 5f773b4 commit 6c1282f

File tree

4 files changed

+341
-0
lines changed

4 files changed

+341
-0
lines changed

‎design-os-marketplace/.claude-plugin/marketplace.json‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
{
2+
"name": "design-os",
3+
"owner": {
4+
"name": "Brian Casel",
5+
"email": "brian@briancasel.com"
6+
},
7+
"metadata": {
8+
"description": "Design OS - The missing design process between your idea and your codebase",
9+
"version": "1.0.0",
10+
"pluginRoot": "./plugins"
11+
},
12+
"plugins": [
13+
{
14+
"name": "buildermethods",
15+
"source": "./design-os-core",
16+
"description": "Complete Design OS workflow for product planning, design system, and UI component generation",
17+
"version": "1.0.0",
18+
"author": {
19+
"name": "Brian Casel",
20+
"email": "brian@briancasel.com"
21+
},
22+
"homepage": "https://buildermethods.com/design-os",
23+
"repository": "https://github.com/briancasel/design-os",
24+
"license": "MIT",
25+
"keywords": [
26+
"design",
27+
"ui",
28+
"product-planning",
29+
"components",
30+
"react",
31+
"tailwind"
32+
],
33+
"category": "productivity",
34+
"commands": [
35+
"./commands/"
36+
],
37+
"strict": false
38+
},
39+
{
40+
"name": "design-os-product-vision",
41+
"source": {
42+
"source": "github",
43+
"repo": "buildermethods/design-os",
44+
"ref": "main",
45+
"path": ".claude/commands/design-os"
46+
},
47+
"description": "Define your product vision and roadmap with AI-guided planning",
48+
"version": "1.0.0",
49+
"author": {
50+
"name": "Brian Casel"
51+
},
52+
"homepage": "https://buildermethods.com/design-os",
53+
"keywords": [
54+
"product-vision",
55+
"roadmap",
56+
"planning",
57+
"strategy"
58+
],
59+
"category": "product-management",
60+
"commands": [
61+
"product-vision.md",
62+
"product-roadmap.md",
63+
"data-model.md"
64+
],
65+
"strict": false
66+
},
67+
{
68+
"name": "design-os-design-system",
69+
"source": {
70+
"source": "github",
71+
"repo": "buildermethods/design-os",
72+
"ref": "main",
73+
"path": ".claude/commands/design-os"
74+
},
75+
"description": "Design your design system with tokens, colors, typography, and application shell",
76+
"version": "1.0.0",
77+
"author": {
78+
"name": "Brian Casel"
79+
},
80+
"keywords": [
81+
"design-system",
82+
"ui-kit",
83+
"tokens",
84+
"colors",
85+
"typography"
86+
],
87+
"category": "design",
88+
"commands": [
89+
"design-tokens.md",
90+
"design-shell.md"
91+
],
92+
"strict": false
93+
},
94+
{
95+
"name": "design-os-section-designer",
96+
"source": {
97+
"source": "github",
98+
"repo": "buildermethods/design-os",
99+
"ref": "main",
100+
"path": ".claude/commands/design-os"
101+
},
102+
"description": "Design individual sections with requirements, sample data, and screen designs",
103+
"version": "1.0.0",
104+
"author": {
105+
"name": "Brian Casel"
106+
},
107+
"keywords": [
108+
"ui-design",
109+
"sections",
110+
"components",
111+
"mockups"
112+
],
113+
"category": "design",
114+
"commands": [
115+
"shape-section.md",
116+
"sample-data.md",
117+
"design-screen.md",
118+
"screenshot-design.md"
119+
],
120+
"strict": false
121+
},
122+
{
123+
"name": "design-os-exporter",
124+
"source": {
125+
"source": "github",
126+
"repo": "buildermethods/design-os",
127+
"ref": "main",
128+
"path": ".claude/commands/design-os"
129+
},
130+
"description": "Export production-ready React components and implementation guides",
131+
"version": "1.0.0",
132+
"author": {
133+
"name": "Brian Casel"
134+
},
135+
"keywords": [
136+
"export",
137+
"react",
138+
"components",
139+
"code-generation",
140+
"tailwind"
141+
],
142+
"category": "development",
143+
"commands": [
144+
"export-product.md"
145+
],
146+
"strict": false
147+
}
148+
]
149+
}

‎design-os-marketplace/.claude-plugin/plugins/design-os-core/.claude-plugin/plugin.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "buildermethods",
3+
"description": "Complete Design OS workflow for product planning, design system, and UI component generation",
4+
"version": "1.0.0",
5+
"author": {
6+
"name": "Brian Casel",
7+
"email": "brian@briancasel.com"
8+
},
9+
"homepage": "https://buildermethods.com/design-os",
10+
"repository": "https://github.com/buildermethods/design-os",
11+
"license": "MIT",
12+
"keywords": [
13+
"design",
14+
"ui",
15+
"product-planning",
16+
"components",
17+
"react",
18+
"tailwind"
19+
],
20+
"category": "productivity",
21+
"commands": [
22+
"../design-os/product-vision.md",
23+
"../design-os/product-roadmap.md",
24+
"../design-os/data-model.md",
25+
"../design-os/design-tokens.md",
26+
"../design-os/design-shell.md",
27+
"../design-os/shape-section.md",
28+
"../design-os/sample-data.md",
29+
"../design-os/design-screen.md",
30+
"../design-os/screenshot-design.md",
31+
"../design-os/export-product.md"
32+
]
33+
}

‎design-os-marketplace/.claude-plugin/plugins/design-os-core/commands‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
./.claude

‎design-os-marketplace/README.md‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
# Design OS Plugin Marketplace
2+
3+
Welcome to the Design OS Plugin Marketplace for Claude Code! This marketplace provides easy access to Design OS's powerful product planning and design workflow directly within Claude Code.
4+
5+
## About Design OS
6+
7+
Design OS is the missing design process between your idea and your codebase. It's a product planning and design tool that helps you define your product vision, structure your data model, design your UI, and export production-ready components for implementation.
8+
9+
Rather than jumping straight into code, you work through a guided process that captures what you're building and why—then hands off everything your coding agent needs to build it right.
10+
11+
## Available Plugins
12+
13+
### 🎯 design-os-core
14+
The complete Design OS workflow bundle that includes all features:
15+
- Product planning and vision definition
16+
- Design system setup
17+
- Section design and UI mockups
18+
- Production-ready component export
19+
20+
**Installation**: `/plugin install buildermethods@design-os`
21+
22+
### 📋 design-os-product-vision
23+
Define your product vision, roadmap, and data model with AI-guided planning.
24+
25+
**Commands**:
26+
- `/product-vision` - Define your product vision and objectives
27+
- `/product-roadmap` - Create a structured product roadmap
28+
- `/data-model` - Model your application's data structure
29+
30+
**Installation**: `/plugin install design-os-product-vision@design-os`
31+
32+
### 🎨 design-os-design-system
33+
Design your complete design system with tokens, colors, typography, and application shell.
34+
35+
**Commands**:
36+
- `/design-tokens` - Define colors, typography, spacing, and design tokens
37+
- `/design-shell` - Design your application shell and layout components
38+
39+
**Installation**: `/plugin install design-os-design-system@design-os`
40+
41+
### 🖼️ design-os-section-designer
42+
Design individual sections with requirements, sample data, and screen designs.
43+
44+
**Commands**:
45+
- `/shape-section` - Define a new application section
46+
- `/sample-data` - Generate realistic sample data for your section
47+
- `/design-screen` - Design the UI for your section
48+
- `/screenshot-design` - Take and reference design screenshots
49+
50+
**Installation**: `/plugin install design-os-section-designer@design-os`
51+
52+
### 📦 design-os-exporter
53+
Export production-ready React components and implementation guides.
54+
55+
**Commands**:
56+
- `/export-product` - Generate the complete handoff package for developers
57+
58+
**Installation**: `/plugin install design-os-exporter@design-os`
59+
60+
## Installation
61+
62+
### Quick Start
63+
64+
1. **Add the marketplace**:
65+
```bash
66+
/plugin marketplace add https://github.com/briancasel/design-os
67+
```
68+
69+
2. **Install plugins**:
70+
```bash
71+
# Install the complete workflow
72+
/plugin install buildermethods@design-os
73+
74+
# Or install individual plugins
75+
/plugin install design-os-product-vision@design-os
76+
/plugin install design-os-design-system@design-os
77+
/plugin install design-os-section-designer@design-os
78+
/plugin install design-os-exporter@design-os
79+
```
80+
81+
### Local Development
82+
83+
If you're developing the marketplace locally:
84+
85+
1. **Clone the repository**:
86+
```bash
87+
git clone https://github.com/briancasel/design-os.git
88+
cd design-os
89+
```
90+
91+
2. **Add local marketplace**:
92+
```bash
93+
/plugin marketplace add ./design-os-marketplace
94+
```
95+
96+
3. **Install plugins**:
97+
```bash
98+
/plugin install buildermethods@design-os
99+
```
100+
101+
## Usage Workflow
102+
103+
### 1. Start with Product Vision
104+
```bash
105+
/product-vision
106+
```
107+
Define your product's core purpose, target users, and key objectives.
108+
109+
### 2. Create a Roadmap
110+
```bash
111+
/product-roadmap
112+
```
113+
Break down your vision into actionable phases and features.
114+
115+
### 3. Define Your Data Model
116+
```bash
117+
/data-model
118+
```
119+
Model your application's data structure and relationships.
120+
121+
### 4. Set Up Your Design System
122+
```bash
123+
/design-tokens
124+
/design-shell
125+
```
126+
Define colors, typography, and design your application shell.
127+
128+
### 5. Design Each Section
129+
```bash
130+
/shape-section
131+
/sample-data
132+
/design-screen
133+
```
134+
Design individual feature sections with sample data and UI mockups.
135+
136+
### 6. Export for Implementation
137+
```bash
138+
/export-product
139+
```
140+
Generate production-ready React components and documentation.
141+
142+
## Support
143+
144+
- **Official Documentation**: [buildermethods.com/design-os](https://buildermethods.com/design-os)
145+
- **Community**: Join [Builder Methods Pro](https://buildermethods.com/pro) for direct support
146+
- **Issues**: Report issues on [GitHub](https://github.com/briancasel/design-os/issues)
147+
148+
## License
149+
150+
MIT License - see [LICENSE](https://github.com/briancasel/design-os/blob/main/LICENSE) file for details.
151+
152+
## Created by Brian Casel
153+
154+
Built by Brian Casel, creator of [Builder Methods](https://buildermethods.com).
155+
156+
- **Newsletter**: [Builder Briefing](https://buildermethods.com)
157+
- **YouTube**: [Brian Casel](https://youtube.com/@briancasel)
158+
- **Twitter**: [@briancasel](https://twitter.com/briancasel)

0 commit comments

Comments
 (0)