메뉴
Pencil CLI 视觉设计（/pencil-design）：用自然语言生成 .pen 设计与 PNG 导出。 说「做设计」「生成 mockup」「landing page 视觉」「.pen」时也触发。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
REST/OpenAPI 设计审查。
系统调试循环（/debug）— 复现→假设→隔离→验证→记录；禁止无复现盲改。说「修 bug」「测挂了」「不知道为啥挂」时用。
交付验收（/delivery）：视觉 · i18n · 文档对齐 · 后端对接 · 组件完整度 · 可维护性 · 生产就绪。Sprint 收尾或 /release 分支前走查。说「交付验收」「上线前检查」「生产就绪」时用。
磁盘快照（/disk）：结构化采集 HOME 与可配置路径占用，写入 .cursorGrowth/disk-snapshots/， 并与上次快照对比变动。说「磁盘快照」「空间变动」「disk snapshot」时也触发。
Git — 分支、提交、合并。需要 git 操作时用。
信息架构（IA）规划与审查（/ia）— 工作流正交、角色入口、分支点、反模式。说「信息架构」「导航迷路」「角色首页」「工作流分支」「Dashboard 太乱」时用。
| name | pencil-design |
| description | Pencil CLI 视觉设计（/pencil-design）：用自然语言生成 .pen 设计与 PNG 导出。 说「做设计」「生成 mockup」「landing page 视觉」「.pen」时也触发。 |
工具技能（非 plan/run 主路径）。用这个：自然语言 → .pen + 导出图。不是那个：信息架构/导航 → ia；上线验收 → delivery；编辑器内改 .pen → Pencil MCP（若已装）。
用 Pencil CLI（@pencil.dev/cli）从描述生成专业视觉设计，输出 .pen（结构化 JSON）并可导出 PNG 等。
| 能力 | 入口 |
|---|---|
| 本 skill | CLI 头less 生成/迭代设计、pencil --prompt ... |
| Pencil MCP（Cursor 插件） | 已打开的 .pen 文件内编辑、节点操作、截图校验 |
设计前先确认 Pencil CLI 可用。
which pencil || npx pencil version
未安装时：
npm install -g @pencil.dev/cli
全局安装因权限失败时，改为项目本地：
npm install @pencil.dev/cli
之后用 npx pencil（或 ./node_modules/.bin/pencil）代替 pencil。pencil --help 可查子命令。
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_KEYCLI 内置 AI 设计 agent 依赖 Claude Code 鉴权（环境变量或订阅）。若均不可用，向用户说明选项并协助配置。
本 skill 与 npm 包 @pencil.dev/cli 同步；母版当前收录 0.2.8（docs/library-index.md）。
检查版本
npm view @pencil.dev/cli versionpencil version，或 npm list -g @pencil.dev/cli / npm list @pencil.dev/cli升级 CLI 后（agents 不会自动更新已拷贝的 skill 文件）：
npm install -g @pencil.dev/cli
curl -fsSL "https://unpkg.com/@pencil.dev/cli@latest/SKILL.md" -o .cursor/skills/pencil-design/SKILL.md
也可用 node_modules/@pencil.dev/cli/SKILL.md（全局/本地安装路径相同）。
何时检查：会话内首次设计前比对一次；用户升级 CLI 或行为与文档不符时再查。不必每条命令都查。
核心命令：
pencil --out <output.pen> --prompt "<design description>" --export <output.png> --export-scale 2
常用 flags：
--out, -o — .pen 输出路径（必填）--prompt, -p — 设计描述（必填）--prompt-file, -f — 附加参考图/文本（可重复）；不是从文件读 prompt 正文--export, -e — 导出图片--export-scale — 分辨率倍数（建议 2）--export-type — png（默认）· jpeg · webp · pdf--in, -i — 基于已有 .pen 迭代--model, -m — Claude 模型（默认 Opus）原样传递用户请求，不要自行扩写配色/版式/字体。CLI 内有独立设计 agent；你多加细节会与其判断冲突、效果变差。
用户说「给咖啡店做个 landing page」，prompt 就应是这句话，不要自己编 hero、色板、字体段落。
生成非即时 — CLI 会规划布局、创建元素并视觉校验。预期：
提前告知用户需等待数分钟。执行命令时 timeout 至少 600000ms（10 分钟）。
命令完成后读取导出图片展示给用户：
pencil --out design.pen --prompt "..." --export design.png --export-scale 2
用 Read 工具打开 PNG（多模态可渲染）。务必把图给用户看 — 这是交付重点。
要改已有设计，用 --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
agent 会在原稿上修改，而非从零开始。
迭代命名建议：
design.pen → design-v2.pen → design-v3.pen--in design.pen --out design.pen设计文件放在用户当前工作目录或 designs/ 等子目录。不要用临时目录 — 用户后续还要找文件迭代。