用途：面向设计到代码工作流，整合三项能力——Figma MCP（从 Figma 获取设计上下文）、Pencil MCP（视觉渲染与 .pen 设计文件编辑）、Pencil-to-code 导出（生成 React/Tailwind 代码）。
主要能力：Figma MCP 通过远程服务器 https://mcp.figma.com/mcp 接入，安装命令为 claude plugin install figma@claude-plugins-official，提供 16 个官方工具，涵盖读取（get_design_context、get_variable_defs、get_screenshot、get_metadata）、写入（use_figma、generate_figma_design、create_new_file）、Code Connect、FigJam 与设计系统等；写入画布在 beta 期间免费。Pencil MCP 用于创建和编辑 .pen 文件（schema v2.9），CLI 为 @pencil.dev/cli v0.2.4，提供 14 个 MCP 工具加 1 个仅 CLI 的 export_nodes，包括 batch_design、batch_get、get_screenshot、snapshot_layout、get_variables、set_variables、get_guidelines、get_style_guide、open_document 等；.pen 为纯 JSON，可 Git 差异与合并。Pencil-to-code 为基于提示词的工作流，无导出 API，也无 pencil.config.js。
使用方式：未指定风格时默认 shadcn/ui Nova 预设，命令为 bunx --bun shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=neutral&theme=neutral&iconLibrary=hugeicons&font=noto-sans&menuAccent=bold&menuColor=default&radius=small&template=next&rtl=false" --template next。Pencil CLI 认证可用 pencil login 或 PENCIL_CLI_KEY 环境变量；代理模式示例：pencil --out file.pen --prompt "..." --model claude-sonnet-4-6。典型流程为获取设计上下文、读取变量、截图、实现并比对。
适用场景：从 Figma 提取设计令牌与组件规格、快速原型与视觉迭代、将 .pen 设计转为 React 组件与 Tailwind 样式。
限制：Pencil-to-code 依赖提示词而非导出接口；其余平台、收费与效果细节资料未提供。