From 88e664436ea157e57fd3499fac6684f67d140786 Mon Sep 17 00:00:00 2001 From: Daniel Willitzer Date: Sat, 20 Dec 2025 14:10:39 -0800 Subject: [PATCH] Add Claude Plugin Marketplace integration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create buildermethods marketplace structure with .claude-plugin/marketplace.json - Add modular plugins following {product}@buildermethods branding convention: * design-os: Complete workflow bundle (main plugin) * product-vision: Product planning and roadmap * design-system: Design tokens and UI shell * section-designer: Section design and mockups * exporter: Export to production code - All slash commands preserved exactly as created by Brian Casel - Include comprehensive README with installation and usage instructions - Configure GitHub-based distribution from buildermethods/design-os Installation: 1. /plugin marketplace add https://github.com/buildermethods/design-os 2. /plugin install design-os@buildermethods This enables Claude Code users to easily discover and install Design OS features through the official plugin marketplace system. ๐Ÿค– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../.claude-plugin/marketplace.json | 149 +++++++++++++++++ .../design-os-core/.claude-plugin/plugin.json | 33 ++++ .../plugins/design-os-core/commands | 1 + design-os-marketplace/README.md | 158 ++++++++++++++++++ 4 files changed, 341 insertions(+) create mode 100644 design-os-marketplace/.claude-plugin/marketplace.json create mode 100644 design-os-marketplace/.claude-plugin/plugins/design-os-core/.claude-plugin/plugin.json create mode 120000 design-os-marketplace/.claude-plugin/plugins/design-os-core/commands create mode 100644 design-os-marketplace/README.md diff --git a/design-os-marketplace/.claude-plugin/marketplace.json b/design-os-marketplace/.claude-plugin/marketplace.json new file mode 100644 index 0000000..f4622a5 --- /dev/null +++ b/design-os-marketplace/.claude-plugin/marketplace.json @@ -0,0 +1,149 @@ +{ + "name": "buildermethods", + "owner": { + "name": "Brian Casel", + "email": "brian@briancasel.com" + }, + "metadata": { + "description": "Design OS - The missing design process between your idea and your codebase", + "version": "1.0.0", + "pluginRoot": "./plugins" + }, + "plugins": [ + { + "name": "design-os", + "source": "./design-os-core", + "description": "Complete Design OS workflow for product planning, design system, and UI component generation", + "version": "1.0.0", + "author": { + "name": "Brian Casel", + "email": "brian@briancasel.com" + }, + "homepage": "https://buildermethods.com/design-os", + "repository": "https://github.com/briancasel/design-os", + "license": "MIT", + "keywords": [ + "design", + "ui", + "product-planning", + "components", + "react", + "tailwind" + ], + "category": "productivity", + "commands": [ + "./commands/" + ], + "strict": false + }, + { + "name": "product-vision", + "source": { + "source": "github", + "repo": "buildermethods/design-os", + "ref": "main", + "path": ".claude/commands/design-os" + }, + "description": "Define your product vision and roadmap with AI-guided planning", + "version": "1.0.0", + "author": { + "name": "Brian Casel" + }, + "homepage": "https://buildermethods.com/design-os", + "keywords": [ + "product-vision", + "roadmap", + "planning", + "strategy" + ], + "category": "product-management", + "commands": [ + "product-vision.md", + "product-roadmap.md", + "data-model.md" + ], + "strict": false + }, + { + "name": "design-system", + "source": { + "source": "github", + "repo": "buildermethods/design-os", + "ref": "main", + "path": ".claude/commands/design-os" + }, + "description": "Design your design system with tokens, colors, typography, and application shell", + "version": "1.0.0", + "author": { + "name": "Brian Casel" + }, + "keywords": [ + "design-system", + "ui-kit", + "tokens", + "colors", + "typography" + ], + "category": "design", + "commands": [ + "design-tokens.md", + "design-shell.md" + ], + "strict": false + }, + { + "name": "section-designer", + "source": { + "source": "github", + "repo": "buildermethods/design-os", + "ref": "main", + "path": ".claude/commands/design-os" + }, + "description": "Design individual sections with requirements, sample data, and screen designs", + "version": "1.0.0", + "author": { + "name": "Brian Casel" + }, + "keywords": [ + "ui-design", + "sections", + "components", + "mockups" + ], + "category": "design", + "commands": [ + "shape-section.md", + "sample-data.md", + "design-screen.md", + "screenshot-design.md" + ], + "strict": false + }, + { + "name": "exporter", + "source": { + "source": "github", + "repo": "buildermethods/design-os", + "ref": "main", + "path": ".claude/commands/design-os" + }, + "description": "Export production-ready React components and implementation guides", + "version": "1.0.0", + "author": { + "name": "Brian Casel" + }, + "keywords": [ + "export", + "react", + "components", + "code-generation", + "tailwind" + ], + "category": "development", + "commands": [ + "export-product.md" + ], + "strict": false + } + ] +} \ No newline at end of file diff --git a/design-os-marketplace/.claude-plugin/plugins/design-os-core/.claude-plugin/plugin.json b/design-os-marketplace/.claude-plugin/plugins/design-os-core/.claude-plugin/plugin.json new file mode 100644 index 0000000..0a79123 --- /dev/null +++ b/design-os-marketplace/.claude-plugin/plugins/design-os-core/.claude-plugin/plugin.json @@ -0,0 +1,33 @@ +{ + "name": "design-os", + "description": "Complete Design OS workflow for product planning, design system, and UI component generation", + "version": "1.0.0", + "author": { + "name": "Brian Casel", + "email": "brian@briancasel.com" + }, + "homepage": "https://buildermethods.com/design-os", + "repository": "https://github.com/buildermethods/design-os", + "license": "MIT", + "keywords": [ + "design", + "ui", + "product-planning", + "components", + "react", + "tailwind" + ], + "category": "productivity", + "commands": [ + "../design-os/product-vision.md", + "../design-os/product-roadmap.md", + "../design-os/data-model.md", + "../design-os/design-tokens.md", + "../design-os/design-shell.md", + "../design-os/shape-section.md", + "../design-os/sample-data.md", + "../design-os/design-screen.md", + "../design-os/screenshot-design.md", + "../design-os/export-product.md" + ] +} \ No newline at end of file diff --git a/design-os-marketplace/.claude-plugin/plugins/design-os-core/commands b/design-os-marketplace/.claude-plugin/plugins/design-os-core/commands new file mode 120000 index 0000000..b26c5f0 --- /dev/null +++ b/design-os-marketplace/.claude-plugin/plugins/design-os-core/commands @@ -0,0 +1 @@ +./.claude \ No newline at end of file diff --git a/design-os-marketplace/README.md b/design-os-marketplace/README.md new file mode 100644 index 0000000..11a93da --- /dev/null +++ b/design-os-marketplace/README.md @@ -0,0 +1,158 @@ +# Design OS Plugin Marketplace + +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. + +## About Design OS + +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. + +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. + +## Available Plugins + +### ๐ŸŽฏ design-os +The complete Design OS workflow bundle that includes all features: +- Product planning and vision definition +- Design system setup +- Section design and UI mockups +- Production-ready component export + +**Installation**: `/plugin install design-os@buildermethods` + +### ๐Ÿ“‹ product-vision +Define your product vision, roadmap, and data model with AI-guided planning. + +**Commands**: +- `/product-vision` - Define your product vision and objectives +- `/product-roadmap` - Create a structured product roadmap +- `/data-model` - Model your application's data structure + +**Installation**: `/plugin install product-vision@buildermethods` + +### ๐ŸŽจ design-system +Design your complete design system with tokens, colors, typography, and application shell. + +**Commands**: +- `/design-tokens` - Define colors, typography, spacing, and design tokens +- `/design-shell` - Design your application shell and layout components + +**Installation**: `/plugin install design-system@buildermethods` + +### ๐Ÿ–ผ๏ธ section-designer +Design individual sections with requirements, sample data, and screen designs. + +**Commands**: +- `/shape-section` - Define a new application section +- `/sample-data` - Generate realistic sample data for your section +- `/design-screen` - Design the UI for your section +- `/screenshot-design` - Take and reference design screenshots + +**Installation**: `/plugin install section-designer@buildermethods` + +### ๐Ÿ“ฆ exporter +Export production-ready React components and implementation guides. + +**Commands**: +- `/export-product` - Generate the complete handoff package for developers + +**Installation**: `/plugin install exporter@buildermethods` + +## Installation + +### Quick Start + +1. **Add the marketplace**: + ```bash + /plugin marketplace add https://github.com/briancasel/design-os + ``` + +2. **Install plugins**: + ```bash + # Install the complete workflow + /plugin install design-os@buildermethods + + # Or install individual plugins + /plugin install product-vision@buildermethods + /plugin install design-system@buildermethods + /plugin install section-designer@buildermethods + /plugin install exporter@buildermethods + ``` + +### Local Development + +If you're developing the marketplace locally: + +1. **Clone the repository**: + ```bash + git clone https://github.com/briancasel/design-os.git + cd design-os + ``` + +2. **Add local marketplace**: + ```bash + /plugin marketplace add ./design-os-marketplace + ``` + +3. **Install plugins**: + ```bash + /plugin install design-os@buildermethods + ``` + +## Usage Workflow + +### 1. Start with Product Vision +```bash +/product-vision +``` +Define your product's core purpose, target users, and key objectives. + +### 2. Create a Roadmap +```bash +/product-roadmap +``` +Break down your vision into actionable phases and features. + +### 3. Define Your Data Model +```bash +/data-model +``` +Model your application's data structure and relationships. + +### 4. Set Up Your Design System +```bash +/design-tokens +/design-shell +``` +Define colors, typography, and design your application shell. + +### 5. Design Each Section +```bash +/shape-section +/sample-data +/design-screen +``` +Design individual feature sections with sample data and UI mockups. + +### 6. Export for Implementation +```bash +/export-product +``` +Generate production-ready React components and documentation. + +## Support + +- **Official Documentation**: [buildermethods.com/design-os](https://buildermethods.com/design-os) +- **Community**: Join [Builder Methods Pro](https://buildermethods.com/pro) for direct support +- **Issues**: Report issues on [GitHub](https://github.com/briancasel/design-os/issues) + +## License + +MIT License - see [LICENSE](https://github.com/briancasel/design-os/blob/main/LICENSE) file for details. + +## Created by Brian Casel + +Built by Brian Casel, creator of [Builder Methods](https://buildermethods.com). + +- **Newsletter**: [Builder Briefing](https://buildermethods.com) +- **YouTube**: [Brian Casel](https://youtube.com/@briancasel) +- **Twitter**: [@briancasel](https://twitter.com/briancasel) \ No newline at end of file