@dannote/figma-use 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +26 -9
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # figma-use
2
2
 
3
- Control Figma from the command line. Like [browser-use](https://github.com/browser-use/browser-use), but for Figma.
3
+ Control Figma from the command line. Built for AI agents to create and manipulate designs programmatically.
4
4
 
5
- Built for AI agents to create and manipulate Figma designs programmatically.
5
+ Inspired by [agent-browser](https://github.com/vercel-labs/agent-browser) (browser automation) and [bird](https://github.com/steipete/bird) (Twitter CLI) — fast CLIs that save tokens and give agents direct control.
6
6
 
7
7
  ## Why not the official Figma MCP?
8
8
 
@@ -246,22 +246,39 @@ figma-use is designed to work with AI coding agents like [Claude Code](https://d
246
246
 
247
247
  ### Using with Claude Code
248
248
 
249
- Add the [web-to-figma skill](https://github.com/anthropics/claude-code/tree/main/skills) to your agent:
249
+ Copy the included skill to teach your agent how to use figma-use:
250
250
 
251
251
  ```bash
252
- # The skill teaches the agent how to:
253
- # - Extract styles from web pages
254
- # - Recreate UI components in Figma
255
- # - Match colors, fonts, spacing, and layout
252
+ # From npm package
253
+ cp node_modules/@dannote/figma-use/SKILL.md ~/.claude/skills/figma-use/SKILL.md
254
+
255
+ # Or download directly
256
+ mkdir -p ~/.claude/skills/figma-use
257
+ curl -o ~/.claude/skills/figma-use/SKILL.md \
258
+ https://raw.githubusercontent.com/dannote/figma-use/main/SKILL.md
256
259
  ```
257
260
 
258
261
  Then just ask:
259
262
 
260
263
  ```
261
- Recreate this login form in Figma: https://example.com/login
264
+ Create a card component with an avatar, title, and description in Figma
262
265
  ```
263
266
 
264
- The agent will use `figma-use` commands to build the design.
267
+ ### Minimal Setup
268
+
269
+ For agents that don't support skills, add to your project's `CLAUDE.md` or `AGENTS.md`:
270
+
271
+ ```markdown
272
+ ## Figma Automation
273
+
274
+ Use `figma-use` for Figma control. Run `figma-use --help` for all 73 commands.
275
+
276
+ Quick workflow:
277
+ 1. `figma-use status` - Check plugin connection
278
+ 2. `figma-use create-frame --x 0 --y 0 --width 400 --height 300 --fill "#FFF" --name "Card"`
279
+ 3. `figma-use create-text --x 20 --y 20 --text "Title" --fontSize 24 --fill "#000" --parentId "1:2"`
280
+ 4. `figma-use screenshot --output preview.png` - Verify result
281
+ ```
265
282
 
266
283
  ## License
267
284
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dannote/figma-use",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Control Figma from the command line. Like browser-use, but for Figma.",
5
5
  "type": "module",
6
6
  "bin": {