[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-dannote--figma-use":3,"similar-dannote--figma-use":187},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":8,"readme_en":9,"readme_zh":10,"quickstart_zh":11,"use_case_zh":12,"hero_image_url":13,"owner_login":14,"owner_name":15,"owner_avatar_url":16,"owner_bio":17,"owner_company":17,"owner_location":17,"owner_email":18,"owner_twitter":19,"owner_website":20,"owner_url":21,"languages":22,"stars":31,"forks":32,"last_commit_at":33,"license":34,"difficulty_score":35,"env_os":36,"env_gpu":37,"env_ram":37,"env_deps":38,"category_tags":44,"github_topics":47,"view_count":35,"oss_zip_url":17,"oss_zip_packed_at":17,"status":53,"created_at":54,"updated_at":55,"faqs":56,"releases":86},5805,"dannote\u002Ffigma-use","figma-use","Control Figma from the command line. Full read\u002Fwrite access for AI agents — create shapes, text, components, set styles, export images. 100+ commands.","figma-use 是一款让开发者能通过命令行直接操控 Figma 的开源工具。它填补了官方插件只能读取文件却无法修改的空白，赋予 AI 智能体完整的读写权限，能够自动创建图形、文本、组件、设置样式甚至导出图片。\n\n这款工具主要解决了自动化设计工作流中的“最后一公里”问题。由于大语言模型（LLM）天生熟悉命令行和 React 代码，figma-use 巧妙地将两者结合：既支持简洁的命令式操作，也允许用户通过直观的 JSX 语法声明式地描述界面结构。这种设计让 AI 无需额外训练就能自然生成复杂的设计布局，极大地节省了交互令牌并提升了执行效率。此外，它还支持直接从 Iconify 库调用超过 15 万个图标，并能将现有的 Figma 节点反向导出为 JSX 代码，实现设计与代码的双向互通。\n\nfigma-use 特别适合前端开发者、AI 工程师以及希望将设计流程自动化的高级用户。对于习惯使用终端工具或希望通过代码驱动设计生成的团队来说，它是一个高效且灵活的桥梁，让“用代码画原型”变得触手可及。","# figma-use\n\n> **⚠️ Figma 126+ blocks remote debugging.** figma-use still works via `figma-use daemon start --pipe`. Or skip Figma entirely with **[OpenPencil](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fopen-pencil)** — an open-source design editor that reads and writes .fig files, with built-in AI and P2P collaboration.\n\nCLI for Figma. Control it from the terminal — with commands or JSX.\n\n```bash\n# Create and style\nfigma-use create frame --width 400 --height 300 --fill \"#FFF\" --layout VERTICAL --gap 16\nfigma-use create icon mdi:home --size 32 --color \"#3B82F6\"\nfigma-use set layout 1:23 --mode GRID --cols \"1fr 1fr 1fr\" --gap 16\n\n# Or render JSX\necho '\u003CFrame style={{display: \"grid\", cols: \"1fr 1fr\", gap: 16}}>\n  \u003CFrame style={{bg: \"#3B82F6\", h: 100}} \u002F>\n  \u003CFrame style={{bg: \"#10B981\", h: 100}} \u002F>\n\u003C\u002FFrame>' | figma-use render --stdin --x 100 --y 100\n```\n\n## Why\n\nFigma's official MCP plugin can read files but can't modify them. This one can.\n\nLLMs know CLI. LLMs know React. This combines both.\n\nCLI commands are compact — easy to read, easy to generate, easy to chain. When a task involves dozens of operations, every saved token matters.\n\nJSX is how LLMs already think about UI. They've seen millions of React components. Describing a Figma layout as `\u003CFrame>\u003CText>` is natural for them — no special training, no verbose schemas.\n\n## Demo\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F9eSYVZRle7o\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_58d1c760ee1a.jpg\" alt=\"Button components demo\" width=\"100%\">\n\u003C\u002Fa>\n\u003Cp align=\"center\">\u003Cb>▶️ Button components\u003C\u002Fb>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FefJWp2Drzb4\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_18ea6d3c6a34.jpg\" alt=\"Calendar demo\" width=\"100%\">\n\u003C\u002Fa>\n\u003Cp align=\"center\">\u003Cb>▶️ Tailwind UI calendar\u003C\u002Fb>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Installation\n\n```bash\nnpm install -g figma-use\n```\n\nOr run directly without installing:\n\n```bash\nnpx figma-use status\n```\n\nStart Figma with remote debugging enabled:\n\n```bash\n# macOS\nopen -a Figma --args --remote-debugging-port=9222\n\n# Windows\n\"%LOCALAPPDATA%\\Figma\\Figma.exe\" --remote-debugging-port=9222\n\n# Linux\nfigma --remote-debugging-port=9222\n```\n\nCheck connection:\n\n```bash\nfigma-use status\n```\n\nThat's it. No plugins to install.\n\n## Two Modes\n\nImperative — one command at a time:\n\n```bash\nfigma-use create frame --width 400 --height 300 --fill \"#FFF\" --radius 12 --layout VERTICAL --gap 16\n```\n\nOr declaratively — describe the structure in JSX and render it:\n\n```bash\necho '\u003CFrame style={{p: 24, gap: 16, flex: \"col\", bg: \"#FFF\", rounded: 12}}>\n  \u003CText style={{size: 24, weight: \"bold\", color: \"#000\"}}>Card Title\u003C\u002FText>\n  \u003CText style={{size: 14, color: \"#666\"}}>Description\u003C\u002FText>\n\u003C\u002FFrame>' | figma-use render --stdin --x 100 --y 200\n```\n\nThe stdin mode accepts pure JSX only — no variables, no logic. For components, variants, and conditions, use `.figma.tsx` files.\n\n**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`, `Icon`, `Image`\n\n## Examples\n\n### Icons\n\nInsert any icon from Iconify by name. No downloading, no importing, no cleanup.\n\n```bash\nfigma-use create icon mdi:home\nfigma-use create icon lucide:star --size 48 --color \"#F59E0B\"\n```\n\nIn JSX:\n\n```tsx\n\u003CFrame style={{ flex: 'row', gap: 8 }}>\n  \u003CIcon icon=\"mdi:home\" size={24} color=\"#3B82F6\" \u002F>\n  \u003CIcon icon=\"lucide:star\" size={32} color=\"#F59E0B\" \u002F>\n\u003C\u002FFrame>\n```\n\nBrowse 150k+ icons: [icon-sets.iconify.design](https:\u002F\u002Ficon-sets.iconify.design\u002F)\n\n### Images\n\nLoad images from URL:\n\n```tsx\n\u003CImage src=\"https:\u002F\u002Fexample.com\u002Fphoto.jpg\" w={200} h={150} \u002F>\n```\n\n### Export to JSX\n\nConvert any Figma node back to JSX:\n\n```bash\nfigma-use export jsx 123:456 --pretty\n```\n\nOutput:\n\n```tsx\nimport { Frame, Icon, Text } from 'figma-use\u002Frender'\nexport default function SaveButton() {\n  return (\n    \u003CFrame name=\"SaveButton\" w={120} h={44} bg=\"#1FAFBB\" rounded={8} flex=\"row\" gap={8}>\n      \u003CIcon name=\"lucide:save\" size={18} color=\"#FFFFFF\" \u002F>\n      \u003CText size={16} color=\"#FFFFFF\">\n        Save\n      \u003C\u002FText>\n    \u003C\u002FFrame>\n  )\n}\n```\n\nMatch vector shapes to Iconify icons automatically:\n\n```bash\nnpm install whaticon  # Optional dependency\nfigma-use export jsx 123:456 --match-icons --prefer-icons lucide\n```\n\nCompare two nodes as JSX diff:\n\n```bash\nfigma-use diff jsx 123:456 789:012\n```\n\n### Export to Storybook (Experimental)\n\nExport components as Storybook stories:\n\n```bash\nfigma-use export storybook --out .\u002Fstories\nfigma-use export storybook --out .\u002Fstories --match-icons --prefer-icons lucide\n```\n\nGenerates `.stories.tsx` with typed props from component properties.\n\n### Components\n\nIn a `.figma.tsx` file you can define components. First call creates the master, the rest create instances:\n\n```tsx\nimport { defineComponent, Frame, Text } from 'figma-use\u002Frender'\n\nconst Card = defineComponent(\n  'Card',\n  \u003CFrame style={{ p: 24, bg: '#FFF', rounded: 12 }}>\n    \u003CText style={{ size: 18, color: '#000' }}>Card\u003C\u002FText>\n  \u003C\u002FFrame>\n)\n\nexport default () => (\n  \u003CFrame style={{ gap: 16, flex: 'row' }}>\n    \u003CCard \u002F>\n    \u003CCard \u002F>\n    \u003CCard \u002F>\n  \u003C\u002FFrame>\n)\n```\n\n### Variants\n\nComponentSet with all combinations:\n\n```tsx\nimport { defineComponentSet, Frame, Text } from 'figma-use\u002Frender'\n\nconst Button = defineComponentSet(\n  'Button',\n  {\n    variant: ['Primary', 'Secondary'] as const,\n    size: ['Small', 'Large'] as const\n  },\n  ({ variant, size }) => (\n    \u003CFrame\n      style={{\n        p: size === 'Large' ? 16 : 8,\n        bg: variant === 'Primary' ? '#3B82F6' : '#E5E7EB',\n        rounded: 8\n      }}\n    >\n      \u003CText style={{ color: variant === 'Primary' ? '#FFF' : '#111' }}>\n        {variant} {size}\n      \u003C\u002FText>\n    \u003C\u002FFrame>\n  )\n)\n\nexport default () => (\n  \u003CFrame style={{ gap: 16, flex: 'col' }}>\n    \u003CButton variant=\"Primary\" size=\"Large\" \u002F>\n    \u003CButton variant=\"Secondary\" size=\"Small\" \u002F>\n  \u003C\u002FFrame>\n)\n```\n\nThis creates a real ComponentSet in Figma with all 4 variants, not just 4 separate buttons.\n\n### Grid Layout\n\nCSS Grid for 2D layouts — calendars, dashboards, galleries:\n\n```tsx\n\u003CFrame\n  style={{\n    display: 'grid',\n    cols: '1fr 1fr 1fr', \u002F\u002F 3 equal columns\n    rows: 'auto auto', \u002F\u002F 2 rows\n    gap: 16\n  }}\n>\n  \u003CFrame style={{ bg: '#FF6B6B' }} \u002F>\n  \u003CFrame style={{ bg: '#4ECDC4' }} \u002F>\n  \u003CFrame style={{ bg: '#45B7D1' }} \u002F>\n  \u003CFrame style={{ bg: '#96CEB4' }} \u002F>\n  \u003CFrame style={{ bg: '#FFEAA7' }} \u002F>\n  \u003CFrame style={{ bg: '#DDA0DD' }} \u002F>\n\u003C\u002FFrame>\n```\n\nSupports `px`, `fr`, and `auto`\u002F`hug`. Separate gaps with `colGap` and `rowGap`.\n\nIn CLI:\n\n```bash\nfigma-use set layout \u003Cid> --mode GRID --cols \"100px 1fr 100px\" --rows \"auto\" --gap 16\n```\n\n### Variables as Tokens\n\nBind colors to Figma variables by name. The hex value is a fallback:\n\n```tsx\nimport { defineVars, Frame, Text } from 'figma-use\u002Frender'\n\nconst colors = defineVars({\n  bg: { name: 'Colors\u002FGray\u002F50', value: '#F8FAFC' },\n  text: { name: 'Colors\u002FGray\u002F900', value: '#0F172A' }\n})\n\nexport default () => (\n  \u003CFrame style={{ bg: colors.bg }}>\n    \u003CText style={{ color: colors.text }}>Bound to variables\u003C\u002FText>\n  \u003C\u002FFrame>\n)\n```\n\nIn CLI, use `var:Colors\u002FPrimary` or `$Colors\u002FPrimary` in any color option.\n\n### Diffs\n\nCompare two frames and get a patch:\n\n```bash\nfigma-use diff create --from 123:456 --to 789:012\n```\n\n```diff\n--- \u002FCard\u002FHeader #123:457\n+++ \u002FCard\u002FHeader #789:013\n@@ -1,5 +1,5 @@\n type: FRAME\n size: 200 50\n pos: 0 0\n-fill: #FFFFFF\n+fill: #F0F0F0\n-opacity: 0.8\n+opacity: 1\n```\n\nApply the patch to the original frame. On apply, current state is validated against expected — if they don't match, it fails.\n\nVisual diff highlights changed pixels in red:\n\n```bash\nfigma-use diff visual --from 49:275096 --to 49:280802 --output diff.png\n```\n\n| Before                            | After                           | Diff                            |\n| --------------------------------- | ------------------------------- | ------------------------------- |\n| ![before](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_9e7058bc88ac.png) | ![after](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_afa9c781941c.png) | ![diff](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_a616ab9d17a5.png) |\n\n### Inspection\n\nPage tree in readable form:\n\n```\n$ figma-use node tree\n[0] frame \"Card\" (1:23)\n    400×300 at (0, 0) | fill: #FFFFFF | layout: col gap=16\n  [0] text \"Title\" (1:24)\n      \"Hello World\" | 24px Inter Bold\n```\n\nExport any node or screenshot with one command.\n\n### Arrange\n\nTidy up canvas layout — especially useful after agents create multiple frames at the same position:\n\n```bash\nfigma-use arrange                              # Grid-arrange all top-level nodes\nfigma-use arrange --mode row --gap 60          # Horizontal row\nfigma-use arrange --mode squarify --gap 60     # Smart packing for mixed sizes\n```\n\nUses d3-hierarchy treemap for `squarify` and `binary` modes — size-aware rectangle packing.\n\n### Vectors\n\nImport SVG or work with paths directly — read, modify, translate, scale, flip:\n\n```bash\nfigma-use path get \u003Cid>\nfigma-use path set \u003Cid> \"M 0 0 L 100 100 Z\"\nfigma-use path scale \u003Cid> --factor 1.5\nfigma-use path flip \u003Cid> --axis x\n```\n\n### Query\n\nFind nodes using XPath selectors:\n\n```bash\nfigma-use query \"\u002F\u002FFRAME\"                              # All frames\nfigma-use query \"\u002F\u002FFRAME[@width \u003C 300]\"                # Narrower than 300px\nfigma-use query \"\u002F\u002FCOMPONENT[starts-with(@name, 'Button')]\"  # Name starts with\nfigma-use query \"\u002F\u002FFRAME[contains(@name, 'Card')]\"     # Name contains\nfigma-use query \"\u002F\u002FSECTION\u002FFRAME\"                      # Direct children\nfigma-use query \"\u002F\u002FSECTION\u002F\u002FTEXT\"                      # All descendants\nfigma-use query \"\u002F\u002F*[@cornerRadius > 0]\"               # Any node with radius\n```\n\nFull XPath 3.1 support — predicates, functions, arithmetic, axes.\n\n### Analyze\n\nDiscovery tools for understanding design systems:\n\n```bash\n# Find repeated patterns (potential components)\nfigma-use analyze clusters\n\n# Color palette — usage frequency, variables vs hardcoded\nfigma-use analyze colors\nfigma-use analyze colors --show-similar    # Find colors to merge\n\n# Typography — all font combinations\nfigma-use analyze typography\nfigma-use analyze typography --group-by size\n\n# Spacing — gap\u002Fpadding values, grid compliance\nfigma-use analyze spacing --grid 8\n\n# Accessibility snapshot — extract interactive elements tree\nfigma-use analyze snapshot                 # Full page\nfigma-use analyze snapshot \u003Cid> -i         # Interactive elements only\n```\n\nExample output:\n\n```\n[0] 48× frame \"Header\" pattern (100% match)\n    1280×56 | Frame > [Frame×2, Text]\n    examples: 53171:21628, 53171:21704\n\n#303030  ████████████████████ 1840× (var)\n#E5E5E5  ████████████████████ 1726× (var)\n#000000  ████████ 238×\n```\n\n### Lint (Experimental)\n\nCheck designs for consistency, accessibility, and best practices:\n\n```bash\nfigma-use lint                          # Recommended rules\nfigma-use lint --page \"Components\"      # Lint specific page\nfigma-use lint --preset strict          # Stricter for production\nfigma-use lint --preset accessibility   # A11y checks only\nfigma-use lint -v                       # With fix suggestions\n```\n\nOutput:\n\n```\n✖ Header\u002FTitle (1:234)\n    ✖  Contrast ratio 2.1:1 is below AA threshold (4.5:1)    color-contrast\n    ⚠  Touch target 32x32 is below minimum 44x44             touch-target-size\n\n⚠ Card\u002FBody (1:567)\n    ⚠  Hardcoded fill color #1A1A1A                          no-hardcoded-colors\n    ℹ  Frame with 3 children doesn't use Auto Layout         prefer-auto-layout\n\n────────────────────────────────────────────────────────────────\n✖ 1 error  ⚠ 3 warnings  ℹ 1 info\n```\n\n**17 rules** across 6 categories:\n\n| Category      | Rules                                                                                      |\n| ------------- | ------------------------------------------------------------------------------------------ |\n| Design Tokens | `no-hardcoded-colors`, `consistent-spacing`, `consistent-radius`, `effect-style-required`  |\n| Layout        | `prefer-auto-layout`, `pixel-perfect`                                                      |\n| Typography    | `text-style-required`, `min-text-size`, `no-mixed-styles`                                  |\n| Accessibility | `color-contrast`, `touch-target-size`                                                      |\n| Structure     | `no-default-names`, `no-hidden-layers`, `no-deeply-nested`, `no-empty-frames`, `no-groups` |\n| Components    | `no-detached-instances`                                                                    |\n\nJSON output for CI\u002FCD:\n\n```bash\nfigma-use lint --json > report.json\n```\n\n### Comment-Driven Workflow (Experimental)\n\nAI agents can wait for Figma comments and respond:\n\n```bash\nfigma-use comment watch --json   # Blocks until new comment\nfigma-use comment resolve \u003Cid>   # Mark as done\n```\n\nReturns comment text, author, and `target_node` — the exact element under the comment pin. Agent processes the request, resolves the comment, then runs `watch` again for the next one.\n\n## Full Command Reference\n\nSee [REFERENCE.md](.\u002FREFERENCE.md) for the complete list of 100+ commands.\n\n## MCP Server\n\nFor AI agents that support Model Context Protocol:\n\n```bash\nfigma-use mcp serve\n```\n\nExposes 90+ tools. See [MCP.md](.\u002FMCP.md) for setup.\n\n## Configuration\n\nFor Storybook export and linting, create a config file:\n\n```bash\nfigma-use init\n```\n\nCreates `.figma-use.json`:\n\n```json\n{\n  \"storybook\": {\n    \"page\": \"Components\",\n    \"out\": \".\u002Fstories\",\n    \"matchIcons\": true,\n    \"preferIcons\": [\"lucide\", \"tabler\"]\n  },\n  \"lint\": {\n    \"preset\": \"recommended\"\n  },\n  \"format\": {\n    \"pretty\": true,\n    \"semi\": false,\n    \"singleQuote\": true\n  }\n}\n```\n\nCLI arguments override config values.\n\n## For AI Agents\n\nIncludes [SKILL.md](.\u002FSKILL.md) — a reference for Claude Code, Cursor, and other agents.\n\n## How It Works\n\n```\n┌─────────────┐            ┌─────────────┐\n│   Terminal  │────CDP────▶│   Figma     │\n│  figma-use  │  port 9222 │             │\n└─────────────┘            └─────────────┘\n```\n\nfigma-use communicates directly with Figma via Chrome DevTools Protocol (CDP). Just start Figma with `--remote-debugging-port=9222` and you're ready.\n\nCommands are executed via `Runtime.evaluate` in Figma's JavaScript context, with full access to the Plugin API.\n\n### Daemon\n\nOptional daemon keeps the CDP connection warm for faster sequential commands:\n\n```bash\nfigma-use daemon start    # Background daemon (~25% faster commands)\nfigma-use daemon stop     # Stop daemon\nfigma-use daemon status   # Check if running\n```\n\n### Pipe Transport\n\nFor Figma 126+ without admin access to patch, the daemon can launch Figma with `--remote-debugging-pipe` instead:\n\n```bash\nfigma-use daemon start --pipe   # Launches Figma, connects via stdio pipes\n```\n\nSet `FIGMA_BIN` for custom binary locations. The daemon holds the pipe connection — all commands route through it automatically.\n\n## License\n\nMIT\n","# figma-use\n\n> **⚠️ Figma 126+ 已阻止远程调试。** 不过，figma-use 仍然可以通过 `figma-use daemon start --pipe` 命令使用。或者，您也可以完全跳过 Figma，改用 **[OpenPencil](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fopen-pencil)** —— 一款开源的设计编辑器，支持读写 .fig 文件，并内置 AI 和 P2P 协作功能。\n\n用于 Figma 的命令行工具。通过终端、命令或 JSX 来控制 Figma。\n\n```bash\n# 创建并设置样式\nfigma-use create frame --width 400 --height 300 --fill \"#FFF\" --layout VERTICAL --gap 16\nfigma-use create icon mdi:home --size 32 --color \"#3B82F6\"\nfigma-use set layout 1:23 --mode GRID --cols \"1fr 1fr 1fr\" --gap 16\n\n# 或者渲染 JSX\necho '\u003CFrame style={{display: \"grid\", cols: \"1fr 1fr\", gap: 16}}>\n  \u003CFrame style={{bg: \"#3B82F6\", h: 100}} \u002F>\n  \u003CFrame style={{bg: \"#10B981\", h: 100}} \u002F>\n\u003C\u002FFrame>' | figma-use render --stdin --x 100 --y 100\n```\n\n## 为什么\n\nFigma 官方的 MCP 插件可以读取文件，但无法修改它们。而这个工具则可以做到。\n\n大模型熟悉命令行，也熟悉 React。这款工具将两者结合了起来。\n\n命令行指令简洁紧凑——易于阅读、生成和串联。当任务涉及数十个操作时，每一个节省下来的字符都至关重要。\n\nJSX 是大模型思考 UI 的方式。它们已经见过数以百万计的 React 组件。用 `\u003CFrame>\u003CText>` 来描述 Figma 布局对它们来说再自然不过——无需特殊训练，也不需要冗长的模式定义。\n\n## 演示\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\">\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F9eSYVZRle7o\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_58d1c760ee1a.jpg\" alt=\"按钮组件演示\" width=\"100%\">\n\u003C\u002Fa>\n\u003Cp align=\"center\">\u003Cb>▶️ 按钮组件\u003C\u002Fb>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\">\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FefJWp2Drzb4\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_18ea6d3c6a34.jpg\" alt=\"日历演示\" width=\"100%\">\n\u003C\u002Fa>\n\u003Cp align=\"center\">\u003Cb>▶️ Tailwind UI 日历\u003C\u002Fb>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## 安装\n\n```bash\nnpm install -g figma-use\n```\n\n或者直接运行而不需安装：\n\n```bash\nnpx figma-use status\n```\n\n启动 Figma 并启用远程调试：\n\n```bash\n# macOS\nopen -a Figma --args --remote-debugging-port=9222\n\n# Windows\n\"%LOCALAPPDATA%\\Figma\\Figma.exe\" --remote-debugging-port=9222\n\n# Linux\nfigma --remote-debugging-port=9222\n```\n\n检查连接：\n\n```bash\nfigma-use status\n```\n\n仅此而已，无需安装任何插件。\n\n## 两种模式\n\n命令式——一次执行一条命令：\n\n```bash\nfigma-use create frame --width 400 --height 300 --fill \"#FFF\" --radius 12 --layout VERTICAL --gap 16\n```\n\n或者声明式——用 JSX 描述结构并渲染：\n\n```bash\necho '\u003CFrame style={{p: 24, gap: 16, flex: \"col\", bg: \"#FFF\", rounded: 12}}>\n  \u003CText style={{size: 24, weight: \"bold\", color: \"#000\"}}>卡片标题\u003C\u002FText>\n  \u003CText style={{size: 14, color: \"#666\"}}>描述\u003C\u002FText>\n\u003C\u002FFrame>' | figma-use render --stdin --x 100 --y 200\n```\n\n标准输入模式只接受纯 JSX——没有变量，也没有逻辑。对于组件、变体和条件判断，请使用 `.figma.tsx` 文件。\n\n**元素：** `Frame`、`Rectangle`、`Ellipse`、`Text`、`Line`、`Star`、`Polygon`、`Vector`、`Group`、`Icon`、`Image`\n\n## 示例\n\n### 图标\n\n只需通过名称即可插入 Iconify 中的任意图标。无需下载、导入或清理。\n\n```bash\nfigma-use create icon mdi:home\nfigma-use create icon lucide:star --size 48 --color \"#F59E0B\"\n```\n\n在 JSX 中：\n\n```tsx\n\u003CFrame style={{ flex: 'row', gap: 8 }}>\n  \u003CIcon icon=\"mdi:home\" size={24} color=\"#3B82F6\" \u002F>\n  \u003CIcon icon=\"lucide:star\" size={32} color=\"#F59E0B\" \u002F>\n\u003C\u002FFrame>\n```\n\n浏览超过 15 万个图标：[icon-sets.iconify.design](https:\u002F\u002Ficon-sets.iconify.design\u002F)\n\n### 图片\n\n从 URL 加载图片：\n\n```tsx\n\u003CImage src=\"https:\u002F\u002Fexample.com\u002Fphoto.jpg\" w={200} h={150} \u002F>\n```\n\n### 导出为 JSX\n\n将任意 Figma 节点转换回 JSX：\n\n```bash\nfigma-use export jsx 123:456 --pretty\n```\n\n输出：\n\n```tsx\nimport { Frame, Icon, Text } from 'figma-use\u002Frender'\nexport default function SaveButton() {\n  return (\n    \u003CFrame name=\"SaveButton\" w={120} h={44} bg=\"#1FAFBB\" rounded={8} flex=\"row\" gap={8}>\n      \u003CIcon name=\"lucide:save\" size={18} color=\"#FFFFFF\" \u002F>\n      \u003CText size={16} color=\"#FFFFFF\">\n        保存\n      \u003C\u002FText>\n    \u003C\u002FFrame>\n  )\n}\n```\n\n自动将矢量形状匹配到 Iconify 图标：\n\n```bash\nnpm install whaticon  # 可选依赖\nfigma-use export jsx 123:456 --match-icons --prefer-icons lucide\n```\n\n比较两个节点的 JSX 差异：\n\n```bash\nfigma-use diff jsx 123:456 789:012\n```\n\n### 导出为 Storybook（实验性）\n\n将组件导出为 Storybook 故事：\n\n```bash\nfigma-use export storybook --out .\u002Fstories\nfigma-use export storybook --out .\u002Fstories --match-icons --prefer-icons lucide\n```\n\n会生成带有类型化 props 的 `.stories.tsx` 文件，这些 props 直接来自组件属性。\n\n### 组件\n\n您可以在 `.figma.tsx` 文件中定义组件。第一次调用会创建主组件，其余调用则创建实例：\n\n```tsx\nimport { defineComponent, Frame, Text } from 'figma-use\u002Frender'\n\nconst Card = defineComponent(\n  'Card',\n  \u003CFrame style={{ p: 24, bg: '#FFF', rounded: 12 }}>\n    \u003CText style={{ size: 18, color: '#000' }}>卡片\u003C\u002FText>\n  \u003C\u002FFrame>\n)\n\nexport default () => (\n  \u003CFrame style={{ gap: 16, flex: 'row' }}>\n    \u003CCard \u002F>\n    \u003CCard \u002F>\n    \u003CCard \u002F>\n  \u003C\u002FFrame>\n)\n```\n\n### 变体\n\n包含所有组合的 ComponentSet：\n\n```tsx\nimport { defineComponentSet, Frame、Text } from 'figma-use\u002Frender'\n\nconst Button = defineComponentSet(\n  'Button',\n  {\n    variant: ['Primary', 'Secondary'] as const,\n    size: ['Small', 'Large'] as const\n  },\n  ({ variant, size }) => (\n    \u003CFrame\n      style={{\n        p: size === 'Large' ? 16 : 8,\n        bg: variant === 'Primary' ? '#3B82F6' : '#E5E7EB',\n        rounded: 8\n      }}\n    >\n      \u003CText style={{ color: variant === 'Primary' ? '#FFFFFF' : '#111' }}>\n        {variant} {size}\n      \u003C\u002FText>\n    \u003C\u002FFrame>\n  )\n)\n\nexport default () => (\n  \u003CFrame style={{ gap: 16, flex: 'col' }}>\n    \u003CButton variant=\"Primary\" size=\"Large\" \u002F>\n    \u003CButton variant=\"Secondary\" size=\"Small\" \u002F>\n  \u003C\u002FFrame>\n)\n```\n\n这会在 Figma 中创建一个真正的 ComponentSet，包含全部 4 种变体，而不仅仅是 4 个独立的按钮。\n\n### 网格布局\n\nCSS Grid 适用于二维布局——日历、仪表盘、图库等：\n\n```tsx\n\u003CFrame\n  style={{\n    display: 'grid',\n    cols: '1fr 1fr 1fr', \u002F\u002F 3 列等宽\n    rows: 'auto auto', \u002F\u002F 2 行\n    gap: 16\n  }}\n>\n  \u003CFrame style={{ bg: '#FF6B6B' }} \u002F>\n  \u003CFrame style={{ bg: '#4ECDC4' }} \u002F>\n  \u003CFrame style={{ bg: '#45B7D1' }} \u002F>\n  \u003CFrame style={{ bg: '#96CEB4' }} \u002F>\n  \u003CFrame style={{ bg: '#FFEAA7' }} \u002F>\n  \u003CFrame style={{ bg: '#DDA0DD' }} \u002F>\n\u003C\u002FFrame>\n```\n\n支持 `px`、`fr` 以及 `auto`\u002F`hug`。可分别使用 `colGap` 和 `rowGap` 设置列与行之间的间距。\n\n在命令行中：\n\n```bash\nfigma-use set layout \u003Cid> --mode GRID --cols \"100px 1fr 100px\" --rows \"auto\" --gap 16\n```\n\n### 变量作为标记\n\n通过名称将颜色绑定到 Figma 变量。十六进制值用作回退：\n\n```tsx\nimport { defineVars, Frame, Text } from 'figma-use\u002Frender'\n\nconst colors = defineVars({\n  bg: { name: 'Colors\u002FGray\u002F50', value: '#F8FAFC' },\n  text: { name: 'Colors\u002FGray\u002F900', value: '#0F172A' }\n})\n\nexport default () => (\n  \u003CFrame style={{ bg: colors.bg }}>\n    \u003CText style={{ color: colors.text }}>绑定到变量\u003C\u002FText>\n  \u003C\u002FFrame>\n)\n```\n\n在 CLI 中，可在任何颜色选项中使用 `var:Colors\u002FPrimary` 或 `$Colors\u002FPrimary`。\n\n### 差异比较\n\n比较两个框架并获取补丁：\n\n```bash\nfigma-use diff create --from 123:456 --to 789:012\n```\n\n```diff\n--- \u002FCard\u002FHeader #123:457\n+++ \u002FCard\u002FHeader #789:013\n@@ -1,5 +1,5 @@\n type: FRAME\n size: 200 50\n pos: 0 0\n-fill: #FFFFFF\n+fill: #F0F0F0\n-opacity: 0.8\n+opacity: 1\n```\n\n将补丁应用到原始框架。应用时会验证当前状态是否符合预期——如果不匹配，则会失败。\n\n视觉差异会以红色突出显示更改的像素：\n\n```bash\nfigma-use diff visual --from 49:275096 --to 49:280802 --output diff.png\n```\n\n| 之前                            | 之后                           | 差异                            |\n| --------------------------------- | ------------------------------- | ------------------------------- |\n| ![before](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_9e7058bc88ac.png) | ![after](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_afa9c781941c.png) | ![diff](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_readme_a616ab9d17a5.png) |\n\n### 检查\n\n以可读格式显示页面树：\n\n```\n$ figma-use node tree\n[0] 框架 “Card” (1:23)\n    400×300 在 (0, 0) | 填充：#FFFFFF | 布局：列间距=16\n  [0] 文本 “Title” (1:24)\n      “Hello World” | 24px Inter Bold\n```\n\n只需一条命令即可导出任意节点或截图。\n\n### 排列\n\n整理画布布局——尤其在代理在同一位置创建多个框架后非常有用：\n\n```bash\nfigma-use arrange                              # 网格排列所有顶级节点\nfigma-use arrange --mode row --gap 60          # 横向排列\nfigma-use arrange --mode squarify --gap 60     # 智能包装，适用于不同大小的元素\n```\n\n`squarify` 和 `binary` 模式使用 d3-hierarchy 树状图进行尺寸感知的矩形打包。\n\n### 向量\n\n导入 SVG 或直接操作路径——读取、修改、平移、缩放、翻转：\n\n```bash\nfigma-use path get \u003Cid>\nfigma-use path set \u003Cid> \"M 0 0 L 100 100 Z\"\nfigma-use path scale \u003Cid> --factor 1.5\nfigma-use path flip \u003Cid> --axis x\n```\n\n### 查询\n\n使用 XPath 选择器查找节点：\n\n```bash\nfigma-use query \"\u002F\u002FFRAME\"                              # 所有框架\nfigma-use query \"\u002F\u002FFRAME[@width \u003C 300]\"                # 宽度小于 300px\nfigma-use query \"\u002F\u002FCOMPONENT[starts-with(@name, 'Button')]\"  # 名称以...开头\nfigma-use query \"\u002F\u002FFRAME[contains(@name, 'Card')]\"     # 名称包含...\nfigma-use query \"\u002F\u002FSECTION\u002FFRAME\"                      # 直接子元素\nfigma-use query \"\u002F\u002FSECTION\u002F\u002FTEXT\"                      # 所有后代\nfigma-use query \"\u002F\u002F*[@cornerRadius > 0]\"               # 任何具有圆角的节点\n```\n\n完全支持 XPath 3.1 — 谓词、函数、算术和轴。\n\n### 分析\n\n用于理解设计系统的发现工具：\n\n```bash\n# 查找重复模式（潜在组件）\nfigma-use analyze clusters\n\n# 颜色 palette — 使用频率、变量与硬编码\nfigma-use analyze colors\nfigma-use analyze colors --show-similar    # 查找可合并的颜色\n\n# 排版 — 所有字体组合\nfigma-use analyze typography\nfigma-use analyze typography --group-by size\n\n# 间距 — 间隙\u002F填充值、网格合规性\nfigma-use analyze spacing --grid 8\n\n# 辅助功能快照 — 提取交互元素树\nfigma-use analyze snapshot                 # 整页\nfigma-use analyze snapshot \u003Cid> -i         # 仅交互元素\n```\n\n示例输出：\n\n```\n[0] 48× 框架 “Header” 模式 (100% 匹配)\n    1280×56 | 框架 > [框架×2, 文本]\n    示例：53171:21628, 53171:21704\n\n#303030  ████████████████████ 1840× (变量)\n#E5E5E5  ████████████████████ 1726× (变量)\n#000000  ████████ 238×\n```\n\n### 代码检查（实验性）\n\n检查设计的一致性、可访问性和最佳实践：\n\n```bash\nfigma-use lint                          # 推荐规则\nfigma-use lint --page \"Components\"      # 检查特定页面\nfigma-use lint --preset strict          # 更严格的生产标准\nfigma-use lint --preset accessibility   # 仅辅助功能检查\nfigma-use lint -v                       # 包含修复建议\n```\n\n输出：\n\n```\n✖ Header\u002FTitle (1:234)\n    ✖ 对比度 2.1:1 低于 AA 标准 (4.5:1)    color-contrast\n    ⚠ 触摸目标 32x32 小于最小 44x44             touch-target-size\n\n⚠ Card\u002FBody (1:567)\n    ⚠ 硬编码填充颜色 #1A1A1A                          no-hardcoded-colors\n    ℹ 包含 3 个子元素的框架未使用自动布局         prefer-auto-layout\n\n────────────────────────────────────────────────────────────────\n✖ 1 错误  ⚠ 3 警告  ℹ 1 信息\n```\n\n**17 条规则**分布在 6 个类别中：\n\n| 类别      | 规则                                                                                      |\n| ------------- | ------------------------------------------------------------------------------------------ |\n| 设计令牌 | `no-hardcoded-colors`, `consistent-spacing`, `consistent-radius`, `effect-style-required`  |\n| 布局        | `prefer-auto-layout`, `pixel-perfect`                                                      |\n| 排版    | `text-style-required`, `min-text-size`, `no-mixed-styles`                                  |\n| 辅助功能 | `color-contrast`, `touch-target-size`                                                      |\n| 结构     | `no-default-names`, `no-hidden-layers`, `no-deeply-nested`, `no-empty-frames`, `no-groups` |\n| 组件    | `no-detached-instances`                                                                    |\n\n用于 CI\u002FCD 的 JSON 输出：\n\n```bash\nfigma-use lint --json > report.json\n```\n\n### 基于评论的工作流（实验性）\n\nAI 代理可以等待 Figma 评论并作出响应：\n\n```bash\nfigma-use comment watch --json   # 阻塞直到收到新评论\nfigma-use comment resolve \u003Cid>   # 标记为已完成\n```\n\n返回评论内容、作者以及 `target_node`——即评论标记下的确切元素。代理处理请求后，解决评论，然后再次运行 `watch` 以等待下一个评论。\n\n## 完整命令参考\n\n完整 100 多条命令列表请参阅 [REFERENCE.md](.\u002FREFERENCE.md)。\n\n## MCP 服务器\n\n对于支持模型上下文协议的 AI 代理：\n\n```bash\nfigma-use mcp serve\n```\n\n公开 90 多种工具。设置方法请参阅 [MCP.md](.\u002FMCP.md)。\n\n## 配置\n\n对于 Storybook 导出和代码检查，可创建配置文件：\n\n```bash\nfigma-use init\n```\n\n这将创建 `.figma-use.json` 文件：\n\n```json\n{\n  \"storybook\": {\n    \"page\": \"Components\",\n    \"out\": \".\u002Fstories\",\n    \"matchIcons\": true,\n    \"preferIcons\": [\"lucide\", \"tabler\"]\n  },\n  \"lint\": {\n    \"preset\": \"recommended\"\n  },\n  \"format\": {\n    \"pretty\": true,\n    \"semi\": false,\n    \"singleQuote\": true\n  }\n}\n```\n\nCLI 参数会覆盖配置值。\n\n## 适用于 AI 助手\n\n包含 [SKILL.md](.\u002FSKILL.md) — Claude Code、Cursor 及其他助手的参考文档。\n\n## 工作原理\n\n```\n┌─────────────┐            ┌─────────────┐\n│   终端      │────CDP────▶│   Figma     │\n│  figma-use  │  端口 9222 │             │\n└─────────────┘            └─────────────┘\n```\n\nfigma-use 通过 Chrome 开发者工具协议 (CDP) 直接与 Figma 通信。只需使用 `--remote-debugging-port=9222` 启动 Figma，即可准备就绪。\n\n命令通过 Figma 的 JavaScript 上下文中 `Runtime.evaluate` 执行，可完全访问插件 API。\n\n### 守护进程\n\n可选的守护进程会保持 CDP 连接处于活跃状态，以加快连续命令的执行速度：\n\n```bash\nfigma-use daemon start    # 后台守护进程（命令速度提升约 25%）\nfigma-use daemon stop     # 停止守护进程\nfigma-use daemon status   # 检查是否正在运行\n```\n\n### 管道传输\n\n对于无法获得管理员权限进行补丁的 Figma 126+ 版本，守护进程可以使用 `--remote-debugging-pipe` 参数启动 Figma：\n\n```bash\nfigma-use daemon start --pipe   # 启动 Figma，并通过标准输入输出管道连接\n```\n\n可通过设置 `FIGMA_BIN` 来指定自定义的二进制文件路径。守护进程会维持管道连接，所有命令都会自动通过该连接路由。\n\n## 许可证\n\nMIT","# figma-use 快速上手指南\n\n`figma-use` 是一款强大的 Figma CLI 工具，允许开发者通过终端命令或 JSX 语法直接控制 Figma。它弥补了官方插件只能读取无法修改文件的短板，特别适合结合 LLM（大语言模型）进行自动化设计和批量操作。\n\n## 环境准备\n\n在开始之前，请确保满足以下要求：\n\n*   **操作系统**：macOS、Windows 或 Linux。\n*   **Node.js**：已安装 Node.js 环境（推荐 v16+），以便使用 `npm` 或 `npx`。\n*   **Figma 桌面端**：必须安装 Figma 桌面应用程序（Web 版不支持远程调试）。\n*   **网络环境**：由于需要访问 Iconify 图标库和 npm 仓库，国内用户建议配置镜像源以加速安装。\n\n## 安装步骤\n\n### 1. 安装 CLI 工具\n\n你可以选择全局安装或通过 `npx` 直接运行。\n\n**全局安装（推荐）：**\n```bash\n# 使用国内镜像源加速安装\nnpm install -g figma-use --registry=https:\u002F\u002Fregistry.npmmirror.com\n```\n\n**免安装运行：**\n```bash\nnpx figma-use status\n```\n\n### 2. 启动带远程调试功能的 Figma\n\n`figma-use` 依赖 Figma 的远程调试端口进行通信。你需要通过特定参数启动 Figma 桌面应用。\n\n**macOS:**\n```bash\nopen -a Figma --args --remote-debugging-port=9222\n```\n\n**Windows:**\n```cmd\n\"%LOCALAPPDATA%\\Figma\\Figma.exe\" --remote-debugging-port=9222\n```\n\n**Linux:**\n```bash\nfigma --remote-debugging-port=9222\n```\n\n> **注意**：如果你使用的是 Figma 126+ 版本，官方可能限制了部分远程调试功能。如果遇到连接问题，可以尝试使用守护进程模式：`figma-use daemon start --pipe`，或者考虑使用兼容的开源编辑器 [OpenPencil](https:\u002F\u002Fgithub.com\u002Fopen-pencil\u002Fopen-pencil)。\n\n### 3. 验证连接\n\n启动 Figma 后，在终端运行以下命令检查连接状态：\n\n```bash\nfigma-use status\n```\n\n如果显示连接成功，即可开始使用。无需在 Figma 内安装任何插件。\n\n## 基本使用\n\n`figma-use` 支持两种主要工作模式：**命令式（CLI 命令）** 和 **声明式（JSX）**。\n\n### 模式一：命令式操作 (Imperative)\n\n适合简单的创建、样式修改和布局调整。命令紧凑，易于由 AI 生成或脚本串联。\n\n**创建并样式化一个帧（Frame）：**\n```bash\nfigma-use create frame --width 400 --height 300 --fill \"#FFF\" --layout VERTICAL --gap 16\n```\n\n**插入图标（支持 Iconify 库，无需下载）：**\n```bash\nfigma-use create icon mdi:home --size 32 --color \"#3B82F6\"\n```\n\n**设置现有节点的布局为网格：**\n```bash\nfigma-use set layout 1:23 --mode GRID --cols \"1fr 1fr 1fr\" --gap 16\n```\n*(注：`1:23` 为 Figma 节点 ID，可通过 `figma-use node tree` 查看)*\n\n### 模式二：声明式渲染 (Declarative JSX)\n\n适合复杂结构、组件定义或利用 LLM 生成 UI。你可以直接将 JSX 代码通过管道传递给工具进行渲染。\n\n**渲染一个简单的卡片布局：**\n```bash\necho '\u003CFrame style={{p: 24, gap: 16, flex: \"col\", bg: \"#FFF\", rounded: 12}}>\n  \u003CText style={{size: 24, weight: \"bold\", color: \"#000\"}}>Card Title\u003C\u002FText>\n  \u003CText style={{size: 14, color: \"#666\"}}>Description\u003C\u002FText>\n\u003C\u002FFrame>' | figma-use render --stdin --x 100 --y 200\n```\n\n**在 JSX 中使用图标和图片：**\n```tsx\n\u003CFrame style={{ flex: 'row', gap: 8 }}>\n  \u003CIcon icon=\"mdi:home\" size={24} color=\"#3B82F6\" \u002F>\n  \u003CImage src=\"https:\u002F\u002Fexample.com\u002Fphoto.jpg\" w={200} h={150} \u002F>\n\u003C\u002FFrame>\n```\n\n### 进阶技巧：导出与反向工程\n\n你可以将 Figma 中的现有设计导出为 JSX 代码，便于复用或转换为 React 组件。\n\n**导出节点为 JSX：**\n```bash\nfigma-use export jsx 123:456 --pretty\n```\n\n**自动匹配矢量图形为 Iconify 图标：**\n```bash\n# 需先安装可选依赖：npm install whaticon\nfigma-use export jsx 123:456 --match-icons --prefer-icons lucide\n```\n\n**整理画布布局（当多个帧重叠时非常有用）：**\n```bash\nfigma-use arrange --mode row --gap 60\n```\n\n现在你已经掌握了 `figma-use` 的核心用法，可以尝试结合 AI 助手编写更复杂的 `.figma.tsx` 文件来定义组件变体（Variants）和设计系统令牌（Tokens）。","某前端团队需要在 Figma 中快速批量生成一套包含 50+ 个不同状态和变体的按钮组件库，以配合新的设计系统上线。\n\n### 没有 figma-use 时\n- 设计师必须手动在 Figma 界面中重复点击创建画板、绘制矩形、调整圆角和填充色，耗时数小时且极易出错。\n- AI 助手虽然能生成代码或建议，但受限于官方插件只能“读”不能“写”，无法直接将构思转化为实际的设计稿元素。\n- 修改整体风格（如将所有主色从蓝色改为紫色）时，需要逐个选中组件进行调整，缺乏批量自动化手段。\n- 开发者与设计师协作时，描述复杂布局往往依赖截图或口头沟通，缺乏像 React 组件那样精确的结构化描述语言。\n\n### 使用 figma-use 后\n- 团队只需编写一段 JSX 代码或通过 CLI 命令，figma-use 即可在秒级内自动创建所有按钮变体，包括不同的尺寸、颜色和图标组合。\n- AI 代理可以直接调用 figma-use 的读写权限，将自然语言需求（如“生成一个带图标的保存按钮”）瞬间执行并渲染为真实的 Figma 图层。\n- 利用声明式 JSX 描述结构，修改全局样式只需调整几行代码并重新运行 `render` 命令，即可一键更新所有相关组件。\n- 开发者可以直接用熟悉的 React 思维（`\u003CFrame>\u003CIcon \u002F>\u003C\u002FFrame>`）来定义设计稿，实现了从代码到设计的双向无缝流转。\n\nfigma-use 通过将命令行的高效与 JSX 的直观结合，彻底打破了 AI 只能“看”不能“做”的壁垒，让设计稿的生成与维护变得像编写代码一样敏捷。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fdannote_figma-use_58d1c760.jpg","dannote","Danila Poyarkov","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fdannote_d4ee93a5.jpg",null,"dev@dannote.net","dan_note","https:\u002F\u002Fdannote.net","https:\u002F\u002Fgithub.com\u002Fdannote",[23,27],{"name":24,"color":25,"percentage":26},"TypeScript","#3178c6",100,{"name":28,"color":29,"percentage":30},"JavaScript","#f1e05a",0,526,37,"2026-04-08T20:10:52","MIT",2,"Linux, macOS, Windows","未说明",{"notes":39,"python":37,"dependencies":40},"该工具是基于 Node.js 的 CLI 工具，非 AI 模型，因此无 GPU、Python 或特定内存需求。核心依赖是已安装的 Figma 桌面客户端，且必须通过命令行参数（--remote-debugging-port=9222）启动以启用远程调试功能。在 Figma 126+ 版本中，官方屏蔽了远程调试，需使用 `figma-use daemon start --pipe` 模式或改用 OpenPencil 编辑器。",[41,42,43],"Node.js (npm\u002Fnpx)","Figma Desktop App (需开启远程调试端口)","whaticon (可选)",[45,46],"插件","Agent",[48,49,50,51,52],"ai-agents","automation","cli","design","figma","ready","2026-03-27T02:49:30.150509","2026-04-11T16:54:24.278904",[57,62,67,72,77,82],{"id":58,"question_zh":59,"answer_zh":60,"source_url":61},26309,"Figma Desktop 126.1.2+ (macOS) 中远程调试端口（--remote-debugging-port）失效怎么办？","这是 Figma 新版本的行为变更。解决方案是改用 `--remote-debugging-pipe` 模式并通过 daemon 保持连接。\n\n请升级到最新版本并运行以下命令：\n```bash\nnpm install -g figma-use@latest\nfigma-use daemon start --pipe\n```\n这将启动 Figma 并通过 pipe 保持连接，后续命令可自动工作，无需补丁或管理员权限。如需自定义二进制路径，可设置 `FIGMA_BIN` 环境变量。","https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fissues\u002F6",{"id":63,"question_zh":64,"answer_zh":65,"source_url":66},26310,"全局安装 figma-use 后，运行 'figma-use mcp serve' 报错 'Failed to get tools' 或 'path argument must be of type string' 如何解决？","该问题是由于旧版本使用了 Bun 专属 API (`import.meta.dir`) 且未包含必要的源文件导致的。此问题已在 **v0.12.1** 版本中修复。\n\n解决方法是将工具更新至最新版本：\n```bash\nnpm install -g figma-use@latest\n# 或者如果使用 bun\nbun install -g figma-use@latest\n```\n更新后，MCP 工具定义将在构建时生成，不再依赖运行时解析或特定环境。","https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fissues\u002F7",{"id":68,"question_zh":69,"answer_zh":70,"source_url":71},26311,"运行 figma-use 时出现 'Cannot find package typescript' 错误怎么办？","这是因为 TypeScript 被错误地仅列为开发依赖而非运行时依赖。该问题已在 **v0.11.0** 版本中修复。\n\n请升级包到最新版本即可解决：\n```bash\nnpm install -g figma-use@latest\n# 或\nbun install -g figma-use@latest\n```","https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fissues\u002F2",{"id":73,"question_zh":74,"answer_zh":75,"source_url":76},26312,"全局安装后运行 figma-use 提示 'Module not found' 指向不存在的 .ts 源文件，如何处理？","这是因为发布包中未包含必要的编译后文件或入口配置错误。该问题已在 **v0.6.1** 版本中修复。\n\n请务必将全局安装的包升级到最新版本：\n```bash\nnpm install -g figma-use@latest\n# 或\nbun install -g figma-use@latest\n```","https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fissues\u002F1",{"id":78,"question_zh":79,"answer_zh":80,"source_url":81},26313,"MCP 工具 'figma_status' 调用失败并返回 'Unknown command: status' 错误的原因是什么？","这是一个已知的代码逻辑错误，`figma_status` 工具被错误地映射到了插件中不存在的 'status' 命令。\n\n如果您使用的是受影响的版本，建议暂时通过源代码运行或等待官方修复。根本修复方案是修改 MCP 服务代码，使其直接调用内部状态获取逻辑（`getStatus()`），而不是发送 RPC 命令。请检查是否有更新的版本发布以获取此修复。","https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fissues\u002F9",{"id":83,"question_zh":84,"answer_zh":85,"source_url":61},26314,"如何在 macOS 上验证 --remote-debugging-pipe  workaround 是否生效？","您可以创建一个测试脚本来启动 Figma 并检查调试管道是否正常工作。以下是一个简化的验证逻辑：\n\n1. 使用 `spawn` 启动 Figma 二进制文件（通常位于 `\u002FApplications\u002FFigma.app\u002FContents\u002FMacOS\u002FFigma`）。\n2. 监听 stdout\u002Fstderr 以确认没有报错。\n3. 尝试建立 CDP 连接。\n\n如果成功，您将看到类似以下的输出：\n- \"Debug pipe is working.\"\n- 浏览器版本信息（如 Chrome\u002F142.x...）\n- 发现的目标数量（Targets discovered）\n\n这证明新的 pipe 模式可以替代旧的端口模式进行调试。",[87,92,97,102,107,112,117,122,127,132,137,142,147,152,157,162,167,172,177,182],{"id":88,"version":89,"summary_zh":90,"released_at":91},171560,"v0.13.1","## 修复\n\n- MCP 工具因参数名不匹配而失效 — RPC 处理程序现在直接接受 CLI 参数名（`value`、`mode`、`gap`、`padding`、`radius` 等）\n- 所有涉及多节点的命令中，`ids` 参数的字符串到数组的自动转换\n- 将内联 eval 替换为规范的 RPC 命令（`get-current-page`、`to-component`、`boolean-*`）\n- `getToolByName` 在调用 `tools\u002Flist` 之前返回 undefined\n- 生成的 MCP 工具定义中，使用引号包裹的短横线命名参数\n- MCP 服务器版本 now 现在从 package.json 中读取版本信息","2026-02-22T19:25:49",{"id":93,"version":94,"summary_zh":95,"released_at":96},171561,"v0.13.0","## 新增\n\n- **管道传输** — `daemon start --pipe` 通过 `--remote-debugging-pipe` 而不是 `--remote-debugging-port` 进行连接。无需二进制文件打补丁或管理员权限。适用于 Figma 126.1.2 及更高版本。（#6）\n\n## 修复\n\n- MCP `figma_status` 返回“未知命令：status”（#9）\n- MCP `figma_variable_create` 会因“未找到集合”而失败（#8）","2026-02-22T17:00:01",{"id":98,"version":99,"summary_zh":100,"released_at":101},171562,"v0.12.1","修复 #7\n\n- MCP 工具定义在构建时生成，而非在运行时解析 TypeScript 源代码\n- 移除了仅适用于 Bun 的 `import.meta.dir` 用法\n- `dist\u002Fmcp-tools.json` 现在已包含在发布的包中","2026-02-19T08:02:00",{"id":103,"version":104,"summary_zh":105,"released_at":106},171563,"v0.12.0","## 变更\n\n- 新增 `figma-use patch` 命令，用于在 Figma 126 及以上版本上重新启用远程调试\n- 自动检测调试是否被阻止，并在连接失败时显示修复说明","2026-02-19T07:37:18",{"id":108,"version":109,"summary_zh":110,"released_at":111},171564,"v0.11.3","## 已更改\n\n- **`diff visual` 可选依赖** — `pngjs` 和 `pixelmatch` 现在采用懒加载；不使用 `diff visual` 的用户无需安装这些依赖。修复了缺失依赖时的安装提示信息，使其更加清晰。","2026-02-03T13:37:20",{"id":113,"version":114,"summary_zh":115,"released_at":116},171565,"v0.11.2","## 新增\n\n- **`arrange` 命令** — 使用网格、行、列或 d3 树图算法在画布上布局节点\n  - `grid` — 自动计算列数，尊重每列\u002F每行的最大尺寸\n  - `row` \u002F `column` — 可配置间距的线性排列\n  - `squarify` — 通过 d3-hierarchy 树图实现智能矩形打包\n  - `binary` — 平衡二叉树划分\n  - 无 ID = 对页面所有顶级子节点进行布局\n\n## 变更\n\n- 将 19 个共享插件工具函数提取到 `shared.ts` 中（从 `rpc.ts` 和 `main.ts` 中移除 316 行代码）\n- 将 `cdp-api.ts` 合并到 `cdp.ts` — 形成单一的 CDP 模块\n- 去重类型：共享 `NodeRef`，整合 `ExportResult`","2026-01-30T15:19:35",{"id":118,"version":119,"summary_zh":120,"released_at":121},171566,"v0.11.1","## 修复\n\n- **`diff visual` 卡死** — 该命令在生成差异图片后能够正常退出\n- **`diff visual` 并行导出问题** — 修复了顺序导出调用中的竞态条件\n- **`diff create` 扩展属性支持** — 现在会比较单个边角半径、边角平滑度、混合模式、旋转、裁剪内容、效果以及矢量路径\n\n## 新增\n\n- **矢量路径序列化** — `diff create` 和 `get-node-tree` 现在会包含矢量节点的 SVG 路径数据","2026-01-29T14:40:03",{"id":123,"version":124,"summary_zh":125,"released_at":126},171567,"v0.11.0","## 亮点\n\n### 基于评论的工作流（实验性）\nAI 代理现在可以等待 Figma 中的评论并实时响应：\n```bash\nfigma-use comment watch --json   # 阻塞直至有新评论\nfigma-use comment resolve \u003Cid>   # 标记为已完成\n```\n返回 `target_node` — 评论标记正下方的精确元素。\n\n### 无障碍快照\n从 Figma 设计中提取无障碍树：\n```bash\nfigma-use analyze snapshot              # 整页\nfigma-use analyze snapshot \u003Cid> -i      # 仅交互元素\n```\n根据组件名称和结构检测角色：按钮、复选框、文本框、表格等。\n\n### 设计分析\n- `analyze colors` — 包含变量名的颜色使用情况\n- `analyze typography` — 字体样式和行高\n- `analyze spacing` — 间距\u002F内边距模式及与网格的契合度\n- `analyze clusters` — 查找重复的视觉模式\n\n### 代码检查（实验性）\n17 条设计一致性和无障碍相关规则：\n```bash\nfigma-use lint --preset recommended\nfigma-use lint --preset accessibility\n```\n\n### 其他\n- 扩展的样式属性（圆角、效果、约束、旋转、混合模式）\n- 导出时的智能尺寸调整（HUG\u002FFILL\u002FFIXED）\n- JSX 导出中的语义化 HTML 转换\n- 守护进程模式，加速连续命令执行\n\n---\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fcompare\u002Fv0.10.1...v0.11.0","2026-01-23T16:00:51",{"id":128,"version":129,"summary_zh":130,"released_at":131},171568,"v0.10.1","### 已修复\n\n- 当 `--pretty` 标志缺少 `oxfmt` 时，显示安装提示\n\n**完整更新日志**: https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fcompare\u002Fv0.10.0...v0.10.1","2026-01-21T12:25:18",{"id":133,"version":134,"summary_zh":135,"released_at":136},171569,"v0.10.0","## 新特性\n\n### `export jsx` 命令\n\n将任意 Figma 节点转换回 JSX：\n\n```bash\nfigma-use export jsx 123:456 --pretty\n```\n\n```tsx\nimport { Frame, Icon, Text } from 'figma-use\u002Frender'\nexport default function SaveButton() {\n  return (\n    \u003CFrame name=\"SaveButton\" w={120} h={44} bg=\"#1FAFBB\" rounded={8} flex=\"row\" gap={8}>\n      \u003CIcon name=\"lucide:save\" size={18} color=\"#FFFFFF\" \u002F>\n      \u003CText size={16} color=\"#FFFFFF\">保存\u003C\u002FText>\n    \u003C\u002FFrame>\n  )\n}\n```\n\n特性：\n- TypeScript AST 生成（而非字符串拼接）\n- 可通过名称识别 Iconify 图标 → `\u003CIcon name=\"...\" \u002F>`\n- 将矢量图形导出为内联 SVG\n- 格式化选项：`--semi`、`--single-quote`、`--tabs`、`--tab-width`、`--trailing-comma`\n- 格式化由 [oxfmt](https:\u002F\u002Foxc.rs) 提供支持（可选依赖）\n\n### `diff jsx` 命令\n\n以格式化的 JSX 差异形式比较两个节点：\n\n```bash\nfigma-use diff jsx 123:456 789:012\n```\n\n---\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fcompare\u002Fv0.9.2...v0.10.0","2026-01-21T12:17:41",{"id":138,"version":139,"summary_zh":140,"released_at":141},171570,"v0.9.2","## New Features\n\n### `\u003CImage>` element\n\nLoad images from URL directly in JSX:\n\n```tsx\n\u003CImage src=\"https:\u002F\u002Fexample.com\u002Fphoto.jpg\" w={200} h={150} \u002F>\n```\n\n### Import support in stdin\n\nUse familiar module syntax when piping to `render --stdin`:\n\n```tsx\nimport { Frame, Text, defineComponent } from 'figma-use\u002Frender'\n\nconst Button = defineComponent('Button',\n  \u003CFrame bg=\"#3B82F6\" p={12} rounded={6}>\n    \u003CText color=\"#FFF\">Click\u003C\u002FText>\n  \u003C\u002FFrame>\n)\n\nexport default () => (\n  \u003CFrame flex=\"row\" gap={8}>\n    \u003CButton \u002F>\n    \u003CButton \u002F>\n  \u003C\u002FFrame>\n)\n```\n\nBoth pure JSX snippets and full module syntax are supported.\n\n---\n\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fcompare\u002Fv0.9.1...v0.9.2","2026-01-21T11:24:42",{"id":143,"version":144,"summary_zh":145,"released_at":146},171571,"v0.9.0","## Breaking Changes\n\n**Direct CDP communication** — no more proxy server or plugin required!\n\n```bash\n# Old way (removed)\nfigma-use proxy &\n# Open Figma → Plugins → Development → Figma Use\n\n# New way\nopen -a Figma --args --remote-debugging-port=9222\nfigma-use status  # Ready!\n```\n\n**Package renamed** — `@dannote\u002Ffigma-use` → `figma-use`\n\n```bash\nnpx figma-use status\nbunx figma-use status\n```\n\n## What's New\n\n- **Simplified architecture** — CLI talks directly to Figma via Chrome DevTools Protocol\n- **Runtime-agnostic** — works with both Node.js and Bun\n- **CLI bundle size reduced** — 1.85MB → 1.1MB (-41%)\n- **Faster startup** — no WebSocket handshake, no plugin initialization\n- **New JSX renderer** — uses Figma Widget API instead of custom reconciler\n- **Grid layout support** — CSS Grid for 2D layouts\n- **Multiple IDs in node commands** — `node delete 1:23 1:24 1:25`\n- **Standalone MCP server** — `figma-use mcp serve`\n\n## Removed\n\n- `figma-use proxy` command\n- `figma-use plugin install\u002Funinstall` commands  \n- Multi-file support via proxy\n- `file list\u002Fselect` commands\n\nSee [CHANGELOG.md](https:\u002F\u002Fgithub.com\u002Fdannote\u002Ffigma-use\u002Fblob\u002Fmaster\u002FCHANGELOG.md) for full details.","2026-01-21T09:53:29",{"id":148,"version":149,"summary_zh":150,"released_at":151},171572,"v0.8.0","### Added\n\n- **`query` command** — XPath selectors for finding nodes (powered by fontoxpath)\n  ```bash\n  figma-use query \"\u002F\u002FFRAME\"                              # All frames\n  figma-use query \"\u002F\u002FFRAME[@width \u003C 300]\"                # Frames narrower than 300px  \n  figma-use query \"\u002F\u002FCOMPONENT[starts-with(@name, 'Button')]\"  # Name starts with\n  figma-use query \"\u002F\u002FFRAME[contains(@name, 'Card')]\"     # Name contains\n  figma-use query \"\u002F\u002FSECTION\u002FFRAME\"                      # Direct children\n  figma-use query \"\u002F\u002FSECTION\u002F\u002FTEXT\"                      # All descendants\n  figma-use query \"\u002F\u002F*[@cornerRadius > 0]\"               # Any node with radius\n  ```\n  Full XPath 3.1 support: axes, predicates, functions, arithmetic\n\n- **Multi-file support** — proxy now supports multiple simultaneous plugin connections\n  - Each plugin instance registers with fileKey and fileName\n  - `file list` — show all connected files\n  - `file select \u003Cname>` — switch active file (partial match supported)\n  - `status` shows all connected files with active marker\n  \n- **Connector commands** — work with connector lines\n  - `connector list` — list connectors on current page\n  - `connector get \u003Cid>` — get connector details (endpoints, stroke, line type)\n  - `connector set \u003Cid>` — update connector properties (stroke, weight, line type, caps)\n  - `connector create` — create connector (FigJam only, Figma API limitation)\n\n- **`figma_render` MCP tool** — render JSX via MCP protocol\n\n- **MCP.md** — documentation for Model Context Protocol integration\n\n### Changed\n\n- Extracted `transformJsxSnippet` to separate module for reuse\n\n### Fixed\n\n- `@dannote\u002Ffigma-use\u002Frender` — missing `color.ts` in published package\n- Proxy connection cleanup on plugin disconnect","2026-01-20T18:44:45",{"id":153,"version":154,"summary_zh":155,"released_at":156},171573,"v0.7.1","### Changed\n\n- SKILL.md rewritten — structure like README, compact best practices\n- `render --examples` updated — added Icon, shorthands, `--x`\u002F`--y` examples\n- README: added visual diff example with images","2026-01-19T13:42:50",{"id":158,"version":159,"summary_zh":160,"released_at":161},171574,"v0.7.0","### Added\n\n- **`create icon`** — add icons from Iconify (150k+ icons from 100+ sets)\n  ```bash\n  figma-use create icon mdi:home\n  figma-use create icon lucide:star --size 48 --color \"#FFD700\"\n  figma-use create icon heroicons:bell-solid --component  # as Figma component\n  ```\n\n- **`\u003CIcon>` primitive for JSX render**\n  ```jsx\n  \u003CFrame style={{ flexDirection: \"row\", gap: 8 }}>\n    \u003CIcon icon=\"mdi:home\" size={24} color=\"#3B82F6\" \u002F>\n    \u003CIcon icon=\"lucide:star\" size={32} color=\"#F59E0B\" \u002F>\n  \u003C\u002FFrame>\n  ```\n\n- **Variable references in CLI color options** — use `var:Name` or `$Name`:\n  ```bash\n  figma-use create rect --fill 'var:Colors\u002FPrimary'\n  figma-use create icon mdi:home --color '$Brand\u002FAccent'\n  ```\n\n- **Tailwind-like style shorthands** for JSX render:\n  ```jsx\n  \u002F\u002F Before\n  \u003CFrame style={{paddingLeft: 16, paddingRight: 16, backgroundColor: \"#3B82F6\", borderRadius: 6, flexDirection: \"row\"}}>\n  \n  \u002F\u002F After\n  \u003CFrame style={{px: 16, bg: \"#3B82F6\", rounded: 6, flex: \"row\"}}>\n  ```\n  Shorthands: `w`, `h`, `bg`, `rounded`, `p`, `px`, `py`, `flex`, `justify`, `items`, `size`, `font`, `weight`\n\n- **`render --x` and `--y` options** — position rendered root at specific coordinates\n\n- **`page current`** — show current page name and ID\n\n### Changed\n\n- README rewritten — focused on concepts, added [REFERENCE.md](.\u002FREFERENCE.md) with full command list\n- CLI arguments now use kebab-case: `--stroke-weight`, `--font-size`, `--min-width`\n\n### Fixed\n\n- Icon child ordering in render\n- White fill removed from imported SVG icons\n- ComponentSet global registry to avoid module duplication\n","2026-01-19T13:18:56",{"id":163,"version":164,"summary_zh":165,"released_at":166},171575,"v0.6.3","### Added\n\n- **`diff visual`** — create visual diff between two nodes as PNG\n  ```bash\n  figma-use diff visual --from \u003Cid1> --to \u003Cid2> --output diff.png\n  ```\n  Red pixels show differences. Options: `--scale`, `--threshold`\n\n### Changed\n\n- `set rotation` now uses `--angle` flag instead of positional argument (fixes negative values like `--angle -15`)","2026-01-18T23:01:22",{"id":168,"version":169,"summary_zh":170,"released_at":171},171576,"v0.6.2","## Added\n\n### `diff` commands (experimental)\n- `figma-use diff create --from \u003Cid> --to \u003Cid>` — compare two node trees and generate unified diff patch\n- `figma-use diff apply` — apply patch with old value validation\n- `figma-use diff show` — preview diff for proposed changes\n\n### Developer tools\n- `bun run format` — format code with oxfmt\n- `bun run lint` — lint code with oxlint\n\n## Documentation\n- SKILL.md — Incremental Updates via Diff section\n- README.md — Diff (Experimental) section","2026-01-18T21:52:41",{"id":173,"version":174,"summary_zh":175,"released_at":176},171577,"v0.6.1","### Fixed\n\n- `--timeout` now applies to single commands (e.g., `eval`) via proxy `\u002Fcommand`\n- CLI now works after global install (fixes #1)\n- Move `kiwi-schema` to devDependencies (already bundled into dist)","2026-01-18T21:20:31",{"id":178,"version":179,"summary_zh":180,"released_at":181},171578,"v0.6.0","### Added\n\n- **`node bounds`** — get node position, size, center point, edges\n- **`path` commands** — vector path manipulation:\n  - `path get \u003Cid>` — read SVG path data\n  - `path set \u003Cid> \"M...\"` — replace path data\n  - `path move \u003Cid> --dx --dy` — translate all points\n  - `path scale \u003Cid> --factor` — scale from center\n  - `path flip \u003Cid> --axis x|y` — mirror horizontally\u002Fvertically\n- Uses [svgpath](https:\u002F\u002Fgithub.com\u002Ffontello\u002Fsvgpath) library for path transformations\n- Path command tests","2026-01-18T18:14:38",{"id":183,"version":184,"summary_zh":185,"released_at":186},171579,"v0.5.9","### Changed\n\n- Version now read from package.json instead of hardcoded","2026-01-18T18:14:37",[188,200,208,217,225,233],{"id":189,"name":190,"github_repo":191,"description_zh":192,"stars":193,"difficulty_score":194,"last_commit_at":195,"category_tags":196,"status":53},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[46,197,198,199],"开发框架","图像","数据工具",{"id":201,"name":202,"github_repo":203,"description_zh":204,"stars":205,"difficulty_score":194,"last_commit_at":206,"category_tags":207,"status":53},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[197,198,46],{"id":209,"name":210,"github_repo":211,"description_zh":212,"stars":213,"difficulty_score":35,"last_commit_at":214,"category_tags":215,"status":53},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",150037,"2026-04-10T23:33:47",[197,46,216],"语言模型",{"id":218,"name":219,"github_repo":220,"description_zh":221,"stars":222,"difficulty_score":35,"last_commit_at":223,"category_tags":224,"status":53},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[197,198,46],{"id":226,"name":227,"github_repo":228,"description_zh":229,"stars":230,"difficulty_score":35,"last_commit_at":231,"category_tags":232,"status":53},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[45,46,198,197],{"id":234,"name":235,"github_repo":236,"description_zh":237,"stars":238,"difficulty_score":35,"last_commit_at":239,"category_tags":240,"status":53},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[45,197]]