AI Agent Skill HUB

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.

261 stars
bypartme-ai
View on GitHubInstallation ↓

Best use case

pencil-ui-designer is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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.

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.

Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.

Practical example

Example input

Use the "pencil-ui-designer" skill to help with this workflow task. Context: 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.

Example output

A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.

When to use this skill

  • Use this skill when you want a reusable workflow rather than writing the same prompt again and again.

When not to use this skill

  • Do not use this when you only need a one-off answer and do not need a reusable workflow.
  • Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/pencil-ui-designer/SKILL.md --create-dirs "https://raw.githubusercontent.com/partme-ai/full-stack-skills/main/skills/pencil-skills/pencil-ui-designer/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/pencil-ui-designer/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How pencil-ui-designer Compares

Feature / Agentpencil-ui-designerStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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.

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.

Related Skills

course-designer

261
from partme-ai/full-stack-skills

Design structured courses including syllabi, learning objectives using Bloom's taxonomy, lesson plans, and assessment rubrics. Use when the user asks about course design, needs to create a curriculum, write learning objectives, structure educational modules, or build assessment plans.

stitch-ui-designer

261
from partme-ai/full-stack-skills

Master orchestrator for end-to-end Stitch UI design and generation. Use when the user asks to design, create, or make a UI screen using Stitch. Coordinates design spec generation, framework contract injection, prompt assembly, and MCP execution (create_project, generate_screen_from_text, get_screen) in a single workflow.

pencil

261
from partme-ai/full-stack-skills

用于通过 Pencil MCP 读取/修改 .pen 设计文件并校验布局。用户提到 pencil/.pen/设计稿编辑、需要列出工具或执行 batch_get/batch_design 时调用。

pencil-ui-design-system-vant

261
from partme-ai/full-stack-skills

Initialize Vant 4 design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Vant or Vant 4, needs to set up Vant color palette and typography variables, or wants to create component library frames for Button, Cell, Form, Dialog, and other Vant components.

pencil-ui-design-system-uviewpro

261
from partme-ai/full-stack-skills

Initialize uView Pro design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView Pro or uviewpro, needs to set up uView Pro color palette and typography variables, or wants to create component library frames for Button, Form, Tabs, Navbar, and other uView Pro components.

pencil-ui-design-system-uview

261
from partme-ai/full-stack-skills

Initialize uView 2.x design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView 2.x (not uView Pro), needs to set up uView color palette and typography variables, or wants to create component library frames for Button, Form, Cell, Tabs, and other uView components.

pencil-ui-design-system-ucharts

261
from partme-ai/full-stack-skills

Initialize uCharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with uCharts or qiun-data-charts, needs to set up chart series colors and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other uCharts chart types.

pencil-ui-design-system-layui

261
from partme-ai/full-stack-skills

Initialize Layui design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Layui or layui-vue, needs to set up Layui color palette and typography variables, or wants to create component library frames for Button, Table, Form, Menu, and other Layui components.

pencil-ui-design-system-element

261
from partme-ai/full-stack-skills

Initialize Element Plus design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Element Plus or Element UI, needs to set up Element color palette and typography variables, or wants to create component library frames for Button, Table, Form, Dialog, and other Element components.

pencil-ui-design-system-echarts

261
from partme-ai/full-stack-skills

Initialize ECharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with ECharts, needs to set up chart color palette and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other ECharts chart types.

pencil-ui-design-system-bootstrap

261
from partme-ai/full-stack-skills

Initialize Bootstrap design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Bootstrap, needs to set up Bootstrap color palette and typography variables, or wants to create component library frames for Grid, Card, Modal, Navbar, and other Bootstrap components.

pencil-ui-design-system-antd

261
from partme-ai/full-stack-skills

Initialize Ant Design (antd) design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Ant Design or antd, needs to set up antd color palette and typography variables, or wants to create component library frames for Button, Form, Table, Modal, and other antd components.