# pencil-designer

**Repository Path**: vicoproplus/pencil-designer

## Basic Information

- **Project Name**: pencil-designer
- **Description**: pencil原型图输出
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: 七件事-rebuild1
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-07-09
- **Last Updated**: 2026-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Pencil Designer

Pencil 页面设计 Skill，支持 Codex 和 Claude Code。CLI 优先快速出图，Interactive/MCP 兜底精细控制，配置文件管理组件库。

## 简介

Pencil Designer 是一个专业的页面设计助手，帮助 Codex、Claude Code 等 AI Agent 通过 pencil CLI 创建 `.pen` 设计文件。结合了 CLI 快速生成和 Interactive/MCP 精细控制两种模式，通过 components.json 配置文件管理组件库，支持双向同步和完整性校验。

## 使用方法示例

1. 纯提示词输入
```
/skill:pencil-designer 生成一个带验证码的登录页面PRD
```

2. 引用已生成的需求文档PRD.md
```
/skill:pencil-designer @PRD.md
```


## 环境要求

- **bun**: 运行时环境。未安装时按平台安装：
  - Windows：`powershell -c "irm bun.sh/install.ps1|iex"`
  - Linux/macOS：`curl -fsSL https://bun.sh/install | bash`
- **pencil CLI**: `bun add -g @pen.dev/cli --registry=https://registry.npmmirror.com/`
- **认证**: 运行 `pencil login` 或设置 `PENCIL_CLI_KEY` 环境变量

## 核心功能

- ✅ 页面设计自动化：通过自然语言描述生成 .pen 设计文件
- ✅ CLI 优先 MCP 兜底：简单页面一句话生成，复杂页面精细控制
- ✅ 组件库配置管理：通过 components.json 管理组件注册、使用统计
- ✅ 双向同步：配置文件与控件库的一致性维护
- ✅ 6 步完整性校验：启动时自动验证文件、格式、nodeId
- ✅ 交互描述管理：JSON 格式 context，支持回写 PRD.md
- ✅ 便签文档生成：自动创建功能说明和字段说明便签
- ✅ 命名规范驱动：通过统一命名规范管理组件
- ✅ 批量处理：支持批量生成多个设计文件
- ✅ 导出能力：导出为 PNG/JPEG/WEBP/PDF
- ✅ 静态原型预览：从 .pen 生成单文件 HTML，左侧页面导航（flex:1，可拖拽分割线）+ 右侧 .pen 页面内容（flex:12），纯静态预览，不渲染 context 交互