community skill

Pencil Design

Pencil CLI npm 包内置的视觉设计 skill，用自然语言生成网站、应用界面、Dashboard、幻灯片、海报等 .pen 设计文件，并可导出 PNG、JPEG、WEBP 或 PDF。

communityskill packagedesignuimockuppencilnpm

Pencil Design

Pencil Design 是 @pencil.dev/cli npm 包随包发布的 Agent Skill，用于通过 Pencil CLI 从自然语言创建和迭代 .pen 视觉设计文件，并导出 PNG、JPEG、WEBP 或 PDF。它适合网站、App 屏幕、Dashboard、幻灯片、海报、Banner、营销素材、线框图和视觉 mockup 等设计生成任务。

来源

npm 包：https://www.npmjs.com/package/@pencil.dev/cli
包内 skill 文件：https://unpkg.com/@pencil.dev/cli@latest/SKILL.md
npm registry：https://registry.npmjs.org/@pencil.dev%2Fcli
CLI 官网：https://pencil.dev
许可证：Proprietary（npm license 字段为 UNLICENSED，包内 LICENSE 为 High Agency, Inc. 专有软件许可）

适合什么时候用

用户想“设计一个”网站、App 页面、Dashboard、登录页、活动海报、社交媒体图或演示页。
需要把视觉设计保存为 .pen 文件，后续继续通过命令行或 Pencil 工具迭代。
需要在生成设计后导出图片或 PDF 给用户查看。
需要 headless 设计流程，而不是手动打开图形设计软件制作初稿。

安装提示

这个条目不能按普通 GitHub skill 目录处理。当前 npx skills add @pencil.dev/cli --list 会把包名误判为 GitHub 仓库 https://github.com/@pencil.dev/cli.git 并克隆失败；npx skills add https://unpkg.com/@pencil.dev/cli@latest/SKILL.md --list 也只查找 /.well-known/agent-skills/index.json 或 /.well-known/skills/index.json，不会把单个 SKILL.md URL 当作 skill 安装源。因此该条目的 meta.json 关闭了详情页的 npx 安装命令展示。

可用方式是先安装 npm 包，再把包内 SKILL.md 复制到目标 agent 的 skills 目录。

npm install -g @pencil.dev/cli
pencil version

安装后可从 npm 包内取得 skill 文件：

node_modules/@pencil.dev/cli/SKILL.md

也可以直接获取同一个随包发布的文件：

https://unpkg.com/@pencil.dev/cli@latest/SKILL.md
https://cdn.jsdelivr.net/npm/@pencil.dev/cli@latest/SKILL.md

复制到目标 agent 的 skill 目录时，目录名可使用上游 frontmatter 中的 skill 名称：

pencil-design/SKILL.md

不同 agent 的 skill 目录不同；若不确定，应先查当前工具文档或询问用户希望安装到哪个 agent / IDE。

核心命令

场景	命令	用途
安装 CLI	`npm install -g @pencil.dev/cli`	安装 `pencil` 可执行命令
检查版本	`pencil version` 或 `npm view @pencil.dev/cli version`	确认当前 CLI / skill 版本
登录状态	`pencil status`	检查 Pencil 用户认证
创建设计	`pencil --out design.pen --prompt "Create a login page" --export design.png --export-scale 2`	生成 `.pen` 并导出图片
迭代设计	`pencil --in design.pen --out design-v2.pen --prompt "Make the header larger" --export design-v2.png --export-scale 2`	基于已有 `.pen` 修改
查看帮助	`pencil --help`	获取当前版本支持的命令和参数

使用注意

CLI 执行设计任务前需要 Pencil 用户认证；可用 pencil login、pencil signup 或 PENCIL_CLI_KEY。
上游 skill 说明还要求可用的 Claude Code agent 认证或对应 agent API key，以便运行其 AI 设计 agent。
生成设计通常需要数分钟；运行命令时应使用较长超时，并在完成后读取导出的图片展示给用户。
上游建议把用户原始设计需求直接传给 --prompt，不要额外扩写颜色、布局、字体等设计细节，以免与 Pencil 自身设计 agent 冲突。
.pen 和导出图片应保存到用户当前项目或明确的设计目录，便于后续继续迭代。