pencil-design by chiroro-jr/pencil-design-skill
npx skills add https://github.com/chiroro-jr/pencil-design-skill --skill pencil-design在 Pencil 中设计生产级质量的 UI,并从中生成清晰、可维护的代码。此技能强制执行设计系统复用、变量使用、布局正确性、视觉验证以及设计到代码工作流的最佳实践。
.pen 文件中设计屏幕、页面或组件@theme、shadcn/ui 令牌)pencil_batch_design、pencil_batch_get 等)这些规则解决了最常见的代理错误。违反它们会产生不一致、难以维护且生成糟糕代码的设计。
当设计文件中已存在某个组件时,切勿从头开始重新创建它。
在插入任何元素之前,您必须:
pencil_batch_get 并设置 patterns: [{ reusable: true }] 以列出所有可用的可复用组件广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
I(parent, { type: "ref", ref: "<componentId>" }) 将其作为 ref 实例插入U(instanceId + "/childId", { ... }) 更新其后代来自定义实例详细工作流程请参见 references/design-system-components.md。
当变量存在时,切勿硬编码颜色、边框半径、间距或排版值。
在应用任何样式值之前,您必须:
pencil_get_variables 以读取所有已定义的设计令牌primary 而非 #3b82f6,使用 radius-md 而非 6)bg-primary、text-foreground、rounded-md)。切勿使用任意值语法(bg-[#3b82f6]、text-[var(--primary)]、rounded-[6px])详细工作流程请参见 references/variables-and-tokens.md。
绝不允许文本或子元素溢出其父元素或画板。
对于每个文本元素和容器:
"fill_container" 作为宽度pencil_snapshot_layout 并设置 problemsOnly: true 以检测裁剪/溢出问题详细工作流程请参见 references/layout-and-text-overflow.md。
在构建一个部分或屏幕后,切勿跳过视觉验证。
在完成每个逻辑部分(页眉、英雄区、侧边栏、表单、卡片网格等)后:
pencil_get_screenshotpencil_snapshot_layout 并设置 problemsOnly: true 以捕捉裁剪和重叠问题详细工作流程请参见 references/visual-verification.md。
当文档中已存在某个徽标或重复资源时,切勿生成新的。
在生成任何图像或徽标之前:
pencil_batch_get 并通过名称模式搜索现有的图像/徽标节点(例如,patterns: [{ name: "logo|brand|icon" }])C()(复制)操作复制它G()(生成)操作详细工作流程请参见 references/asset-reuse.md。
frontend-design Skill切勿在未首先加载 frontend-design skill 的情况下在 Pencil 中设计或从 Pencil 生成代码。
frontend-design skill 提供了美学方向和设计质量标准,以防止通用、千篇一律的 UI。您必须:
frontend-design skill这适用于两个方向:
0. 加载 `frontend-design` skill -> 获取美学方向和设计质量标准
1. pencil_get_editor_state -> 了解文件状态,获取模式
2. pencil_batch_get (reusable) -> 发现设计系统组件
3. pencil_get_variables -> 读取设计令牌
4. pencil_get_guidelines -> 获取相关的设计规则
5. pencil_get_style_guide_tags -> (可选)获取风格灵感
6. pencil_get_style_guide -> (可选)应用风格方向
7. pencil_find_empty_space_on_canvas -> 为新屏幕寻找空间
8. pencil_batch_design -> 构建设计(逐部分)
9. pencil_get_screenshot -> 视觉验证每个部分
10. pencil_snapshot_layout -> 检查布局问题
对于屏幕的每个部分(页眉、内容区、页脚、侧边栏等):
ref 实例插入,应用变量设置样式完整工作流程请参见 references/design-to-code-workflow.md。完整的 Pencil 到 Tailwind 映射表请参见 references/tailwind-shadcn-mapping.md。多画板响应式代码生成请参见 references/responsive-breakpoints.md。
摘要:
frontend-design skill 以获取美学方向pencil_get_guidelines,主题为 "code" 和 "tailwind"pencil_get_variables 以将设计令牌映射到 Tailwind @theme 声明pencil_batch_get 读取设计树bg-primary、rounded-md)生成代码,切勿使用任意值frontend-design 指导原则:独特的排版、有意的颜色、动效、空间构成cn() 进行类合并,使用 Lucide 处理图标| 工具 | 何时使用 |
|---|---|
pencil_get_editor_state | 首次调用 - 了解文件状态并获取 .pen 模式 |
pencil_batch_get | 读取节点,搜索组件(reusable: true),检查结构 |
pencil_batch_design | 插入、复制、更新、替换、移动、删除元素;生成图像 |
pencil_get_variables | 读取设计令牌(颜色、半径、间距、字体) |
pencil_set_variables | 创建或更新设计令牌 |
pencil_get_screenshot | 任何节点的视觉验证 |
pencil_snapshot_layout | 检测裁剪、溢出、重叠元素 |
pencil_get_guidelines | 获取设计规则,主题包括:code、table、tailwind、landing-page、design-system |
pencil_find_empty_space_on_canvas | 为新屏幕/框架寻找空间 |
pencil_get_style_guide_tags | 浏览可用的风格方向 |
pencil_get_style_guide | 获取特定的风格灵感 |
pencil_search_all_unique_properties | 审计文档中的属性值 |
pencil_replace_all_matching_properties | 批量更新属性(例如,交换颜色) |
pencil_open_document | 打开 .pen 文件或创建新文档 |
| 错误 | 正确方法 |
|---|---|
| 从头开始创建按钮 | 搜索现有的按钮组件,作为 ref 插入 |
使用 fill: "#3b82f6" | 使用变量:引用 primary 或相应的变量 |
使用 cornerRadius: 8 | 使用变量:引用 radius-md 或相应的变量 |
在代码中生成 bg-[#3b82f6] | 使用语义化的 Tailwind 类:bg-primary |
在代码中生成 text-[var(--primary)] | 使用语义化的 Tailwind 类:text-primary |
在代码中生成 rounded-[6px] | 使用语义化的 Tailwind 类:rounded-md |
在 className 中使用 var(--primary) | 使用语义化的 Tailwind 类:bg-primary 或 text-primary |
| 不检查溢出 | 在每个部分后调用 pencil_snapshot_layout(problemsOnly: true) |
| 跳过截图 | 在每个部分后调用 pencil_get_screenshot |
| 生成新徽标 | 使用 C() 从另一个画板复制现有徽标 |
| 构建整个屏幕后再检查 | 逐部分构建和验证 |
忽略 pencil_get_guidelines | 在开始前始终为相关主题调用它 |
使用 tailwind.config.ts | 使用 CSS @theme 块(Tailwind v4) |
| 在代码中使用 Material Icons | 映射到 Lucide 图标(<Search />、<ArrowRight /> 等) |
跳过 frontend-design skill | 在 Pencil 中设计或生成代码前始终加载它 |
| 通用的人工智能美学(Inter 字体、紫色渐变) | 遵循 frontend-design 指导原则,实现独特、有意的设计 |
每周安装量
259
仓库
GitHub 星标数
1
首次出现
2026年2月7日
安全审计
安装于
opencode246
codex242
gemini-cli241
github-copilot233
kimi-cli226
amp225
Design production-quality UIs in Pencil and generate clean, maintainable code from them. This skill enforces best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows.
.pen file@theme, shadcn/ui tokens)pencil_batch_design, pencil_batch_get, etc.)These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code.
NEVER recreate a component from scratch when one already exists in the design file.
Before inserting any element, you MUST:
pencil_batch_get with patterns: [{ reusable: true }] to list all available reusable componentsref instance using I(parent, { type: "ref", ref: "<componentId>" })U(instanceId + "/childId", { ... })See references/design-system-components.md for detailed workflow.
NEVER hardcode colors, border radius, spacing, or typography values when variables exist.
Before applying any style value, you MUST:
pencil_get_variables to read all defined design tokensprimary not #3b82f6, use radius-md not 6)bg-primary, text-foreground, rounded-md). NEVER use arbitrary value syntax (bg-[#3b82f6], text-[var(--primary)], )See references/variables-and-tokens.md for detailed workflow.
NEVER allow text or child elements to overflow their parent or the artboard.
For every text element and container:
"fill_container" for width on text elements inside auto-layout framespencil_snapshot_layout with problemsOnly: true to detect clipping/overflowSee references/layout-and-text-overflow.md for detailed workflow.
NEVER skip visual verification after building a section or screen.
After completing each logical section (header, hero, sidebar, form, card grid, etc.):
pencil_get_screenshot on the section or full screen nodepencil_snapshot_layout with problemsOnly: true to catch clipping and overlapSee references/visual-verification.md for detailed workflow.
NEVER generate a new logo or duplicate asset when one already exists in the document.
Before generating any image or logo:
pencil_batch_get and search for existing image/logo nodes by name pattern (e.g., patterns: [{ name: "logo|brand|icon" }])C() (Copy) operationG() (Generate) operation for genuinely new images that don't exist anywhere in the documentSee references/asset-reuse.md for detailed workflow.
frontend-design SkillNEVER design in Pencil or generate code from Pencil without first loading thefrontend-design skill.
The frontend-design skill provides the aesthetic direction and design quality standards that prevent generic, cookie-cutter UI. You MUST:
frontend-design skill at the start of any Pencil design or code generation taskThis applies to both directions:
0. Load `frontend-design` skill -> Get aesthetic direction and design quality standards
1. pencil_get_editor_state -> Understand file state, get schema
2. pencil_batch_get (reusable) -> Discover design system components
3. pencil_get_variables -> Read design tokens
4. pencil_get_guidelines -> Get relevant design rules
5. pencil_get_style_guide_tags -> (optional) Get style inspiration
6. pencil_get_style_guide -> (optional) Apply style direction
7. pencil_find_empty_space_on_canvas -> Find space for new screen
8. pencil_batch_design -> Build the design (section by section)
9. pencil_get_screenshot -> Verify each section visually
10. pencil_snapshot_layout -> Check for layout problems
For each section of a screen (header, content area, footer, sidebar, etc.):
ref instances, apply variables for stylesSee references/design-to-code-workflow.md for the complete workflow. See references/tailwind-shadcn-mapping.md for the full Pencil-to-Tailwind mapping table. See references/responsive-breakpoints.md for multi-artboard responsive code generation.
Summary:
frontend-design skill for aesthetic directionpencil_get_guidelines with topic "code" and "tailwind"pencil_get_variables to map design tokens to Tailwind @theme declarationspencil_batch_getbg-primary, rounded-md), never arbitrary valuesfrontend-design guidelines: distinctive typography, intentional color, motion, spatial composition| Tool | When to Use |
|---|---|
pencil_get_editor_state | First call - understand file state and get .pen schema |
pencil_batch_get | Read nodes, search for components (reusable: true), inspect structure |
pencil_batch_design | Insert, copy, update, replace, move, delete elements; generate images |
pencil_get_variables | Read design tokens (colors, radius, spacing, fonts) |
pencil_set_variables | Create or update design tokens |
| Mistake | Correct Approach |
|---|---|
| Creating a button from scratch | Search for existing button component, insert as ref |
Using fill: "#3b82f6" | Use the variable: reference primary or the corresponding variable |
Using cornerRadius: 8 | Use the variable: reference radius-md or the corresponding variable |
Generating bg-[#3b82f6] in code | Use semantic Tailwind class: bg-primary |
Weekly Installs
259
Repository
GitHub Stars
1
First Seen
Feb 7, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode246
codex242
gemini-cli241
github-copilot233
kimi-cli226
amp225
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
136,300 周安装
rounded-[6px]cn() for class merging, Lucide for iconspencil_get_screenshot | Visual verification of any node |
pencil_snapshot_layout | Detect clipping, overflow, overlapping elements |
pencil_get_guidelines | Get design rules for: code, table, tailwind, landing-page, design-system |
pencil_find_empty_space_on_canvas | Find space for new screens/frames |
pencil_get_style_guide_tags | Browse available style directions |
pencil_get_style_guide | Get specific style inspiration |
pencil_search_all_unique_properties | Audit property values across the document |
pencil_replace_all_matching_properties | Bulk update properties (e.g., swap colors) |
pencil_open_document | Open a .pen file or create a new document |
Generating text-[var(--primary)] in code | Use semantic Tailwind class: text-primary |
Generating rounded-[6px] in code | Use semantic Tailwind class: rounded-md |
Using var(--primary) in className | Use semantic Tailwind class: bg-primary or text-primary |
| Not checking for overflow | Call pencil_snapshot_layout(problemsOnly: true) after every section |
| Skipping screenshots | Call pencil_get_screenshot after every section |
| Generating a new logo | Copy existing logo from another artboard with C() |
| Building entire screen, then checking | Build and verify section by section |
Ignoring pencil_get_guidelines | Always call it for the relevant topic before starting |
Using tailwind.config.ts | Use CSS @theme block (Tailwind v4) |
| Using Material Icons in code | Map to Lucide icons (<Search />, <ArrowRight />, etc.) |
Skipping frontend-design skill | Always load it before designing in Pencil or generating code |
| Generic AI aesthetics (Inter font, purple gradients) | Follow frontend-design guidelines for distinctive, intentional design |