{"_id":"vibefigma","_rev":"3-61d99912bbbc2974996e42e383204fa9","name":"vibefigma","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"vibefigma","version":"1.0.0","keywords":["figma","react","converter","cli","jsx","tsx","tailwind","tailwindcss","design-to-code","figma-to-react","figma-api","code-generation","component-generator"],"author":{"url":"https://vibeflow.ai","name":"VibeFlowing Inc"},"license":"FSL-1.1-MIT","_id":"vibefigma@1.0.0","maintainers":[{"name":"alessiapacca","email":"alessia@vibeflow.ai"}],"homepage":"https://github.com/vibeflowing-inc/vibe_figma#readme","bugs":{"url":"https://github.com/vibeflowing-inc/vibe_figma/issues"},"bin":{"vibefigma":"bin/vibefigma.js"},"dist":{"shasum":"3da4de282d2de3311205f0d45d6410f37394f975","tarball":"https://registry.npmjs.org/vibefigma/-/vibefigma-1.0.0.tgz","fileCount":7,"integrity":"sha512-Z6oFU7WQ6i5utyzwGVgW2o6c4uZVOjcAt895cv0DYZAiNoBI5A0Les/0oXjIRZbLQCP4Lco2Su1OO7/DsqJsRA==","signatures":[{"sig":"MEUCIFw0NgWY3xQxJJG5sYSyFjanokPbylBw8SAfbtfAgBXEAiEAyRjdtkldVuIWGfPDlx+tjoyxzZ3NJC5Dv09ffgghWZs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6305861},"main":"dist/cli/index.js","type":"module","engines":{"node":">=18.0.0"},"gitHead":"8993470f80cf94b6d2530aac21211416c265d1d0","scripts":{"cli":"node bin/vibefigma.js","dev":"bun run --hot src/index.ts","dev:cli":"bun run src/cli/index.ts","build:cli":"bun build src/cli/index.ts --outfile dist/cli/index.js --target node --format esm --outdir dist","prepublishOnly":"bun run build:cli"},"_npmUser":{"name":"alessiapacca","email":"alessia@vibeflow.ai"},"repository":{"url":"git+https://github.com/vibeflowing-inc/vibe_figma.git","type":"git"},"_npmVersion":"10.8.2","description":"Convert Figma designs to React components with Tailwind CSS","directories":{},"_nodeVersion":"22.8.0","dependencies":{"ai":"^6.0.39","ora":"^9.1.0","zod":"^4.3.5","hono":"^4.11.4","chalk":"^5.6.2","colord":"2.9.3","postcss":"^8.4.20","prompts":"^2.4.2","css-what":"6.1.0","prettier":"^3.8.0","commander":"^14.0.2","htmltojsx":"^0.3.0","tailwindcss":"3","@babel/types":"^7.28.6","@babel/parser":"^7.28.6","@ai-sdk/google":"^3.0.10","@babel/traverse":"^7.28.6","@babel/generator":"^7.28.6","hono-rate-limiter":"^0.5.3","postcss-safe-parser":"^6.0.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest","typescript":"^5.9.3","@types/node":"^25.0.10","@types/prompts":"^2.4.9","@types/htmltojsx":"^0.0.33","@types/babel__traverse":"^7.28.0","@types/babel__generator":"^7.27.0","@types/postcss-safe-parser":"^5.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vibefigma_1.0.0_1769227484607_0.8778251765804741","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"vibefigma","version":"1.0.1","keywords":["figma","react","converter","cli","jsx","tsx","tailwind","tailwindcss","design-to-code","figma-to-react","figma-api","code-generation","component-generator"],"author":{"url":"https://vibeflow.ai","name":"VibeFlowing Inc"},"license":"AGPL-3.0","_id":"vibefigma@1.0.1","maintainers":[{"name":"alessiapacca","email":"alessia@vibeflow.ai"}],"homepage":"https://github.com/vibeflowing-inc/vibe_figma#readme","bugs":{"url":"https://github.com/vibeflowing-inc/vibe_figma/issues"},"bin":{"vibefigma":"bin/vibefigma.js"},"dist":{"shasum":"a9f79e0c397f70fe672311289c3fac9a5a6077ff","tarball":"https://registry.npmjs.org/vibefigma/-/vibefigma-1.0.1.tgz","fileCount":7,"integrity":"sha512-alvQBLE1Ta9fnOgPdMjQcVU6qxB/Vzqt9mwsFAEfb+CtNtLifwYi8Jx23FMs6bklFHHqqVf3O9yEIS4HgJ0THA==","signatures":[{"sig":"MEQCIBzkJG1E9rD6Br0VSxDSoeG+8safmKs7bgk+sTGrKvFcAiBNB7PbA3rM3u9U/4d28eJNRy3CyojYFdNnDkp9DXyXQw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6338211},"main":"dist/cli/index.js","type":"module","engines":{"node":">=18.0.0"},"gitHead":"acde131a784a1a9dcbe729113516151c33b930b0","scripts":{"cli":"node bin/vibefigma.js","dev":"bun run --hot src/index.ts","dev:cli":"bun run src/cli/index.ts","build:cli":"mkdir -p dist/cli && bun build src/cli/index.ts --outdir dist/cli --target node --format esm --entry-naming [name].js","prepublishOnly":"bun run build:cli"},"_npmUser":{"name":"alessiapacca","email":"alessia@vibeflow.ai"},"repository":{"url":"git+https://github.com/vibeflowing-inc/vibe_figma.git","type":"git"},"_npmVersion":"10.8.2","description":"Convert Figma designs to React components with Tailwind CSS","directories":{},"_nodeVersion":"22.8.0","dependencies":{"ai":"^6.0.39","ora":"^9.1.0","zod":"^4.3.5","hono":"^4.11.4","chalk":"^5.6.2","colord":"2.9.3","postcss":"^8.4.20","prompts":"^2.4.2","css-what":"6.1.0","prettier":"^3.8.0","commander":"^14.0.2","htmltojsx":"^0.3.0","tailwindcss":"3","@babel/types":"^7.28.6","@babel/parser":"^7.28.6","@ai-sdk/google":"^3.0.10","@babel/traverse":"^7.28.6","@babel/generator":"^7.28.6","hono-rate-limiter":"^0.5.3","postcss-safe-parser":"^6.0.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest","typescript":"^5.9.3","@types/node":"^25.0.10","@types/prompts":"^2.4.9","@types/htmltojsx":"^0.0.33","@types/babel__traverse":"^7.28.0","@types/babel__generator":"^7.27.0","@types/postcss-safe-parser":"^5.0.1"},"_npmOperationalInternal":{"tmp":"tmp/vibefigma_1.0.1_1769489603597_0.7651162251252526","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"vibefigma","version":"1.0.2","description":"Convert Figma designs to React components with Tailwind CSS","type":"module","main":"dist/cli/index.js","bin":{"vibefigma":"bin/vibefigma.js"},"keywords":["figma","react","converter","cli","jsx","tsx","tailwind","tailwindcss","design-to-code","figma-to-react","figma-api","code-generation","component-generator"],"author":{"name":"VibeFlowing Inc","url":"https://vibeflow.ai"},"repository":{"type":"git","url":"git+https://github.com/vibeflowing-inc/vibe_figma.git"},"bugs":{"url":"https://github.com/vibeflowing-inc/vibe_figma/issues"},"homepage":"https://github.com/vibeflowing-inc/vibe_figma#readme","license":"AGPL-3.0","engines":{"node":">=18.0.0"},"scripts":{"dev":"bun run --hot src/index.ts","dev:cli":"bun run src/cli/index.ts","build:cli":"mkdir -p dist/cli && bun build src/cli/index.ts --outdir dist/cli --target node --format esm --entry-naming [name].js","cli":"node bin/vibefigma.js","prepublishOnly":"bun run build:cli"},"dependencies":{"@ai-sdk/google":"^3.0.10","@babel/generator":"^7.28.6","@babel/parser":"^7.28.6","@babel/traverse":"^7.28.6","@babel/types":"^7.28.6","ai":"^6.0.39","chalk":"^5.6.2","colord":"2.9.3","commander":"^14.0.2","css-what":"6.1.0","dotenv":"^17.2.3","hono":"^4.11.4","hono-rate-limiter":"^0.5.3","htmltojsx":"^0.3.0","ora":"^9.1.0","postcss":"^8.4.20","postcss-safe-parser":"^6.0.0","prettier":"^3.8.0","prompts":"^2.4.2","tailwindcss":"3","zod":"^4.3.5"},"devDependencies":{"@types/babel__generator":"^7.27.0","@types/babel__traverse":"^7.28.0","@types/bun":"latest","@types/htmltojsx":"^0.0.33","@types/node":"^25.0.10","@types/postcss-safe-parser":"^5.0.1","@types/prompts":"^2.4.9","typescript":"^5.9.3"},"_id":"vibefigma@1.0.2","gitHead":"3513913f7e76d4f9b1c4996861d522a7ad48f83f","_nodeVersion":"22.8.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Bg0HZnzDX1/THmP7Dwca49I6DigPgdvYUYvncTLGHzu7xRy1saBLSkKSNS2sJODVGcRPzeUnvNvigrfu5J42sA==","shasum":"beab785267dc512f7fa2fd59e329e75581ed9901","tarball":"https://registry.npmjs.org/vibefigma/-/vibefigma-1.0.2.tgz","fileCount":7,"unpackedSize":6342120,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCj9mw5//v1Jy743AqvRyWCL0aSXOByo4XXDmrTzvuAgAIgVTwVkY8CWnnmUi/NdNGhey826toV4/VR3QxpHuVw6h8="}]},"_npmUser":{"name":"alessiapacca","email":"alessia@vibeflow.ai"},"directories":{},"maintainers":[{"name":"alessiapacca","email":"alessia@vibeflow.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vibefigma_1.0.2_1769628593222_0.16587688169557024"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-24T04:04:44.606Z","modified":"2026-01-28T19:29:53.557Z","1.0.0":"2026-01-24T04:04:44.815Z","1.0.1":"2026-01-27T04:53:23.858Z","1.0.2":"2026-01-28T19:29:53.437Z"},"bugs":{"url":"https://github.com/vibeflowing-inc/vibe_figma/issues"},"author":{"name":"VibeFlowing Inc","url":"https://vibeflow.ai"},"license":"AGPL-3.0","homepage":"https://github.com/vibeflowing-inc/vibe_figma#readme","keywords":["figma","react","converter","cli","jsx","tsx","tailwind","tailwindcss","design-to-code","figma-to-react","figma-api","code-generation","component-generator"],"repository":{"type":"git","url":"git+https://github.com/vibeflowing-inc/vibe_figma.git"},"description":"Convert Figma designs to React components with Tailwind CSS","maintainers":[{"name":"alessiapacca","email":"alessia@vibeflow.ai"}],"readme":"# VibeFigma - Figma to React Converter\n\nTransform your Figma designs into production-ready React components with Tailwind CSS automatically.\n\n
\n \"VibeFigma\n
\n\n## Quick Start\n\nVibeFigma can be used in multiple ways:\n\n## Claude Code Skill\n\nFor Claude Code, install the skill to enable Figma to React conversion directly within your Claude Code environment.\n\n```sh\nnpx npx skills add vibeflowing-inc/vibe_figma --skill vibefigma\n```\n\n### 2. Using our CLI (Interactive - Easiest!)\n\n```bash\nnpx vibefigma --interactive\n```\n\nThe CLI will guide you through:\n- Entering your Figma URL\n- Providing your access token\n- Choosing output paths\n\n### 3. Direct Command (Fast)\n\n```bash\nnpx vibefigma \"https://www.figma.com/design/4i8Tp5btFPRqtkYXplnfT6/50-Web-Sign-up-log-in-designs--Community-?node-id=26-2944&t=d8ZfhZOwcLuUz0Jz-4\" --token YOUR_TOKEN\n```\n\n### 3. Using Environment Variable\n\nSet your Figma token once:\n\n```bash\nexport FIGMA_TOKEN=your_figma_access_token\nnpx vibefigma \"https://www.figma.com/design/4i8Tp5btFPRqtkYXplnfT6/50-Web-Sign-up-log-in-designs--Community-?node-id=26-2944&t=d8ZfhZOwcLuUz0Jz-4\"\n```\n\n### 🔑 Getting a Figma Access Token\n\n1. Go to [Figma Account Settings](https://www.figma.com/settings)\n2. Scroll to **Personal Access Tokens**\n3. Click **Generate new token**\n4. Give it a name and click **Generate**\n5. Copy the token (you won't see it again!)\n6. Store it securely in a `.env` file or pass via `--token` flag\n\n\n## Features\n\n- **Official Figma API Integration** - Direct integration with Figma's API for accurate design extraction\n- **React Component Generation** - Convert Figma frames to React/TypeScript components\n- **Tailwind CSS Support** - Automatic Tailwind class generation (enabled by default)\n- **Code Optimization** - Optional AI-powered code cleanup\n\n## Advanced Usage\n\n### Basic Usage\n\n```bash\n# Convert a Figma design to React component\nnpx vibefigma \"https://www.figma.com/design/4i8Tp5btFPRqtkYXplnfT6/50-Web-Sign-up-log-in-designs--Community-?node-id=26-2944&t=d8ZfhZOwcLuUz0Jz-4\"\n```\n\n### Custom Output Paths\n\n```bash\n# Save to specific directory\nnpx vibefigma [url] -c ./src/components -a ./public/assets\n\n# Save to specific file\nnpx vibefigma [url] -c ./src/components/Hero.tsx\n```\n\n### Disable Tailwind CSS\n\n```bash\n# Generate regular CSS instead of Tailwind\nnpx vibefigma [url] --no-tailwind\n```\n\n### Advanced Options\n\n```bash\nnpx vibefigma [url] \\\n --token YOUR_TOKEN \\\n --component ./src/components \\\n --assets ./public/assets \\\n --optimize \\\n --clean\n```\n\n## Command Options\n\n```\nUsage: vibefigma [options] [url]\n\nConvert Figma designs to React components\n\nArguments:\n url Figma file/node URL\n\nOptions:\n -V, --version Output the version number\n -t, --token Figma access token (overrides FIGMA_TOKEN env var)\n -u, --url Figma file/node URL\n -c, --component Component output path (default: ./src/components/[ComponentName].tsx)\n -a, --assets Assets directory (default: ./public)\n --no-tailwind Disable Tailwind CSS (enabled by default)\n --optimize Optimize components\n --clean Use AI code cleaner (requires GOOGLE_GENERATIVE_AI_API_KEY)\n --no-classes Don't generate CSS classes\n --no-absolute Don't use absolute positioning\n --no-responsive Disable responsive design\n --no-fonts Don't include fonts\n --interactive Force interactive mode\n -h, --help Display help for command\n```\n\n\n## API Server\n\nThis project also includes a REST API server:\n\n```bash\n# Install dependencies\nbun install\n\n# Run development server\nbun run dev\n\n# Server runs on http://localhost:3000\n```\n\n### Configuration\n\n#### Environment Variables\n\nCreate a `.env` file:\n\n```env\nGOOGLE_GENERATIVE_AI_API_KEY=your_google_ai_key\nPORT=3000\nHOST=0.0.0.0\nCORS_ORIGIN=*\n```\n\n### API Usage\n\nThe project includes a REST API for Figma to React conversion:\n\n```bash\nPOST /v1/api/vibe-figma\n```\n\nSee [API.md](docs/API.md) for full API documentation.\n\n\n## CLI Development\n\n```bash\n# Run CLI in development mode\nbun run dev:cli\n\n# Build CLI\nbun run build:cli\n\n# Test CLI locally\nbun run cli -- --help\n```\n\n## Demo Video\n\n
\n \n \"VibeFigma\n \n
\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Acknowledgments\n\nThis project includes code derived from [css-to-tailwindcss](https://github.com/Jackardios/css-to-tailwindcss) by Salakhutdinov Salavat, licensed under the MIT License.\n\n## License\n\nThis project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). See the [LICENSE](LICENSE) file for the full license text.\n\nSee the [NOTICE](NOTICE) file for details about third-party code used in this project.\n","readmeFilename":"README.md"}