design-lazyyy-cli 0.1.0

package/README.md

@@ -0,0 +1,291 @@
+<div align="center">
+
+# design-lazyyy-cli
+
+**Control Figma Desktop from your terminal. No API key needed.**
+
+[![MIT License](https://img.shields.io/badge/license-MIT-7c3aed?style=flat-square)](LICENSE)
+[![Node.js](https://img.shields.io/badge/node-%3E%3D18-7c3aed?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org)
+[![Platform](https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-7c3aed?style=flat-square)]()
+
+---
+
+Create design tokens, render UI with JSX, manage variables, export CSS/Tailwind
+all through a single CLI connected to Figma Desktop via Chrome DevTools Protocol.
+
+</div>
+
+<br>
+
+## Why design-lazyyy-cli?
+
+| Pain Point | Solution |
+|:---|:---|
+| Figma REST API requires tokens & has rate limits | Direct desktop connection, zero config |
+| Manually creating 200+ color variables | `tokens tailwind` generates 242 variables instantly |
+| Switching between Figma and code for tokens | `export css` / `export tailwind` in one command |
+| Building complex layouts click-by-click | JSX-like `render` command creates nested auto-layouts |
+| Repetitive design system setup | `tokens ds` bootstraps a complete system in seconds |
+
+<br>
+
+## Quick Start
+
+### Prerequisites
+
+- **Node.js** >= 18
+- **Figma Desktop** (free account works)
+
+### Installation
+
+```bash
+# Install globally via npm
+npm install -g design-lazyyy-cli
+
+# One-time setup: patch Figma & install figma-use
+design-lazyyy-cli init
+
+# Connect to Figma Desktop
+design-lazyyy-cli connect
+```
+
+> **Tip:** Run `design-lazyyy-cli status` to verify the connection is active.
+
+<br>
+
+## Usage with Claude Code
+
+design-lazyyy-cli ships with a `CLAUDE.md` that teaches Claude every command. No `/init` needed.
+
+```bash
+cd design-lazyyy-cli
+claude
+```
+
+Then just talk naturally:
+
+> "Create a complete design system with Tailwind colors"
+> "Render a card component with title and description"
+> "Export all variables as CSS custom properties"
+
+Claude handles the rest.
+
+<br>
+
+## Core Commands
+
+### Connect & Status
+
+```bash
+node src/index.js connect          # Connect to Figma Desktop
+node src/index.js status           # Check connection status
+```
+
+### Design Tokens
+
+```bash
+# Full design system (colors, spacing, typography, radii)
+node src/index.js tokens ds
+
+# Tailwind CSS palette (22 families x 11 shades = 242 variables)
+node src/index.js tokens tailwind
+
+# Spacing scale (4px base system)
+node src/index.js tokens spacing
+```
+
+### Create Elements
+
+All `create` commands auto-position to avoid overlaps.
+
+```bash
+node src/index.js create rect "Card" -w 320 -h 200 --fill "#fff" --radius 12
+node src/index.js create circle "Avatar" -w 48 --fill "#3b82f6"
+node src/index.js create text "Hello" -s 24 -c "#000" -w bold
+node src/index.js create autolayout "Stack" -d col -g 16 -p 24
+node src/index.js create icon lucide:star -s 24 -c "#f59e0b"
+node src/index.js create component "Button"
+```
+
+### Render with JSX
+
+Build complex nested layouts in a single command:
+
+```bash
+node src/index.js render '<Frame name="Card" w={320} bg="#fff" rounded={16} flex="col" gap={8} p={24}>
+  <Text size={20} weight="bold" color="#111">Card Title</Text>
+  <Text size={14} color="#666" w="fill">Description goes here</Text>
+</Frame>'
+```
+
+<details>
+<summary><strong>JSX Props Reference</strong></summary>
+
+| Prop | Description | Example |
+|:-----|:-----------|:--------|
+| `w` | Width (px or `"fill"`) | `w={320}` |
+| `h` | Height | `h={200}` |
+| `bg` | Background color | `bg="#fff"` |
+| `rounded` | Corner radius | `rounded={16}` |
+| `flex` | Auto-layout direction | `flex="col"` or `flex="row"` |
+| `gap` | Spacing between children | `gap={8}` |
+| `p` | Padding (all sides) | `p={24}` |
+| `x`, `y` | Canvas position | `x={100} y={0}` |
+| `size` | Font size (Text only) | `size={20}` |
+| `weight` | Font weight (Text only) | `weight="bold"` |
+| `color` | Text color (Text only) | `color="#111"` |
+
+</details>
+
+### Modify Elements
+
+Works on current selection or a specific node with `-n "1:234"`.
+
+```bash
+node src/index.js set fill "#3b82f6"
+node src/index.js set stroke "#e4e4e7" -w 1
+node src/index.js set radius 12
+node src/index.js set size 320 200
+node src/index.js set pos 100 100
+node src/index.js set opacity 0.5
+node src/index.js set autolayout row -g 8 -p 16
+node src/index.js set name "Header"
+```
+
+### Variable Binding
+
+Bind design tokens to elements for theme-responsive designs:
+
+```bash
+node src/index.js bind fill "primary/500"
+node src/index.js bind stroke "border/default"
+node src/index.js bind radius "radius/md"
+node src/index.js bind gap "spacing/md"
+node src/index.js bind padding "spacing/lg"
+node src/index.js bind list                      # Show all bindable variables
+node src/index.js bind list -t COLOR             # Filter by type
+```
+
+### Sizing & Layout
+
+```bash
+node src/index.js sizing hug                     # Hug contents
+node src/index.js sizing fill                    # Fill container
+node src/index.js sizing fixed 320 200           # Fixed dimensions
+node src/index.js padding 16 24                  # Vertical, horizontal
+node src/index.js gap 16
+node src/index.js align center
+```
+
+### Find, Select & Inspect
+
+```bash
+node src/index.js find "Button"                  # Search by name
+node src/index.js find "Card" -t FRAME           # Filter by type
+node src/index.js select "1:234"                 # Select by node ID
+node src/index.js get                            # Inspect selection
+node src/index.js canvas info                    # Overview of canvas
+```
+
+### Duplicate, Delete & Arrange
+
+```bash
+node src/index.js duplicate                      # Duplicate selection
+node src/index.js delete "1:234"                 # Delete node
+node src/index.js arrange -g 100 -c 3            # Arrange in 3-column grid
+```
+
+### Export
+
+```bash
+node src/index.js export css                     # CSS custom properties
+node src/index.js export tailwind                # Tailwind config
+node src/index.js export screenshot -o shot.png  # Screenshot
+```
+
+### Variables & Collections
+
+```bash
+node src/index.js var list                       # List all variables
+node src/index.js var create "primary/500" -c "CollectionId" -t COLOR -v "#3b82f6"
+node src/index.js col list                       # List collections
+node src/index.js col create "Semantic Colors"   # Create collection
+```
+
+### FigJam
+
+```bash
+node src/index.js fj list                        # List pages
+node src/index.js fj sticky "Note" -x 100 -y 100
+node src/index.js fj shape "Box" -x 200 -y 100 -w 200 -h 100
+node src/index.js fj connect "NODE_1" "NODE_2"
+node src/index.js fj nodes                       # List elements
+node src/index.js fj eval "figma.currentPage.children.length"
+```
+
+### Advanced: Run Figma Plugin API
+
+```bash
+node src/index.js eval "figma.currentPage.name"
+node src/index.js raw query "//COMPONENT"
+node src/index.js raw query "//*[contains(@name, 'Button')]"
+```
+
+<br>
+
+## How It Works
+
+```
+┌──────────────────┐                        ┌──────────────────┐
+│                  │   Chrome DevTools       │                  │
+│  design-lazyyy   │ ◄────Protocol──────►    │  Figma Desktop   │
+│  CLI             │   (localhost:9222)      │                  │
+└──────────────────┘                        └──────────────────┘
+```
+
+The CLI connects to Figma Desktop through the Chrome DevTools Protocol on port `9222`. This means:
+
+- **No API key** required
+- **No rate limits**
+- **Full Plugin API** access (same as writing a Figma plugin)
+- Works with **free Figma accounts**
+
+<br>
+
+## Recommended Workflow
+
+```
+init  ➜  connect  ➜  tokens ds  ➜  tokens tailwind  ➜  create / render  ➜  bind variables  ➜  export
+```
+
+1. **Setup once** with `init` (patches Figma, installs dependencies)
+2. **Connect** to Figma Desktop
+3. **Bootstrap tokens** with `tokens ds` for a complete design system
+4. **Add Tailwind colors** with `tokens tailwind` (242 color variables)
+5. **Build UI** using `create` commands or `render` JSX
+6. **Bind variables** to elements for theme support
+7. **Export** as CSS or Tailwind config
+
+<br>
+
+## Tips
+
+- Use **`render`** instead of `eval` for anything with text  the render command handles font loading automatically
+- **Node IDs** look like `1:234`  get them from `find`, `canvas info`, or `raw query`
+- Every **`create` command auto-positions** so elements never overlap
+- Use **`rescale()` not `resize()`** in eval scripts to preserve layer integrity
+- Target specific nodes with **`-n "1:234"`** on any `set` or `bind` command
+
+<br>
+
+## Credits
+
+Built on top of [figma-use](https://github.com/dannote/figma-use) by dannote.
+
+## Author
+
+**plugin87**
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "design-lazyyy-cli",
+  "version": "0.1.0",
+  "description": "CLI for managing Figma design systems. Create variables, components, and more. No API key required.",
+  "author": "plugin87",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "design-lazyyy-cli": "src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "figma",
+    "design-system",
+    "design-tokens",
+    "cli",
+    "variables"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0",
+    "ora": "^8.0.0",
+    "ws": "^8.16.0"
+  }
+}

package/src/figjam-client.js

@@ -0,0 +1,310 @@
+/**
+ * FigJam CDP Client
+ *
+ * Connects directly to FigJam via Chrome DevTools Protocol,
+ * bypassing figma-use which has compatibility issues with FigJam.
+ */
+
+import WebSocket from 'ws';
+
+export class FigJamClient {
+  constructor() {
+    this.ws = null;
+    this.contexts = [];
+    this.figmaContextId = null;
+    this.msgId = 0;
+    this.callbacks = new Map();
+    this.pageTitle = null;
+  }
+
+  /**
+   * List all available FigJam pages
+   */
+  static async listPages() {
+    const response = await fetch('http://localhost:9222/json');
+    const pages = await response.json();
+    return pages
+      .filter(p => p.title.includes('FigJam'))
+      .map(p => ({ title: p.title, id: p.id, url: p.url }));
+  }
+
+  /**
+   * Connect to a FigJam page by title (partial match)
+   */
+  async connect(pageTitle) {
+    const response = await fetch('http://localhost:9222/json');
+    const pages = await response.json();
+    const page = pages.find(p => p.title.includes(pageTitle) && p.title.includes('FigJam'));
+
+    if (!page) {
+      const figjamPages = pages.filter(p => p.title.includes('FigJam'));
+      if (figjamPages.length > 0) {
+        throw new Error(`Page "${pageTitle}" not found. Available FigJam pages: ${figjamPages.map(p => p.title).join(', ')}`);
+      }
+      throw new Error('No FigJam pages open. Please open a FigJam file in Figma Desktop.');
+    }
+
+    this.pageTitle = page.title;
+
+    return new Promise((resolve, reject) => {
+      this.ws = new WebSocket(page.webSocketDebuggerUrl);
+
+      this.ws.on('open', async () => {
+        await this.send('Runtime.enable');
+
+        // Wait for contexts to be discovered
+        await new Promise(r => setTimeout(r, 1500));
+
+        // Find figma context
+        for (const ctx of this.contexts) {
+          try {
+            const result = await this.send('Runtime.evaluate', {
+              expression: 'typeof figma !== "undefined"',
+              contextId: ctx.id,
+              returnByValue: true
+            });
+
+            if (result.result?.result?.value === true) {
+              this.figmaContextId = ctx.id;
+              break;
+            }
+          } catch (e) {}
+        }
+
+        if (!this.figmaContextId) {
+          reject(new Error('Could not find figma context. Try refreshing the FigJam page.'));
+        } else {
+          resolve(this);
+        }
+      });
+
+      this.ws.on('message', (data) => {
+        const msg = JSON.parse(data);
+
+        if (msg.method === 'Runtime.executionContextCreated') {
+          this.contexts.push(msg.params.context);
+        }
+
+        if (msg.id && this.callbacks.has(msg.id)) {
+          this.callbacks.get(msg.id)(msg);
+          this.callbacks.delete(msg.id);
+        }
+      });
+
+      this.ws.on('error', reject);
+
+      setTimeout(() => reject(new Error('Connection timeout')), 10000);
+    });
+  }
+
+  send(method, params = {}) {
+    return new Promise((resolve) => {
+      const id = ++this.msgId;
+      this.callbacks.set(id, resolve);
+      this.ws.send(JSON.stringify({ id, method, params }));
+    });
+  }
+
+  /**
+   * Evaluate JavaScript in the FigJam context
+   */
+  async eval(expression) {
+    if (!this.figmaContextId) {
+      throw new Error('Not connected to FigJam');
+    }
+
+    const result = await this.send('Runtime.evaluate', {
+      expression,
+      contextId: this.figmaContextId,
+      returnByValue: true,
+      awaitPromise: true
+    });
+
+    if (result.result?.exceptionDetails) {
+      const error = result.result.exceptionDetails;
+      throw new Error(error.exception?.description || error.text || 'Evaluation error');
+    }
+
+    return result.result?.result?.value;
+  }
+
+  /**
+   * Get current page info
+   */
+  async getPageInfo() {
+    return await this.eval(`
+      (function() {
+        return {
+          name: figma.currentPage.name,
+          id: figma.currentPage.id,
+          childCount: figma.currentPage.children.length,
+          editorType: figma.editorType
+        };
+      })()
+    `);
+  }
+
+  /**
+   * List all nodes on the current page
+   */
+  async listNodes(limit = 50) {
+    return await this.eval(`
+      figma.currentPage.children.slice(0, ${limit}).map(function(n) {
+        return {
+          id: n.id,
+          type: n.type,
+          name: n.name || '',
+          x: Math.round(n.x),
+          y: Math.round(n.y)
+        };
+      })
+    `);
+  }
+
+  /**
+   * Create a sticky note
+   */
+  async createSticky(text, x = 0, y = 0, color) {
+    return await this.eval(`
+      (async function() {
+        var sticky = figma.createSticky();
+        sticky.x = ${x};
+        sticky.y = ${y};
+        ${color ? `sticky.fills = [{type: 'SOLID', color: ${JSON.stringify(hexToRgb(color))}}];` : ''}
+        // Load font before setting text
+        await figma.loadFontAsync({ family: "Inter", style: "Medium" });
+        sticky.text.characters = ${JSON.stringify(text)};
+        return { id: sticky.id, x: sticky.x, y: sticky.y };
+      })()
+    `);
+  }
+
+  /**
+   * Create a shape with text
+   */
+  async createShape(text, x = 0, y = 0, width = 200, height = 100, shapeType = 'ROUNDED_RECTANGLE') {
+    return await this.eval(`
+      (async function() {
+        var shape = figma.createShapeWithText();
+        shape.shapeType = ${JSON.stringify(shapeType)};
+        shape.x = ${x};
+        shape.y = ${y};
+        shape.resize(${width}, ${height});
+        if (shape.text) {
+          await figma.loadFontAsync({ family: "Inter", style: "Medium" });
+          shape.text.characters = ${JSON.stringify(text)};
+        }
+        return { id: shape.id, x: shape.x, y: shape.y };
+      })()
+    `);
+  }
+
+  /**
+   * Create a connector between two nodes
+   */
+  async createConnector(startNodeId, endNodeId) {
+    return await this.eval(`
+      (function() {
+        var startNode = figma.getNodeById(${JSON.stringify(startNodeId)});
+        var endNode = figma.getNodeById(${JSON.stringify(endNodeId)});
+        if (!startNode || !endNode) return { error: 'Node not found' };
+
+        var connector = figma.createConnector();
+        connector.connectorStart = { endpointNodeId: startNode.id, magnet: 'AUTO' };
+        connector.connectorEnd = { endpointNodeId: endNode.id, magnet: 'AUTO' };
+        return { id: connector.id };
+      })()
+    `);
+  }
+
+  /**
+   * Create a text node
+   */
+  async createText(text, x = 0, y = 0, fontSize = 16) {
+    return await this.eval(`
+      (async function() {
+        var textNode = figma.createText();
+        textNode.x = ${x};
+        textNode.y = ${y};
+        await figma.loadFontAsync({ family: "Inter", style: "Medium" });
+        textNode.characters = ${JSON.stringify(text)};
+        textNode.fontSize = ${fontSize};
+        return { id: textNode.id, x: textNode.x, y: textNode.y };
+      })()
+    `);
+  }
+
+  /**
+   * Delete a node by ID
+   */
+  async deleteNode(nodeId) {
+    return await this.eval(`
+      (function() {
+        var node = figma.getNodeById(${JSON.stringify(nodeId)});
+        if (node) {
+          node.remove();
+          return { deleted: true };
+        }
+        return { deleted: false, error: 'Node not found' };
+      })()
+    `);
+  }
+
+  /**
+   * Move a node
+   */
+  async moveNode(nodeId, x, y) {
+    return await this.eval(`
+      (function() {
+        var node = figma.getNodeById(${JSON.stringify(nodeId)});
+        if (node) {
+          node.x = ${x};
+          node.y = ${y};
+          return { id: node.id, x: node.x, y: node.y };
+        }
+        return { error: 'Node not found' };
+      })()
+    `);
+  }
+
+  /**
+   * Update text content of a node
+   */
+  async updateText(nodeId, text) {
+    return await this.eval(`
+      (async function() {
+        var node = figma.getNodeById(${JSON.stringify(nodeId)});
+        if (!node) return { error: 'Node not found' };
+
+        await figma.loadFontAsync({ family: "Inter", style: "Medium" });
+
+        if (node.type === 'STICKY' || node.type === 'SHAPE_WITH_TEXT') {
+          node.text.characters = ${JSON.stringify(text)};
+        } else if (node.type === 'TEXT') {
+          node.characters = ${JSON.stringify(text)};
+        } else {
+          return { error: 'Node does not support text' };
+        }
+        return { id: node.id, updated: true };
+      })()
+    `);
+  }
+
+  close() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+}
+
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16) / 255,
+    g: parseInt(result[2], 16) / 255,
+    b: parseInt(result[3], 16) / 255
+  } : { r: 1, g: 0.9, b: 0.5 }; // default yellow
+}
+
+export default FigJamClient;