diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json new file mode 100644 index 00000000..b6e9a13c --- /dev/null +++ b/.codex-plugin/plugin.json @@ -0,0 +1,32 @@ +{ + "name": "figma-cli", + "version": "2.1.2", + "description": "Build and edit designs directly in Figma Desktop from your terminal. Render frames, manage design tokens, extract design systems, run accessibility audits, and more through a local connection with no API key.", + "author": { + "name": "Sil Bormüller", + "url": "https://intodesignsystems.com" + }, + "homepage": "https://github.com/silships/figma-cli", + "repository": "https://github.com/silships/figma-cli", + "license": "MIT", + "keywords": [ + "figma", + "design-system", + "design-tokens", + "variables", + "components", + "cli" + ], + "skills": "./skills/", + "interface": { + "displayName": "Figma CLI", + "shortDescription": "Build and edit designs directly in Figma.", + "longDescription": "Use Codex to build and edit designs directly in Figma Desktop through the local figma-cli connection.", + "developerName": "Sil Bormüller", + "category": "Design", + "capabilities": ["Interactive", "Write"], + "defaultPrompt": [ + "Connect to Figma and help me build a design." + ] + } +} diff --git a/README.md b/README.md index b309d484..7787807d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ No Rate Limits Works in Claude Code Works in Cursor + Works in Codex Built by Sil Bormüller

@@ -90,6 +91,26 @@ supplies the know-how; the local CLI does the work. --- +## Using Codex + +Codex uses the same skill already included in this repo. Add the marketplace and +install the plugin with: + +``` +codex plugin marketplace add silships/figma-cli +codex plugin add figma-cli@intodesignsystems +``` + +The plugin teaches Codex how to drive figma-cli. The **CLI itself still needs +Node ≥ 18 and its dependencies**, so clone this repo and run `npm install` once. +Then open Figma Desktop and ask Codex to connect to Figma. + +For project-only guidance without the plugin, run +`figma-cli init-agent --tool codex`. It adds the existing figma-cli rules to an +`AGENTS.md` without touching any `CLAUDE.md` or Cursor rules. + +--- + ## Using Cursor Prefer **Cursor**? It works exactly the same , the CLI controls Figma Desktop, not your editor, so nothing about it is Claude-only. Most people use Claude Code, but if Cursor is your tool, here's the whole setup. @@ -116,7 +137,7 @@ Same as Claude Code , describe what you want: Cursor builds it in Figma instantly. -**Already set up in a project and just want the Cursor rules?** Run `figma-cli init-agent` yourself , it writes the Cursor rules **and** an `AGENTS.md` (which Claude Code and Cursor both read), without touching any existing `CLAUDE.md`. +**Already set up in a project and just want the Cursor rules?** Run `figma-cli init-agent` yourself , it writes the Cursor rules **and** an `AGENTS.md` (which Claude Code, Cursor and Codex read), without touching any existing `CLAUDE.md`. --- @@ -354,7 +375,7 @@ Prefer to keep everything on your machine? figma-cli also works with **local LLM - Recreate a live webpage in Figma from a URL **🤖 Built for AI (6)** -- Works with **Claude Code** or **Cursor** , one `figma-cli init-agent` sets up the rules for both +- Works with **Claude Code**, **Cursor** or **Codex** , one `figma-cli init-agent` sets up the rules for all three - Works with **Claude**, or local LLMs via **LM Studio / Ollama** (fully offline) - Ships the entire **Figma Plugin API spec offline** so the AI can self-discover - Self-corrects when a command needs a different approach diff --git a/src/commands/init.js b/src/commands/init.js index b4869fb6..f25ae96f 100644 --- a/src/commands/init.js +++ b/src/commands/init.js @@ -1,5 +1,5 @@ // Command: init — scaffold agent guidance into a designer's project so figma-cli -// "just works" with whichever AI coding tool they use (Claude Code or Cursor). +// "just works" with whichever AI coding tool they use (Claude Code, Cursor, or Codex). // Writes the SAME condensed usage ruleset to: // - .cursor/rules/figma-cli.mdc (Cursor) // - AGENTS.md (Claude Code, Cursor, Codex all read it) @@ -77,8 +77,8 @@ function writeFile(path, content, force) { program .command('init-agent') - .description('Scaffold agent rules so figma-cli works out of the box in Claude Code & Cursor') - .option('--tool ', 'claude | cursor | both', 'both') + .description('Scaffold agent rules so figma-cli works out of the box in Claude Code, Cursor & Codex') + .option('--tool ', 'claude | cursor | codex | both', 'both') .option('--force', 'overwrite existing figma-cli rule files') .action((options) => { const tool = String(options.tool).toLowerCase(); @@ -89,7 +89,7 @@ program const mdc = `---\ndescription: How to drive figma-cli (controls Figma Desktop) from this project\nalwaysApply: true\n---\n\n${RULES_BODY}`; results.push(writeFile(join(cwd, '.cursor', 'rules', 'figma-cli.mdc'), mdc, options.force)); } - if (tool === 'claude' || tool === 'both') { + if (tool === 'claude' || tool === 'codex' || tool === 'both') { // AGENTS.md is read by Claude Code, Cursor and Codex — one file, all tools. results.push(writeFile(join(cwd, 'AGENTS.md'), RULES_BODY, options.force)); } @@ -100,6 +100,6 @@ program else if (r.status === 'up-to-date') console.log(chalk.gray('• up-to-date'), rel); else console.log(chalk.yellow('• exists (use --force to overwrite)'), rel); } - console.log(chalk.gray('\nDesigners can now ask Claude Code or Cursor to build in Figma — the agent knows the rules.')); + console.log(chalk.gray('\nDesigners can now ask Claude Code, Cursor or Codex to build in Figma. The agent knows the rules.')); console.log(chalk.gray('Next: open Figma Desktop and run `figma-cli connect`.')); });