pencil-ui-designer
Orchestrates Pencil design system initialization by routing framework requests to the correct pencil-ui-design-system-* skill. Use when the user explicitly mentions Pencil and wants to initialize a design system (antd, Bootstrap, Element Plus, Layui, uView, Vant, uCharts, ECharts), set up component libraries, or create design tokens in a .pen file.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pencil-ui-designer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pencil-ui-designer Compares
| Feature / Agent | pencil-ui-designer | Standard Approach |
|---|---|---|
| Platform Support | multi | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Orchestrates Pencil design system initialization by routing framework requests to the correct pencil-ui-design-system-* skill. Use when the user explicitly mentions Pencil and wants to initialize a design system (antd, Bootstrap, Element Plus, Layui, uView, Vant, uCharts, ECharts), set up component libraries, or create design tokens in a .pen file.
Which AI agents support this skill?
This skill is compatible with multi.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Pencil Designer (Master Skill) This is the entry point for all Pencil design system initialization tasks. It acts as the orchestrator that classifies the target framework, routes to the correct `pencil-ui-design-system-*` skill, and returns the structured initialization plan. ## When to use this skill Use this skill when: - The user explicitly mentions "Pencil" and wants to initialize a design system (antd, Bootstrap, Element Plus, Layui, uView, Vant, uCharts, ECharts) - The user says "Pencil, initialize components for [framework]" or "Use Pencil to set up [framework] design system" - The conversation context is about Pencil design tasks requiring framework-specific component setup **Do NOT use this skill** if the user does not explicitly mention "Pencil" or if the request is about general design tasks unrelated to Pencil .pen files. ## Workflow ### 1) Intent Classification Parse the user request to determine: - **Target framework**: Which UI library or chart library (antd, Bootstrap, Element Plus, etc.) - **Components scope**: Full initialization or specific component categories ### 2) Framework Routing Route the request to the specific `pencil-ui-design-system-*` skill: | User mentions | Routes to | |---|---| | `layui`, `layui-vue` | `pencil-ui-design-system-layui` | | `antd`, `ant design` | `pencil-ui-design-system-antd` | | `bootstrap` | `pencil-ui-design-system-bootstrap` | | `element`, `element-plus` | `pencil-ui-design-system-element` | | `uview` (2.x) | `pencil-ui-design-system-uview` | | `uview pro`, `uviewpro` | `pencil-ui-design-system-uviewpro` | | `vant`, `vant 4` | `pencil-ui-design-system-vant` | | `ucharts`, `qiun-data-charts` | `pencil-ui-design-system-ucharts` | | `echarts` | `pencil-ui-design-system-echarts` | ### 3) Execution Invoke the target skill which generates a PENCIL_PLAN: a sequence of Pencil MCP tool calls (`open_document` -> `set_variables` -> `batch_design` -> `get_screenshot`). ### 4) Output Return the structured plan (JSON/Action List) to the user for execution or approval.