Calude Code + Pencil

一简介Pencil 就是Figma中的Make通过AI使用自然语言来绘制原型支持与常用的AI编程工具搭配使用。Pencil 的文件格式是 .pen本质上是 JSON因此可以放入Git中进行版本维护。Pencil生成的文件是可以直接导入到Figma中。Pencil可以直接生成前端代码File - Export Design to Code Guide。下载安装后需要使用邮件注册一个账号然后需要配置大模型可以通过登录账号也可以通过API Key。安装Pencil后自动就在Claude中安装了对应的MCP。大模型Agent配置好了就可以在这里使用自然语言生成原型了。File -- New File 创建一个新的文件然后使用AI绘制原型。二使用除了可以在Pencil中直接Chat也可以在其他支持MCP工具的AI工具中使用这里直接在Claude Code CLI中直接使用。生成代码一句提示词。代码生成后会自动安装和启动。三工具Pencil MCP 提供了 14 个 API我把它们分成 5 类查询类 → 了解当前状态get_editor_state获取选中元素这意味着你可以点选某个组件然后用语言组织去修改。get_screenshot截图验证效果读取类 → 理解设计稿batch_get 批量搜索节点get_variables 获取设计变量修改类 → 改设计稿batch_design核心增删改节点set_variables 设置设计变量批量操作类 → 全局修改replace_all_matching_properties 批量替换属性比如全局换肤辅助类 → 设计灵感get_guidelines 获取设计规范get_style_guide 获取风格指南四find-skills 安装find-skills 是一个搜索技能的工具。npx skillsaddhttps://github.com/vercel-labs/skills--skillfind-skillsnpx skillsfind[query]# 搜索技能npx skillsadd# 安装技能npx skills check# 检查更新npx skills update# 更新所有技能pencil-design帮你生成设计提示词 调用 MCP 创建设计稿ui-skills把设计稿导出成代码它会读取设计稿节点按 Tailwind shadcn/ui 规范生成 React 代码。这两个skill可以帮助生成更美观的页面。1.在 Pencil 中设计界面或用 AI 生成2.通过 MCP 导出代码3.运行项目查看效果4.需要修改时Pencil 可视化调整 或 Claude 自然语言修改5.再次导出快速迭代6.用 Git 管理 .pen 文件版本五Pencil 导入到 FigmaPencil to Figma PRO | Pencil.dev 收费版 1.2k usersPencil.dev to Figma · FREE 免费版 1.8k usersPencil.dev / .pen file import 1.1k users打开文件将.pen文件拖入打开的页面。