القائمة
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/ 等子目录。不要用临时目录 — 用户后续还要找文件迭代。