mirror of https://github.com/0xdesign/design-plugin.git synced 2026-09-19 07:32:24 +08:00

Files

T

History

0xdesign 931c20c7a8 chore: bump design-and-refine plugin to v1.1.0

Reflects stable release with:
- FeedbackOverlay CSS isolation fix
- Button overlap UX improvements
- DESIGN_PRINCIPLES.md expansion (~1,700 lines)
- Interaction design techniques integration

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-24 17:06:57 -05:00

.claude-plugin

chore: bump design-and-refine plugin to v1.1.0

2026-01-24 17:06:57 -05:00

commands

design-and-refine v0.1.0

2026-01-14 20:45:55 -05:00

hooks

design-and-refine v0.1.0

2026-01-14 20:45:55 -05:00

scripts

Fix FeedbackOverlay UX: CSS isolation and button overlap (#2 )

2026-01-18 15:11:41 -05:00

skills/design-lab

Integrate interaction design techniques into DESIGN_PRINCIPLES.md

2026-01-21 18:51:16 -05:00

templates

Fix FeedbackOverlay UX: CSS isolation and button overlap (#2 )

2026-01-18 15:11:41 -05:00

README.md

design-and-refine v0.1.0

2026-01-14 20:45:55 -05:00

README.md

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

Preflight: Detects framework, package manager, styling system
Style Inference: Reads your existing design tokens and patterns
Interview: Asks about requirements, pain points, and direction
Generate: Creates 5 distinct variations using your project's visual language
Review: Preview variants side-by-side at /__design_lab
Feedback: Tell me what you like about each variant
Synthesize: Creates a refined version combining the best elements
Iterate: Repeat until you're confident
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