📦 Pencil Design — Pencil CLI设计工具
v1.0.0使用Pencil CLI工具创建高质量视觉设计——网站、应用界面、仪表盘、幻灯片、营销材料、社交媒体图形等。通过自然语言提示生成专业的UI设计、原型和线框图。
by 详细分析 ▾
运行时依赖
版本
pencil-design 1.0.0 - Pencil Design技能初始版本。- 支持通过Pencil CLI从自然语言提示创建高质量视觉设计（网站、应用、仪表盘、幻灯片、图形）。- 包含Pencil CLI和Claude Code代理要求的设置、安装和身份验证说明。- 记录更新程序和保持技能与CLI版本同步的指南。- 提供清晰的命令用法、提示处理最佳实践、用户对生成时间的期望，以及显示结果和迭代设计的说用。- 列出流行代理环境的常见安装路径和技能安装故障排除技巧。
安装命令
点击复制技能文档
使用Pencil CLI通过自然语言描述创建专业视觉设计。Pencil是一个无头设计工具，可生成.pen文件（结构化JSON设计格式）并可导出为图片。
设置
在设计之前，请确保Pencil CLI可用。
检查安装
which pencil || npx pencil version
如果未找到pencil，请安装它：
npm install -g @pencil.dev/cli
如果全局安装因权限失败，请改为本地安装：
npm install @pencil.dev/cli
然后通过npx pencil（或./node_modules/.bin/pencil）运行，而不是pencil。你可以通过pencil --help命令了解可用命令。
身份验证
Pencil用户
使用CLI需要已认证的Pencil用户登录。首先，使用pencil status命令检查机器上的当前用户配置。如果未登录，有以下选项：
- 使用
pencil signup --email you@example.com --username johndoe --name "John Doe"命令创建新用户。 - 使用
pencil login --email you@example.com [--code abc123]对现有或新创建的用户进行身份验证。 - 也可以使用
PENCIL_CLI_KEY环境变量进行身份验证（如果已在会话中设置）。
Claude Code代理
CLI需要身份验证才能运行其AI代理，需要Claude Code。需要在系统配置中设置已认证的Claude Code用户（通过环境变量或用户订阅）。如果这些都不可用，请告诉用户他们有哪些选项并帮助他们设置一个。
保持更新
此技能与Pencil CLI npm包（@pencil.dev/cli）保持同步。发布的包在其根目录包含SKILL.md；包版本即为技能版本。
检查更新的CLI/技能
- 注册表上的最新版本：
npm view @pencil.dev/cli version - 已安装的CLI：
pencil version，或npm list -g @pencil.dev/cli（全局）/npm list @pencil.dev/cli（项目）
升级CLI，然后刷新你复制的技能文件（代理不会自动更新你放在配置文件夹中的技能文件）：
npm install -g @pencil.dev/cli
安装后从哪里复制技能
- 从依赖树：
node_modules/@pencil.dev/cli/SKILL.md（全局和本地安装的路径相同；从项目根目录或全局node_modules前缀解析）。
无需克隆仓库即可获取相同文件（镜像npm tarball；可选的第三方CDN）：
https://unpkg.com/@pencil.dev/cli@latest/SKILL.mdhttps://cdn.jsdelivr.net/npm/@pencil.dev/cli@latest/SKILL.md
使用@latest获取最新发布，或固定版本（例如@0.2.4）以获取可重现的快照。
如果你不知道技能在这个机器上的位置 代理并不总是从上下文获取技能目录。当路径不明显时：
- 询问用户他们的代理或IDE从哪里加载技能，或者他们希望将技能安装在哪里。
- 查看产品文档了解"skills"、"agent skills"或"plugins"——路径因工具和版本而异。
- 你仍然可以使用技能内容而无需安装：在会话中获取或打开上面的
SKILL.mdURL（unpkg/jsDelivr），以便即使磁盘路径未知，指导也适用。
要进行持久安装，请将获取的文件复制到用户或文档指定的路径。
典型技能位置（请与工具当前文档确认——布局可能会更改）：
| 环境 | 放置SKILL.md的位置 |
|---|---|
| Cursor | 项目：.cursor/skills/pencil-design/SKILL.md；用户级：在~/.cursor/skills/下 |
| Claude Code | 通常是.claude/skills/pencil-design/SKILL.md或用户级在~/.claude/下 |
| OpenClaw | 通常是~/.openclaw/skills/、工作区.agents/skills/，或OpenClaw技能文档中的路径——为用户的设置进行验证 |
| 其他代理（Codex等） | 使用你的产品用于技能或提示的目录 |
curl -fsSL "https://unpkg.com/@pencil.dev/cli@latest/SKILL.md" -o .cursor/skills/pencil-design/SKILL.md
何时检查更新
- 在会话早期，在第一次Pencil设计运行之前（比较
npm view @pencil.dev/cli version与已安装的CLI），这样你就不会遵循过时的指令。 - 再次如果用户说他们升级了CLI，或者行为与本文档不匹配（标志、身份验证、时间）。
- 不要在每个单独命令之前检查——每会话一次就足够了，除非有什么改变了或错误表明版本不匹配。
创建设计
核心命令：
pencil --out --prompt "" --export --export-scale 2
关键标志：
--out, -o— 保存.pen文件的位置（必需）--prompt, -p— 要设计的内容（必需）--export, -e— 导出结果图片--export-scale— 图片分辨率倍数（使用2获得清晰输出）--export-type— 格式：png（默认）、jpeg、webp、pdf--in, -i— 从现有.pen文件开始（用于迭代）--model, -m— 使用的Claude模型（默认为Opus）
传递提示
直接将用户的请求作为提示传递——不要扩展，也不要添加用户实际所说的之外的细节。Pencil CLI有自己的AI设计代理，负责处理创意决策，如布局结构、配色方案、字体、间距和内容。在用户请求之上添加你自己的设计细节会与CLI代理自己的判断冲突，产生更差的结果。 如果用户说"为我做一个咖啡店的落地页"，提示应该完全是这样——而不是你编造的包含英雄部分、配色方案和字体选择的段落。
时间预期
设计生成不是即时的——CLI运行一个AI代理来规划布局、创建每个元素并可视化验证结果。预期：
- 简单设计（一张卡片、一个单独组件）：1-2分钟
- 中等设计（应用屏幕、落地页部分）：2-3分钟
- 复杂设计（完整落地页、详细仪表盘）：3-5+分钟
让用户提前知道生成需要几分钟，这样他们就不会一直等待。使用足够的超时（至少600000ms/10分钟）运行命令。
显示结果
命令完成后，读取导出的图片显示给用户：
# 命令导出到你指定的路径
pencil --out design.pen --prompt "..." --export design.png --export-scale 2
然后对导出的PNG使用Read工具——它会可视化渲染，因为你是一个多模态模型。创建后始终向用户显示图片。这就是重点——他们想看视觉效果。
迭代设计
当用户想要更改现有设计时，使用--in标志加载之前的.pen文件：
pencil --in design.pen --out design-v2.pen --prompt "Make the header larger and change the accent color to green" --export design-v2.png --export-scale 2
代理将读取现有设计并应用修改，而不是从头开始。对于快速连续迭代，保持一致的命名模式：
design.pen→design-v2.pen→design-v3.pen- 或使用单个文件：
--in design.pen --out design.pen（覆盖）
工作目录
将设计文件保存在用户当前工作目录或像designs/这样的子目录中。不要使用临时目录——用户以后会想要找到并迭代这些文件。