pencil-ui-design by allenai2014/pencil-ui-design
npx skills add https://github.com/allenai2014/pencil-ui-design --skill pencil-ui-design本 Skills 提供了一套工业级标准的 UI 设计规范,用于 Pencil MCP 设计工作。
在开始设计前,先设置设计系统变量:
mcp_pencil_set_variables({
filePath: "<your-file.pen>",
variables: {
// 参考 design-tokens.json 中的完整变量定义
}
})
使用 reusable: true 创建组件,通过 ref 复用:
// 创建组件
buttonPrimary=I(document, {type: "frame", reusable: true, name: "Button/Primary", ...})
// 使用组件
btn1=I(someParent, {type: "ref", ref: "buttonPrimary"})
| 变量名 | Light Mode | Dark Mode |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 用途 |
|---|
--background | #FAFAFA | #09090B | 页面背景 |
--foreground | #18181B | #FAFAFA | 主文本 |
--card | #FFFFFF | #18181B | 卡片背景 |
--card-foreground | #18181B | #FAFAFA | 卡片文本 |
--muted | #F4F4F5 | #27272A | 次要背景 |
--muted-foreground | #71717A | #A1A1AA | 次要文本 |
--border | #E4E4E7 | #27272A | 边框 |
--primary | #18181B | #FAFAFA | 主按钮 |
--primary-foreground | #FAFAFA | #18181B | 主按钮文本 |
--secondary | #F4F4F5 | #27272A | 次按钮 |
--accent | #FCD34D | #FCD34D | 强调色 |
--destructive | #EF4444 | #EF4444 | 危险操作 |
--ring | #18181B | #D4D4D8 | Focus ring |
| 层级 | 大小 | 字重 | 行高 | 用途 |
|---|---|---|---|---|
| Display | 36px | 700 | 1.2 | 大标题 |
| H1 | 24px | 600 | 1.3 | 页面标题 |
| H2 | 20px | 600 | 1.4 | 区块标题 |
| H3 | 18px | 600 | 1.4 | 卡片标题 |
| Body | 14px | 400 | 1.5 | 正文 |
| Small | 12px | 400 | 1.4 | 辅助文本 |
| Caption | 10px | 500 | 1.3 | 标签 |
推荐字体 : Inter (英文), Noto Sans SC (中文)
基于 4px 网格:
xs: 4pxsm: 8pxmd: 12pxlg: 16pxxl: 24px2xl: 32px3xl: 48px| 变量 | 值 | 用途 |
|---|---|---|
radius-sm | 6px | 小元素 (Badge, Chip) |
radius-md | 8px | 按钮、输入框 |
radius-lg | 12px | 卡片、弹窗 |
radius-xl | 16px | 大卡片 |
radius-full | 9999px | 圆形头像 |
{
"shadow-sm": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000D",
"blur": 2,
"offset": {"x": 0, "y": 1}
},
"shadow-md": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000A",
"blur": 6,
"offset": {"x": 0, "y": 4}
},
"shadow-lg": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000014",
"blur": 15,
"offset": {"x": 0, "y": 8}
}
}
{
"type": "frame",
"name": "Button/Primary",
"reusable": true,
"height": 40,
"layout": "horizontal",
"padding": [16, 10],
"gap": 8,
"alignItems": "center",
"justifyContent": "center",
"fill": "#18181B",
"cornerRadius": 8,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000001A",
"blur": 2,
"offset": {"x": 0, "y": 1}
}
}
// 文本: fill="#FFFFFF", fontFamily="Inter", fontSize=14, fontWeight=500
{
"fill": "#F4F4F5",
"stroke": "#E4E4E7",
"strokeThickness": 1,
"cornerRadius": 8
}
// 文本: fill="#18181B"
{
"fill": "transparent",
"cornerRadius": 8
}
// Hover: fill="#F4F4F5"
{
"fill": "#EF4444",
"cornerRadius": 8
}
// 文本: fill="#FFFFFF"
{
"type": "frame",
"name": "Card",
"reusable": true,
"layout": "vertical",
"padding": 16,
"gap": 12,
"fill": "#FFFFFF",
"stroke": "#E4E4E7",
"strokeThickness": 1,
"cornerRadius": 12,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000A",
"blur": 4,
"offset": {"x": 0, "y": 2}
}
}
{
"type": "frame",
"name": "Input",
"reusable": true,
"height": 40,
"layout": "horizontal",
"padding": [12, 10],
"gap": 8,
"alignItems": "center",
"fill": "#FFFFFF",
"stroke": "#E4E4E7",
"strokeThickness": 1,
"cornerRadius": 8
}
// Focus 状态: stroke="#18181B", strokeThickness=2
{
"type": "frame",
"name": "Avatar",
"reusable": true,
"width": 40,
"height": 40,
"cornerRadius": 9999,
"fill": "#F4F4F5",
"layout": "vertical",
"alignItems": "center",
"justifyContent": "center"
}
{
"type": "frame",
"name": "Badge",
"reusable": true,
"height": 22,
"layout": "horizontal",
"padding": [6, 8],
"alignItems": "center",
"justifyContent": "center",
"fill": "#F4F4F5",
"stroke": "#E4E4E7",
"strokeThickness": 1,
"cornerRadius": 6
}
// 文本: fontSize=10, fontWeight=500
⚠️ 重要 : Pencil MCP 使用
Material Symbols Rounded图标字体,不是 Lucide!
{
"type": "icon_font",
"iconFontFamily": "Material Symbols Rounded",
"iconFontName": "home",
"fontSize": 24,
"width": 24,
"height": 24,
"fill": "#71717A"
}
注意: 必须同时设置
fontSize、width和height属性,否则图标可能不显示!
| 类别 | 图标名称 | 用途 |
|---|---|---|
| 导航 | home, menu, arrow_back, arrow_forward, close | 导航和菜单 |
| 操作 | add, edit, delete, search, settings | 常用操作 |
| 状态 | check_circle, error, warning, info | 状态提示 |
| 媒体 | headphones, mic, volume_up, play_arrow, pause | 音频视频 |
| 社交 | person, group, share, favorite, star | 社交功能 |
| 文件 | folder, description, menu_book, article | 文件文档 |
| 通信 | mail, chat, notifications, send | 消息通知 |
| 游戏 | extension, sports_esports, military_tech | 游戏奖励 |
| 学习 | school, lightbulb, timer, assignment | 教育学习 |
| 尺寸 | 值 | 用途 |
|---|---|---|
| XS | 16px | 辅助小图标、徽章内 |
| SM | 20px | 按钮内图标、列表图标 |
| MD | 24px | 标准图标、导航图标 |
| LG | 32px | 大按钮、空状态图标 |
| XL | 48px | 特殊强调、卡片主图标 |
// 创建一个带图标的按钮
iconBtn=I(parent, {
type: "frame",
width: 48,
height: 48,
layout: "vertical",
alignItems: "center",
justifyContent: "center",
fill: "#1E2A2F",
cornerRadius: 9999
})
icon=I(iconBtn, {
type: "icon_font",
iconFontFamily: "Material Symbols Rounded",
iconFontName: "add",
fontSize: 24,
width: 24,
height: 24,
fill: "#FFFFFF"
})
Pencil MCP 提供 G() 操作来生成或获取图片,支持两种方式:
// 先创建一个 frame 容器
avatar=I(parent, {type: "frame", width: 48, height: 48, cornerRadius: 9999})
// 使用 AI 生成图片填充
G(avatar, "ai", "cute cartoon boy avatar, friendly smile, warm colors, children illustration style")
// 获取 Unsplash 图片
heroImg=I(parent, {type: "frame", width: 400, height: 300})
G(heroImg, "stock", "modern office workspace laptop natural light")
| 类型 | 好的 Prompt | 不好的 Prompt |
|---|---|---|
| 头像 | "cute cartoon boy, round face, brown hair, warm yellow background, simple illustration" | "boy" |
| 图标 | "isometric cloud server icon, soft gradients, minimalist" | "server" |
| 背景 | "abstract gradient purple blue, soft blur, dreamy atmosphere" | "background" |
I() 创建 frame,再用 G() 应用图片cornerRadius: 9999 可实现圆形图片当文本内容较长时,必须设置以下属性防止溢出:
{
"type": "text",
"content": "这是一段很长的文本内容...",
"width": "fill_container",
"textGrowth": "fixed-width",
"lineHeight": 1.5
}
| 值 | 说明 | 适用场景 |
|---|---|---|
"auto" | 文本根据内容自动调整宽度(默认) | 短文本、标签 |
"fixed-width" | 固定宽度,超出自动换行 | 段落、描述文本 |
"truncate" | 固定宽度,超出显示省略号 | 列表项标题 |
// 段落文本 (自动换行)
paragraph=I(parent, {
type: "text",
content: "这是一段较长的描述文本,需要自动换行显示。",
width: "fill_container",
textGrowth: "fixed-width",
fontSize: 14,
lineHeight: 1.5,
fill: "#71717A"
})
// 标题文本 (单行)
title=I(parent, {
type: "text",
content: "标题文本",
fontSize: 18,
fontWeight: 600,
fill: "#1E2A2F"
})
mcp_pencil_set_variables 设置颜色变量#FAFAFAlayout: "vertical"ref 引用可复用组件U() 覆盖特定属性mcp_pencil_get_screenshot 截图检查使用 mcp_pencil_replace_all_matching_properties 批量替换属性:
mcp_pencil_replace_all_matching_properties({
filePath: "design.pen",
parents: ["pageId1", "pageId2"],
properties: {
"fillColor": {"#FFF9F2": "#FAFAFA"},
"fontFamily": {"Fredoka": "Inter"},
"cornerRadius": {24: 12}
}
})
#FAFAFA)1px #E4E4E7)Weekly Installs
98
Repository
GitHub Stars
51
First Seen
Jan 26, 2026
Security Audits
Installed on
opencode91
gemini-cli90
codex90
github-copilot82
kimi-cli73
amp70
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装
后端架构模式指南:整洁架构、六边形架构与领域驱动设计实践
123 周安装
GitHub PR 自动创建工具 - 支持任务验证、测试执行与 Conventional Commits 规范
121 周安装
Anthropic Claude API 开发指南:Messages API、工具使用与提示工程实战
122 周安装
演讲幻灯片内容创作指南:掌握陈述式、提问式标题与极简设计原则
121 周安装
响应式设计完整指南:移动优先、Flexbox、CSS Grid与性能优化实践
124 周安装
ToolUniverse 技能自动安装脚本 - 一键安装50+专业研究工具,支持Cursor、Claude等AI助手
122 周安装