figma-to-code-agent 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.3.2] - 2026-02-12
+
+### Fixed
+- Rename CLI bin from `figma-to-code` to `figma-to-code-agent` to avoid npm naming conflict
+- Update all docs and help text to use `npx figma-to-code-agent`
+
+## [0.3.1] - 2026-02-12
+
+### Changed
+- Update README and QUICKSTART for npm package usage (`npx figma-to-code`)
+- Add `files`, `engines`, `prepublishOnly` to package.json for cleaner npm publish
+- Fix all 62 ESLint errors and warnings
+
 ## [0.3.0] - 2026-02-12
 
 ### Added

package/QUICKSTART.md

@@ -1,14 +1,13 @@
 # Quick Start
 
-## 1. Install & Build
+## 1. Install
 
 ```bash
-git clone https://github.com/lewiscutey/figma-to-code-agent.git
-cd figma-to-code-agent
-npm install
-npm run build
+npm install -g figma-to-code-agent
 ```
 
+Or skip install and use `npx figma-to-code-agent` directly.
+
 ## 2. Get Your Figma Token
 
 1. Go to [Figma API Settings](https://www.figma.com/developers/api#access-tokens)
@@ -31,7 +30,7 @@ Node ID format: `100-200` (use hyphen, not colon)
 
 ```bash
 # React component
-node dist/cli.js \
+npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file ABC123DEF456 \
   --node 100-200 \
@@ -39,7 +38,7 @@ node dist/cli.js \
   --output ./output
 
 # Vue component
-node dist/cli.js \
+npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file ABC123DEF456 \
   --node 100-200 \
@@ -51,7 +50,7 @@ Or use environment variable:
 
 ```bash
 export FIGMA_TOKEN="your-token"
-node dist/cli.js --file ABC123DEF456 --node 100-200 --output ./output
+npx figma-to-code-agent --file ABC123DEF456 --node 100-200 --output ./output
 ```
 
 ## 5. Preview in Browser
@@ -59,7 +58,7 @@ node dist/cli.js --file ABC123DEF456 --node 100-200 --output ./output
 Add `--preview` to instantly open the result in your browser:
 
 ```bash
-node dist/cli.js \
+npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file ABC123DEF456 \
   --node 100-200 \
@@ -75,7 +74,7 @@ This copies the generated files to the built-in test app, starts a Vite dev serv
 By default, generates `.jsx` / `.vue`. Add `--typescript` for `.tsx` output:
 
 ```bash
-node dist/cli.js \
+npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file ABC123DEF456 \
   --node 100-200 \
@@ -128,7 +127,7 @@ For smarter component naming and code optimization, add an LLM provider:
 
 ```bash
 # AWS Bedrock
-node dist/cli.js \
+npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file ABC123DEF456 \
   --framework react \
@@ -138,7 +137,7 @@ node dist/cli.js \
   --output ./output
 
 # OpenAI
-LLM_API_KEY="sk-..." node dist/cli.js \
+LLM_API_KEY="sk-..." npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file ABC123DEF456 \
   --framework react \
@@ -166,33 +165,4 @@ The tool auto-retries with backoff. If persistent, wait a minute and try again.
 Check that the `assets/` folder was generated alongside your component. Image paths are relative imports.
 
 **Preview not working**
-Make sure `test-app/test-react/node_modules` (or `test-vue`) exists. Run `npm install` inside the test-app directory first:
-```bash
-cd test-app/test-react && npm install
-```
-
-## Try the Pre-built Examples
-
-The `test-app/` directory contains pre-generated components from the 4 examples shown in the README. You can preview them directly without a Figma token:
-
-```bash
-# React examples
-cd test-app/test-react
-npm install
-npx vite --open
-
-# Vue examples
-cd test-app/test-vue
-npm install
-npx vite --open
-```
-
-Edit `src/main.jsx` (or `src/main.js` for Vue) to switch between components:
-
-```jsx
-// Try different pages:
-import { Component } from './Component.jsx'     // MIUI12
-import { Homepage } from './Homepage.jsx'        // World Peas Homepage
-import { ShoppingCart } from './ShoppingCart.jsx' // Shopping Cart
-import { ProductPage } from './ProductPage.jsx'  // Product Page
-```
+The `--preview` flag requires the built-in test-app. If installed globally, it should work out of the box. If using npx, the test-app is included in the package.

package/README.md

@@ -3,8 +3,6 @@
 Convert Figma designs to production-ready React/Vue components. Supports CSS Modules, Tailwind, and plain CSS.
 
 > 📖 New here? Check the [Quick Start Guide](QUICKSTART.md) for step-by-step setup.
->
-> 🖥️ Want to see it in action? Run the examples in [test-app/](test-app/) — pre-generated React and Vue components ready to preview.
 
 ## Examples
 
@@ -43,14 +41,23 @@ Convert Figma designs to production-ready React/Vue components. Supports CSS Mod
 - 👁️ Figma layer filtering (hidden layers, mask shapes)
 - 🤖 Optional AI enhancements (semantic naming, component splitting, code optimization)
 
-## Quick Start
+## Install
 
 ```bash
-npm install
-npm run build
+npm install -g figma-to-code-agent
+```
 
+Or use directly with npx (no install needed):
+
+```bash
+npx figma-to-code-agent --token YOUR_FIGMA_TOKEN --file FILE_KEY --node NODE_ID --output ./output
+```
+
+## Quick Start
+
+```bash
 # Generate React component
-node dist/cli.js \
+npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file FILE_KEY \
   --node NODE_ID \
@@ -58,7 +65,7 @@ node dist/cli.js \
   --output ./output
 
 # Generate and preview in browser
-node dist/cli.js \
+npx figma-to-code-agent \
   --token YOUR_FIGMA_TOKEN \
   --file FILE_KEY \
   --node NODE_ID \
@@ -133,6 +140,9 @@ src/
 ## Development
 
 ```bash
+git clone https://github.com/lewiscutey/figma-to-code-agent.git
+cd figma-to-code-agent
+npm install
 npm run build        # Compile TypeScript
 npm test             # Run all tests (129 tests)
 npm run lint         # ESLint

package/dist/cli.js

@@ -45,7 +45,7 @@ async function main() {
 Figma-to-Code AI Agent
 
 Usage:
-  figma-to-code --token <token> --file <fileKey> [options]
+  figma-to-code-agent --token <token> --file <fileKey> [options]
 
 Options:
   --token <token>       Figma API token (required)
@@ -70,8 +70,8 @@ Options:
   --help                Show this help message
 
 Example:
-  figma-to-code --token abc123 --file xyz789 --framework react --output ./src/components
-  figma-to-code --token abc123 --file xyz789 --framework react --preview
+  figma-to-code-agent --token abc123 --file xyz789 --framework react --output ./src/components
+  figma-to-code-agent --token abc123 --file xyz789 --framework react --preview
     `);
         process.exit(0);
     }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "figma-to-code-agent",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "AI Agent that converts Figma designs to production-ready code with optional LLM enhancements",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {
-    "figma-to-code": "dist/cli.js"
+    "figma-to-code-agent": "dist/cli.js"
   },
   "files": [
     "dist",