什么是Pencil？
Pencil 是一个支持 Claude、ChatGPT 等 AI 模型的智能设计画布，允许用户通过代理直接在画布上构建网站和应用界面。它提供网页版和桌面下载版本，并支持导入现有网页或 Figma 文件作为可编辑图层。
Pencil的核心功能有哪些？
- AI 代理协作在画布上直接使用 Claude、ChatGPT 等模型进行设计，或通过 MCP、WebMCP、CLI 连接外部代理。
- 多格式导入与导出支持导入 .fig 文件和任意网页为可编辑图层；可将框架一键导出为 HTML 和 CSS/Tailwind 代码。
- 矢量绘图工具使用钢笔工具绘制路径、编辑曲线并粘贴 SVG 代码，支持图像矢量化和背景移除。
- 实时着色器效果利用 Vibe Shaders 创建由实时着色器驱动的渐变和纹理视觉特效。
- 组件与变量系统创建具有覆盖功能的可复用符号，并通过变量统一管理颜色、间距和字体样式。
- 高性能渲染引擎基于自定义 WebGL 管线，确保在包含数千个图层时平移、缩放和编辑依然流畅。
Pencil的使用案例有哪些？
- 快速原型构建输入自然语言指令（如“为旧金山咖啡店设计网站”），由 AI 生成初始设计方案并在画布上调整。
- 现有资源迁移将 Chrome 浏览器中的网页或本地 Figma 文件直接复制到 Pencil 中，转化为可继续编辑的设计图层。
- 设计与代码同步完成界面设计后，直接导出 HTML/CSS 代码，或通过开放 JSON 格式的 .pen 文件让开发代理读取设计结构。
如何使用Pencil？
- 启动应用访问 pen.dev 网页版或下载桌面客户端并登录账户。
- 初始化画布选择空白画布开始新设计，或使用“Import”功能导入现有网站 URL 或 .fig 文件。
- 调用 AI 代理在聊天栏输入设计需求以生成内容，或在画布上选中元素后通过代理工具进行细化修改。
- 手动精修使用钢笔工具、组件库、变量系统和着色器功能对 AI 生成的结果进行精确调整和视觉优化。
- 输出成果点击导出按钮获取 HTML/CSS 代码，或保存为开放的 .pen JSON 格式以便后续协作。
