{"_id":"@bozhidar003/vibe-design","_rev":"5-70c97cde7fe14b0f6227ec90f305a33b","name":"@bozhidar003/vibe-design","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.0":{"name":"@bozhidar003/vibe-design","version":"0.1.0","keywords":["vibe-design","design","overlay","claude","ai","css","tailwind","frontend","developer-tools"],"author":{"name":"Bozhidar Kamenski"},"license":"MIT","_id":"@bozhidar003/vibe-design@0.1.0","maintainers":[{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"}],"homepage":"https://github.com/Bozhdiar003/vibe_design#readme","bugs":{"url":"https://github.com/Bozhdiar003/vibe_design/issues"},"bin":{"vibe-design":"dist/index.js"},"dist":{"shasum":"7d4f5ee5edf9a68c4a5796dd28f00a153e9d1091","tarball":"https://registry.npmjs.org/@bozhidar003/vibe-design/-/vibe-design-0.1.0.tgz","fileCount":14,"integrity":"sha512-x1hNVViW1toFu09P4oez02SpUitM5TW/wOJNMXTiewiFpTbWpwTE7RoPBV/+t1i+d5nb96Ed//U7yRnQdg/0bg==","signatures":[{"sig":"MEYCIQCVaYDtYZJKdw013DIo/pdbPs49eosiV+Z59WimQ9QI4wIhAI3EXVQpq/iJWXev3nLdHEka98WLtYeoKDetf4fIsOp2","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":41956},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"017972d70a2e0494b44ba41c6f6fb45cacebe69f","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"},"deprecated":"Use 0.2.0+ instead","repository":{"url":"git+https://github.com/Bozhdiar003/vibe_design.git","type":"git","directory":"packages/cli"},"_npmVersion":"11.4.2","description":"Click what's broken. Describe what you want. Claude fixes it.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"ora":"^8.0.1","chalk":"^5.3.0","commander":"^12.1.0","@bozhidar003/vibe-design-server":"^0.1.0","@bozhidar003/vibe-design-detector":"^0.1.0","@bozhidar003/vibe-design-skill-generator":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vibe-design_0.1.0_1776176385347_0.0815300382946742","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@bozhidar003/vibe-design","version":"0.2.0","keywords":["vibe-design","design","overlay","claude","ai","css","tailwind","frontend","developer-tools"],"author":{"name":"Bozhidar Kamenski"},"license":"MIT","_id":"@bozhidar003/vibe-design@0.2.0","maintainers":[{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"}],"homepage":"https://github.com/Bozhidar003/vibe-design#readme","bugs":{"url":"https://github.com/Bozhidar003/vibe-design/issues"},"bin":{"vibe-design":"dist/index.js"},"dist":{"shasum":"08ced0befc3e7861cd0ac9b33d2396383eeefb5e","tarball":"https://registry.npmjs.org/@bozhidar003/vibe-design/-/vibe-design-0.2.0.tgz","fileCount":18,"integrity":"sha512-hMpOaElBVXQlxmJq56IRHfx0S+dixvtkEf8dLj0oBwUrvFb/bp47S4f9YGzMtd9DrZWd7/JBqNP0lRhCIQpG2w==","signatures":[{"sig":"MEYCIQCQiz6zkuZHue/10XK33A7L4eEcWc6gsKs39DAW3SIrbgIhANfV+GWZUenlJUhqaNFu1mb6cW5YWUbq4pyk2wxr21lL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":164254},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"017972d70a2e0494b44ba41c6f6fb45cacebe69f","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"},"repository":{"url":"git+https://github.com/Bozhidar003/vibe-design.git","type":"git"},"_npmVersion":"11.4.2","description":"Click what's broken. Describe what you want. Claude fixes it.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"ws":"^8.16.0","ora":"^8.0.1","glob":"^10.3.0","chalk":"^5.3.0","express":"^4.18.0","commander":"^12.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","@types/ws":"^8.5.0","typescript":"^5.4.0","@types/node":"^20.0.0","@types/express":"^4.17.0","@bozhidar003/vibe-design-server":"*","@bozhidar003/vibe-design-detector":"*","@bozhidar003/vibe-design-skill-generator":"*"},"_npmOperationalInternal":{"tmp":"tmp/vibe-design_0.2.0_1776176800044_0.31959800285863493","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@bozhidar003/vibe-design","version":"0.2.1","keywords":["vibe-design","design","overlay","claude","ai","css","tailwind","frontend","developer-tools"],"author":{"name":"Bozhidar Kamenski"},"license":"MIT","_id":"@bozhidar003/vibe-design@0.2.1","maintainers":[{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"}],"homepage":"https://github.com/Bozhidar003/vibe-design#readme","bugs":{"url":"https://github.com/Bozhidar003/vibe-design/issues"},"bin":{"vibe-design":"dist/index.js"},"dist":{"shasum":"55adfc8e077583c1e669485edeca689bcfbefbec","tarball":"https://registry.npmjs.org/@bozhidar003/vibe-design/-/vibe-design-0.2.1.tgz","fileCount":18,"integrity":"sha512-/Coy6GcM8cD7kUudU/Eikgo+w7IFoaykVINa9MDdeQ/e83Ls0QoKR+qDQFdf04cTOjG3sbdWn6m7pI0VcOz3+g==","signatures":[{"sig":"MEQCIDHtQ1Gvv2zeAnP4HWcnOlqK2gQerJmEYky1PJKQ/q2GAiAMOmYH+koY+9BX9LXkKLmKe0YdcKwRTB0djExJM/Os7g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":95991},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"017972d70a2e0494b44ba41c6f6fb45cacebe69f","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"},"repository":{"url":"git+https://github.com/Bozhidar003/vibe-design.git","type":"git"},"_npmVersion":"11.4.2","description":"Click what's broken. Describe what you want. Claude fixes it.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"ws":"^8.16.0","ora":"^8.0.1","glob":"^10.3.0","chalk":"^5.3.0","express":"^4.18.0","commander":"^12.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","@types/ws":"^8.5.0","typescript":"^5.4.0","@types/node":"^20.0.0","@types/express":"^4.17.0","@bozhidar003/vibe-design-server":"*","@bozhidar003/vibe-design-detector":"*","@bozhidar003/vibe-design-skill-generator":"*"},"_npmOperationalInternal":{"tmp":"tmp/vibe-design_0.2.1_1776177809759_0.22663919797594634","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@bozhidar003/vibe-design","version":"0.2.2","description":"Click what's broken. Describe what you want. Claude fixes it.","type":"module","license":"MIT","author":{"name":"Bozhidar Kamenski"},"repository":{"type":"git","url":"git+https://github.com/Bozhidar003/vibe-design.git"},"homepage":"https://github.com/Bozhidar003/vibe-design#readme","bugs":{"url":"https://github.com/Bozhidar003/vibe-design/issues"},"keywords":["vibe-design","design","overlay","claude","ai","css","tailwind","frontend","developer-tools"],"engines":{"node":">=18"},"bin":{"vibe-design":"dist/index.js"},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"publishConfig":{"access":"public"},"scripts":{"build":"tsup && (cp ../overlay/dist/overlay.global.js dist/ 2>/dev/null; cp ../../README.md . 2>/dev/null; cp ../../LICENSE . 2>/dev/null; exit 0)","dev":"tsup --watch","prepublishOnly":"npm run build"},"dependencies":{"commander":"^12.1.0","chalk":"^5.3.0","ora":"^8.0.1","express":"^4.18.0","ws":"^8.16.0","glob":"^10.3.0"},"devDependencies":{"@bozhidar003/vibe-design-detector":"*","@bozhidar003/vibe-design-skill-generator":"*","@bozhidar003/vibe-design-server":"*","tsup":"^8.0.0","typescript":"^5.4.0","@types/node":"^20.0.0","@types/express":"^4.17.0","@types/ws":"^8.5.0"},"_id":"@bozhidar003/vibe-design@0.2.2","gitHead":"4454f0374222c3944e00b3972798b9ec16da7cef","_nodeVersion":"24.3.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-IMvFf524NeX1EC+jRWU1vLJH9t7O/2aA6zgx4TmGJu9/p5F/YO+xI/iq2eVH+b0ZE1S4qIr7smR73uJiL2Ekcg==","shasum":"dc50576934192a3dbe2e37fa1bfbc21348b527e7","tarball":"https://registry.npmjs.org/@bozhidar003/vibe-design/-/vibe-design-0.2.2.tgz","fileCount":19,"unpackedSize":168813,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDs9uMNlfpyB7KZkqxH5MKKYSlOKvaatP+DrrPSM3wD8wIgfWKFEan3NtSKUabuhaf1/VK0CT/cBReplCte1snhhhg="}]},"_npmUser":{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"},"directories":{},"maintainers":[{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vibe-design_0.2.2_1776201581437_0.9802623875809546"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-14T14:19:45.197Z","modified":"2026-04-14T21:19:41.705Z","0.1.0":"2026-04-14T14:19:45.482Z","0.2.0":"2026-04-14T14:26:40.196Z","0.2.1":"2026-04-14T14:43:29.919Z","0.2.2":"2026-04-14T21:19:41.586Z"},"bugs":{"url":"https://github.com/Bozhidar003/vibe-design/issues"},"author":{"name":"Bozhidar Kamenski"},"license":"MIT","homepage":"https://github.com/Bozhidar003/vibe-design#readme","keywords":["vibe-design","design","overlay","claude","ai","css","tailwind","frontend","developer-tools"],"repository":{"type":"git","url":"git+https://github.com/Bozhidar003/vibe-design.git"},"description":"Click what's broken. Describe what you want. Claude fixes it.","maintainers":[{"name":"bozhidar003","email":"bozhidarkamenski@gmail.com"}],"readme":"# Vibe Design\n\n[![npm version](https://img.shields.io/npm/v/@bozhidar003/vibe-design.svg)](https://www.npmjs.com/package/@bozhidar003/vibe-design)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n\n**Click what's broken. Describe what you want. Claude fixes it.**\n\nVibe Design injects a design overlay into your dev server. Click any element, say what you want to change, and Claude Code edits the code for you — with full context about your component, styles, design tokens, and conventions.\n\n## Install\n\n```bash\nnpm install -g @bozhidar003/vibe-design\n```\n\nOr use directly with npx:\n\n```bash\nnpx @bozhidar003/vibe-design setup ~/my-project\n```\n\n## Quick Start\n\n**Terminal 1** — start vibe-design:\n```bash\nvibe-design setup ~/my-project\n```\n\n**Terminal 2** — start your dev server:\n```bash\ncd ~/my-project && npm run dev\n```\n\nOpen your app in the browser. Press **Cmd+D**. Click any element. Type what you want. Hit Send.\n\n> If you're already inside your project directory, just run `vibe-design setup` with no arguments.\n\n## Simple Mode\n\nSkip the FAB button and quick actions. Just hover, click, type:\n\n```bash\nvibe-design start --simple --dir /path/to/your/project\n```\n\n## What Happens When You Click Send\n\n1. The overlay collects the element's component name, file path, CSS classes, computed styles, parent layout, and your design system rules\n2. It detects issues automatically — low contrast, missing hover states, inconsistent tokens\n3. If you say \"make this better\", it adds specific suggestions based on what's missing\n4. Claude Code receives all of this as a single prompt, edits the file, and your dev server hot-reloads\n\n## Commands\n\n```bash\nvibe-design init                    # Detect stack, generate config + skills\nvibe-design start                   # Start server (add --simple for minimal UI)\nvibe-design sync                    # Regenerate skills after adding deps\nvibe-design detect                  # Print detected stack\nvibe-design task \"change this\"      # Create a task from CLI\nvibe-design eject                   # Remove overlay, keep skills\nvibe-design design-system list      # Show design rules\nvibe-design design-system add \"...\" # Add a rule enforced in every prompt\n```\n\nAll commands accept `--dir <path>` to target a project.\n\n## Design System\n\nRules you define are included in every prompt to Claude:\n\n```bash\nvibe-design design-system add \"Buttons use rounded-full\" --dir ./my-project\nvibe-design design-system add \"Primary color is blue-600\" --dir ./my-project\n```\n\n`init` creates sensible defaults. Edit `.vibe/design-system.json` directly or use the CLI.\n\n## What init Creates\n\n```\nyour-project/\n├── .vibe/\n│   ├── config.json              # Server config\n│   ├── design-system.json       # Your design rules\n│   └── skills/\n│       ├── TAILWIND.md          # Extracted design tokens\n│       ├── COMPONENTS.md        # Component index\n│       └── CONVENTIONS.md       # Project patterns\n├── .claude/skills/vibe-design/\n│   ├── VIBE_DESIGN.md           # Task execution skill\n│   └── FRONTEND_DESIGN.md      # Design quality skill\n└── next.config.ts               # Adapter (dev-only, no-op in production)\n```\n\n## Supported Stacks\n\n| | Detected |\n|---|---|\n| **Frameworks** | Next.js, Vite, Remix, Nuxt, SvelteKit |\n| **CSS** | Tailwind (with config parsing), CSS Modules, styled-components, Emotion |\n| **Components** | shadcn/ui, Radix, Mantine, Chakra, MUI |\n| **Resolution** | React Fiber, Vue internals, Svelte metadata, DOM heuristics |\n\n## Production\n\nZero impact. The overlay and adapter are gated behind `NODE_ENV === \"development\"` and tree-shaken out of production builds. No packages are installed in your project.\n\nTo fully remove: `vibe-design eject --dir ./my-project`\n\n## Requirements\n\n- Node.js >= 18\n- Claude Code CLI installed and authenticated\n- A web project with a dev server\n\n## Development\n\n```bash\ngit clone https://github.com/Bozhdiar003/vibe_design.git\ncd vibe_design\nnpm install\nnpm run build\n```\n\n## Publishing (CI/CD)\n\nThis project uses GitHub Actions to publish to npm on release creation. Set the `NPM_TOKEN` secret in your GitHub repo settings (Settings > Secrets > Actions > New repository secret).\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.\n\n## License\n\n[MIT](./LICENSE) &copy; Bozhidar Kamenski\n","readmeFilename":"README.md"}