By dlabs
Code-first design exploration workflow. Product planning → section screen design → brand discovery → variant generation → iterative refinement → token extraction → production components. Generate standalone HTML variants, design app screens scoped to sections, refine picked designs with feedback, extract design tokens, and ship as Next.js components using your project's component libraries (shadcn/ui, Radix UI).
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Model your data entities and relationships through interactive conversation. Produces data-shape.md with entities and relationship descriptions.
Build a Minimum Viable Brand through interactive discovery. Produces brand identity, design tokens, and a visual brand guide.
Initialize the design-studio workspace and configure gitignore preferences
Pick a design variant, extract tokens, and archive rejected variants
Refine a picked design variant with feedback. Creates a new session with 3-4 variants that iterate on the chosen design.
Builds a Minimum Viable Brand through interactive Q&A, URL/image analysis, and synthesis. Produces brand.json, tokens.json, and brand-guide.html.
Generates 2-3 standalone HTML showcase pages that demonstrate a brand identity in real page contexts. Reads brand.json and produces industry-appropriate pages using the brand's tokens, voice, and visual principles.
Models data entities and relationships through interactive Q&A. Reads product context to suggest entities, then writes data-shape.md.
Converts a chosen HTML variant into production Next.js components. Scans project conventions including component libraries (shadcn/ui, Radix), splits components, converts vanilla JS to React hooks, and extends Tailwind config with design tokens.
Defines a product through interactive Q&A. Produces product-overview.md (name, description, problems, features) and product-roadmap.md (ordered section list).
Code-first design exploration workflow. Product Planning → Section Design → Brand (optional) → Explore (HTML variants) → Refine → Decide (extract tokens) → Ship (Next.js components). Covers section screen design, brand discovery, variant generation, iterative refinement, token management, and production conversion.
Guided product planning workflow. Define your product (overview + roadmap), model data entities, specify the app shell, and create feature sections — all through interactive conversation that produces viewer-compatible structured markdown.
A collection of Claude Code plugins by d.labs.
| Plugin | Description | Version |
|---|---|---|
| blueprint-dev | Planning-first, design-driven development workflow with A/B design variants, architecture robustness checks, trunk-based development enforcement, agent team swarms, compound knowledge accumulation, browser testing, git worktree management, lightweight fast-lane workflows, code simplification, parallel batch operations, and skill eval framework. | 2.0.0 |
| design-studio | Code-first design exploration workflow. Product planning, section screen design, brand discovery, variant generation, iterative refinement, token extraction, and production Next.js components using your project's component libraries (shadcn/ui, Radix UI). | 0.5.0 |
| scenario-testing | Probabilistic scenario validation for agentic software. LLM-judged user-story scenarios, satisfaction scoring across observed trajectories, and a Digital Twin Universe for behavioral clones of third-party services. | 0.1.0 |
Step 1: Add the marketplace:
claude plugin marketplace add https://github.com/dlabs/claude-marketplace
Step 2: Install a plugin:
claude plugin install blueprint-dev
claude plugin install design-studio
claude plugin install scenario-testing
This installs with user scope by default (available across all projects). To install for a single project only:
claude plugin install blueprint-dev --scope project
Step 3: Restart Claude Code for the plugin to take effect.
Planning-first, design-driven development workflow for Claude Code.
/discover to /compound, plus lightweight fast-lane, batch operations, browser testing, and video walkthroughs/blueprint-dev:bp:discover # Detect your stack
/blueprint-dev:bp:plan "feature" # Plan a feature
/blueprint-dev:bp:lfg "feature" # Full pipeline
/blueprint-dev:bp:go "small task" # Fast lane for small work
/blueprint-dev:bp:batch "change" # Parallel codebase-wide changes
/blueprint-dev:bp:test-browser # Browser tests on affected pages
See the full Blueprint-Dev Guide for detailed usage.
Code-first design exploration — from product definition to production components.
/design-studio:product # Define your product
/design-studio:design-brand # Build a Minimum Viable Brand
/design-studio:design "description" # Generate HTML design variants
/design-studio:design-pick # Pick a variant and extract tokens
/design-studio:design-ship # Convert to Next.js components
Probabilistic validation for agentic software — where traditional tests fall short.
/scenario-testing:author "user story" # Write a scenario from a user story
/scenario-testing:run # Execute scenarios against your system
/scenario-testing:score # Score satisfaction across trajectories
/scenario-testing:twin "service" # Create a behavioral clone of a service
MIT
npx claudepluginhub dlabs/claude-marketplace --plugin design-studioProbabilistic scenario validation for agentic software. Replaces rigid tests with LLM-judged user-story scenarios, satisfaction scoring across observed trajectories, and a Digital Twin Universe for behavioral clones of third-party services. Designed for codebases where agents and LLMs are first-class design primitives.
Planning-first, design-driven development workflow with A/B design variants, architecture robustness checks, trunk-based development enforcement, predefined agent team swarms, compound knowledge accumulation, browser automation testing, feature video walkthroughs, git worktree management, lightweight fast-lane workflows, code simplification, parallel batch operations, and skill eval framework. Stack-agnostic with auto-detection.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Generate distinct UI design variations, collect feedback, synthesize the best elements, and produce implementation plans
Design workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically
Open-source, skills-based version of Claude Design (claude.ai/design) for Claude Code. HTML pages, slide decks, interactive prototypes, UI kits, and brand systems — with taste, context-matching, and anti-slop discipline.
Design superpowers for Claude Code — 35 skills that teach your agent to ideate, research, generate, iterate, and ship beautiful UIs using Google Stitch MCP.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns