{
  "markdown": "# Design Lab Extension\n\nA Gemini CLI extension that helps you make confident UI design decisions through rapid iteration.\n\n## What It Does\n\nDesign Lab generates **multiple distinct UI variations** for any component or page, lets you compare them side-by-side in your browser, collects your feedback, and synthesizes a refined version—repeating until you're confident in the result.\n\nInstead of guessing at the right design or going back-and-forth on revisions, you see real options, pick what works, and iterate quickly.\n\n## Installation\n\n```bash\ngemini extensions install https://github.com/your-username/gemini-design-plugin\n```\n\nOr for local development:\n\n```bash\ngemini extensions link /path/to/gemini-design-plugin\n```\n\n## Usage\n\n### Start a session\n\n```\n/design:start\n```\n\nOr with a specific target:\n\n```\n/design:start ProfileCard\n```\n\n### What happens next\n\n1. **Preflight** — Detects your framework (Next.js, Vite, etc.) and styling system (Tailwind, MUI, etc.)\n2. **Style inference** — Reads your existing design tokens from Tailwind config, CSS variables, or theme files\n3. **Interview** — Asks about:\n   - What you're designing (component vs page, new vs redesign)\n   - Pain points and what should improve\n   - Visual and interaction inspiration\n   - Target user and key tasks\n4. **Generation** — Creates 5 distinct variations exploring different:\n   - Information hierarchy\n   - Layout models (cards, lists, tables, split-pane)\n   - Density (compact vs spacious)\n   - Interaction patterns (modal, inline, drawer)\n   - Visual expression\n5. **Review** — Open `http://localhost:3000/__design_lab` (or your dev server port) to see all variations\n6. **Feedback** — Tell Gemini:\n   - If one is already good → select it, make minor tweaks\n   - If you like parts of different ones → describe what you like about each, get a synthesized version\n7. **Iterate** — Repeat until you're confident\n8. **Finalize** — All temp files are deleted, `DESIGN_PLAN.md` is generated with implementation steps\n\n### Clean up manually (if needed)\n\n```\n/design:cleanup\n```\n\n## Supported Frameworks\n\n- Next.js (App Router & Pages Router)\n- Vite (React, Vue)\n- Remix\n- Astro\n- Create React App\n\n## Supported Styling\n\n- Tailwind CSS\n- CSS Modules\n- Material UI (MUI)\n- Chakra UI\n- Ant Design\n- styled-components\n- Emotion\n\n## Tips for Best Results\n\n1. **Be specific in the interview.** The more context about pain points, target users, and inspiration, the more distinct the variations.\n2. **Reference products you admire.** \"Like Linear's density\" or \"Stripe's clarity\" gives concrete direction.\n3. **Don't settle on round one.** The synthesis step is where it gets good—describe what you like about each variant.\n4. **Keep your dev server running.** The extension won't start it for you.\n5. **Check the DESIGN_PLAN.md.** After finalizing, this contains implementation steps and accessibility checklist.\n\n## What Gets Created (Temporarily)\n\nDuring the session:\n- `.gemini-design/` — variants, previews, design brief\n- `app/__design_lab/` or `pages/__design_lab.tsx` — the comparison route\n\nAll of this is deleted when you finalize or abort. Nothing is left behind.\n\n## What Gets Created (Permanently)\n\nAfter finalizing:\n- `DESIGN_PLAN.md` — implementation plan for your chosen design\n- `DESIGN_MEMORY.md` — captured style decisions (speeds up future sessions)\n\n## Directory Structure\n\n```\ngemini-design-plugin/\n├── gemini-extension.json    # Extension manifest\n├── GEMINI.md                # Context loaded by Gemini CLI\n├── commands/\n│   └── design/\n│       ├── start.toml       # /design:start command\n│       └── cleanup.toml     # /design:cleanup command\n├── templates/\n│   ├── DESIGN_PLAN.md       # Output template\n│   └── DESIGN_MEMORY.md     # Memory template\n└── README.md\n```\n\n## License\n\nMIT\n",
  "bytes": 3785,
  "sha": "f4a07d70376b71c3bea55f69ee4bc0be7072782c68c7bb749b17fb61589b3eea",
  "repo_slug": "akhilesh-w/gemini-design-plugin",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_akhilesh_w_gemini_design_plugin_f9468dbc/readme"
}