Files
SuperCharged-Claude-Code-Up…/plugins/marketplaces/design-plugins/design-and-refine/README.md
uroma 7a491b1548 SuperCharge Claude Code v1.0.0 - Complete Customization Package
Features:
- 30+ Custom Skills (cognitive, development, UI/UX, autonomous agents)
- RalphLoop autonomous agent integration
- Multi-AI consultation (Qwen)
- Agent management system with sync capabilities
- Custom hooks for session management
- MCP servers integration
- Plugin marketplace setup
- Comprehensive installation script

Components:
- Skills: always-use-superpowers, ralph, brainstorming, ui-ux-pro-max, etc.
- Agents: 100+ agents across engineering, marketing, product, etc.
- Hooks: session-start-superpowers, qwen-consult, ralph-auto-trigger
- Commands: /brainstorm, /write-plan, /execute-plan
- MCP Servers: zai-mcp-server, web-search-prime, web-reader, zread
- Binaries: ralphloop wrapper

Installation: ./supercharge.sh
2026-01-22 15:35:55 +00:00

2.0 KiB

Design and Refine

Generate UI design variations, collect feedback, synthesize the best elements, and iterate to confident design decisions.

Installation

Local Testing

claude --plugin-dir /path/to/design-variations-plugin

From Marketplace

/plugin marketplace add 0xdesigner/design-plugin
/plugin install design-and-refine@design-plugins

Commands

/design-and-refine:start [target]

Start a design and refine session.

Arguments:

  • target (optional): Component or page to design/redesign

Example:

/design-and-refine:start CheckoutSummary
/design-and-refine:start

/design-and-refine:cleanup

Remove all temporary design lab files.

How It Works

  1. Preflight: Detects framework, package manager, styling system
  2. Style Inference: Reads your existing design tokens and patterns
  3. Interview: Asks about requirements, pain points, and direction
  4. Generate: Creates 5 distinct variations using your project's visual language
  5. Review: Preview variants side-by-side at /__design_lab
  6. Feedback: Tell me what you like about each variant
  7. Synthesize: Creates a refined version combining the best elements
  8. Iterate: Repeat until you're confident
  9. Finalize: Cleans up temp files, produces DESIGN_PLAN.md

Supported Frameworks

  • Next.js (App Router & Pages Router)
  • Vite (React, Vue)
  • Remix
  • Astro
  • Create React App

Supported Styling

  • Tailwind CSS
  • CSS Modules
  • Material UI
  • Chakra UI
  • Ant Design
  • styled-components
  • Emotion

Files Created

Temporary (cleaned up on completion or abort)

  • .claude-design/ - All temporary variants and previews
  • app/__design_lab/ or pages/__design_lab.tsx - Lab route
  • app/__design_preview/ or pages/__design_preview.tsx - Preview route

Permanent (kept after finalization)

  • DESIGN_PLAN.md - Implementation plan for the chosen design
  • DESIGN_MEMORY.md - Reusable style decisions for future runs

License

MIT