使用说明
铅笔插件
基于Pencil MCP的设计-开发集成工具。为全栈开发人员提供设计工作流自动化、设计系统管理、验证/评论、React+Tailwind代码转换功能。
特性
- 自动化设计工作流：使用Pencil MCP创建元件，自动配置布局
- 管理设计系统：组件、变量、主题管理和文档记录
- 设计验证/评论：设计质量检查、可访问性验证、一致性审查
- 代码转换：在.pen文件中创建React+Tailwind CSS代码
先决条件
- 必须启用Pencil MCP服务器
- 必须安装Claude Code
安装
# 로컬 테스트
cc --plugin-dir /path/to/pencil-plugin
# 또는 plugins 디렉토리에 복사
cp -r pencil-plugin ~/.claude/plugins/
命令
| 命令 | 描述 |
|---|---|
/pencil:create <type> <description> |
创建新设计屏幕/组件 |
/pencil:to-code [nodeId] |
将选定节点转换为React+Tailwind代码 |
/pencil:extract-component [nodeId] <name> |
提取可重复使用的组件 |
/pencil:review [nodeId] |
设计质量和一致性评论 |
/pencil:style-guide |
创建/更新样式指南 |
技能
pencil-basics：Pencil MCP工具的使用方法、节点类型、布局系统design-system-patterns：设计系统构建模式，变量/主题管理design-to-code：在.pen文件中创建React+Tailwind代码的准则
代理
design-validator：自动验证设计质量、可访问性和一致性code-generator：在设计中生成生产准备代码
配置
特定于项目的设置包括： .claude/pencil.local.md 在文件中管理：
---
colorPalette:
primary: "#3B82F6"
secondary: "#6B7280"
accent: "#F59E0B"
typography:
fontFamily: "Inter, sans-serif"
baseFontSize: 16
spacing:
unit: 4
---
# Project Design System
프로젝트별 디자인 시스템 설정...
许可证
麻省理工学院
