Pencil 是一款原生面向 AI 的前端设计工具，直接跑在 VS Code 和 Cursor 里。它把设计稿存成放在仓库 `/design` 目录下的 JSON `.pen` 文件，因此可以像代码一样走 Git 版本管理，同时通过 Model Context Protocol（MCP）让 AI 代理直接读取。Claude Code 或者其他支持 MCP 的代理可以「看见」你的视觉布局，直接生成像素级精确的 React、HTML 和 CSS，免去在 Figma 框架和代码库之间来回搬运的过程。 核心理念是双向闭环：在无限画布上视觉化设计、导出代码、再把现有组件反向导回画布，同时让 Design Tokens 在 Pencil 和代码库之间保持同步。目标用户是想跳过「Figma → 交付 → 手动实现」流程的前端开发和 Design Engineer，以及越来越多用 AI 代理直接出活的 PM-builder。 目前 Pencil 处于早期访问阶段，工具本身免费使用，但 AI 部分需要 Claude Code 订阅（每月 20 美元起）。Medium、CTOL Digital Solutions 等媒体在 2026 年的报道里把它视为「IDE 原生设计」方向上比较有想法的实践。