pencil-ui-design-spec-generator
Translates high-level user requirements into a PENCIL_PLAN: a strict sequence of Pencil MCP tool calls (open_document, set_variables, batch_design, get_screenshot). Use when the user explicitly mentions Pencil and wants to plan a design task, generate a step-by-step design spec, or create a login form, dashboard, or design system initialization plan.
Best use case
pencil-ui-design-spec-generator 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. Translates high-level user requirements into a PENCIL_PLAN: a strict sequence of Pencil MCP tool calls (open_document, set_variables, batch_design, get_screenshot). Use when the user explicitly mentions Pencil and wants to plan a design task, generate a step-by-step design spec, or create a login form, dashboard, or design system initialization plan.
Translates high-level user requirements into a PENCIL_PLAN: a strict sequence of Pencil MCP tool calls (open_document, set_variables, batch_design, get_screenshot). Use when the user explicitly mentions Pencil and wants to plan a design task, generate a step-by-step design spec, or create a login form, dashboard, or design system initialization plan.
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-design-spec-generator" skill to help with this workflow task. Context: Translates high-level user requirements into a PENCIL_PLAN: a strict sequence of Pencil MCP tool calls (open_document, set_variables, batch_design, get_screenshot). Use when the user explicitly mentions Pencil and wants to plan a design task, generate a step-by-step design spec, or create a login form, dashboard, or design system initialization plan.
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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pencil-ui-design-spec-generator/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pencil-ui-design-spec-generator Compares
| Feature / Agent | pencil-ui-design-spec-generator | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Translates high-level user requirements into a PENCIL_PLAN: a strict sequence of Pencil MCP tool calls (open_document, set_variables, batch_design, get_screenshot). Use when the user explicitly mentions Pencil and wants to plan a design task, generate a step-by-step design spec, or create a login form, dashboard, or design system initialization plan.
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 UI Design Spec Generator
**Constraint**: Only use this skill when the user explicitly mentions "Pencil" or when orchestrating a Pencil design task (e.g. "use Pencil to draw", "initialize design system with Pencil").
## Purpose
This skill acts as a **planner**. It takes a high-level user request (e.g. "create a login form in Pencil", "init layui design system with Pencil") and outputs a **PENCIL_PLAN**: a strict sequence of steps, each step specifying which Pencil MCP tool to call and with what intent/parameters. The Agent then executes the plan by calling Pencil MCP tools in order; this skill does **not** call any MCP tool.
## Input
- **User request**: e.g. "Create a login form with Pencil", "Initialize uView Pro design system in Pencil", "Draw a dashboard layout in Pencil".
## Output format (STRICT)
Return a **PENCIL_PLAN** as a numbered list. Each step must specify:
- **Tool** (MCP tool name, e.g. `mcp__pencil__open_document`, `mcp__pencil__set_variables`, `mcp__pencil__batch_design`, `mcp__pencil__get_screenshot`).
- **Intent**: What this step achieves.
- **Key parameters**: Minimal parameter summary (e.g. `filePathOrTemplate: 'new'`, `variables: { primary: '#1890ff', ... }`, `operations: "root=I(document, ...)"`).
Example:
```text
PENCIL_PLAN
Step 1: mcp__pencil__open_document
Intent: Create a new design document.
Parameters: filePathOrTemplate: 'new'
Step 2: mcp__pencil__get_editor_state
Intent: Get current document root and reusable components.
Parameters: include_schema: false
Step 3: mcp__pencil__set_variables
Intent: Initialize design system color palette.
Parameters: variables: { primary: '#1890ff', ... }, replace: false
Step 4: mcp__pencil__batch_design
Intent: Create "Components Overview" frame with Basic/Form/Data sections.
Parameters: operations: "root=I(document, { type: 'frame', layout: 'vertical', name: 'Components Overview' }) ..."
Step 5: mcp__pencil__get_screenshot
Intent: Verify the generated layout.
Parameters: nodeId: <root-id from Step 4>
```
## Logic rules
1. **New document**: If the user asks to "create" or "init" and no file is open, start with `open_document('new')` and optionally `get_editor_state`.
2. **Design system init**: If the user asks to "init XXX design system", include `set_variables` (from the corresponding pencil-ui-design-system-* skill) and `batch_design` for component overview; optionally call `get_guidelines(topic: 'design-system')` first.
3. **Single screen / form**: Plan `batch_design` operations (insert frames, text, components); keep each call to at most ~25 operations; then `get_screenshot` to verify.
4. **No execution**: This skill only outputs the PENCIL_PLAN. The Agent (or user) executes by calling the listed MCP tools in order.
## Integration with Pencil path
1. **PRD** or user request → this skill outputs **PENCIL_PLAN**.
2. **pencil-ui-design-system-*** skills provide the concrete variables and component structure for a given design system; the generator may reference them when building the plan.
3. Agent calls **pencil-mcp-*** skills (or MCP tools directly) to execute each step.
## Keywords
**English:** PENCIL_PLAN, Pencil plan, action-level plan, design spec, Pencil steps, MCP tool sequence, plan generator
**中文关键词：** PENCIL_PLAN、Pencil 计划、动作级计划、设计规范、Pencil 步骤、MCP 工具序列、计划生成
## References
- [Pencil MCP 工具说明](../../docs/pencil-mcp-tools.md) — 各 MCP 方法参数与用法。
- [Pencil MCP](../../docs/Pencil%20MCP.md) — 官方 MCP 说明。Related Skills
teaching-resource-generator
Generate teaching resources including slide deck outlines, progressive exercises, hands-on case studies, and learning guides with self-assessment checkpoints. Use when the user asks to create courseware, design practice exercises, build teaching materials, develop lesson content, or generate educational resources.
course-designer
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
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.
stitch-ui-design-variants
Generate alternative Stitch design variant prompts for A/B testing and creative exploration. Use when the user wants multiple style, layout, or content options for a Stitch screen. Takes a base Design Spec or prompt and produces 3 distinct variants (layout, style, or content variations).
stitch-ui-design-spec-vant
Vant 4 (Vue 3/Mobile) design spec for Stitch screen generation. Use when the user mentions Vant, vant4, or vant-ui in a Stitch design request. Outputs a hard-constraints prefix with Vant tokens (Primary #1989fa, van-button/van-field/van-nav-bar components, mobile-first 375px) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-spec-uviewpro
uView Pro (uni-app/Vue 3) design spec for Stitch screen generation. Use when the user mentions uview-pro, uviewpro, or uview 3.0 in a Stitch design request. Outputs a hard-constraints prefix with uView Pro tokens (Primary #3c9cff, rpx units, u-button/u-form/u-navbar components, script setup) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-spec-uview
uView 2.0 (uni-app/Vue 2) design spec for Stitch screen generation. Use when the user mentions uview, uview2, or u-view in a Stitch design request. Do NOT use for uView Pro requests. Outputs a hard-constraints prefix with uView 2 tokens (Primary #3c9cff, u-row/u-col/u-button components) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-spec-layui
Layui-Vue design spec for Stitch screen generation. Use when the user mentions Layui, layui-vue, or layui admin in a Stitch design request. Outputs a hard-constraints prefix with Layui tokens (Primary #16baaa, Nav-bg #393D49, layui-btn/input/card components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.
stitch-ui-design-spec-generator
Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.
stitch-ui-design-spec-element-plus
Element Plus design spec for Stitch screen generation. Use when the user mentions Element Plus, element-ui, or el-plus in a Stitch design request. Outputs a hard-constraints prefix with Element Plus tokens (colors, typography, radius, el-* components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.
stitch-ui-design-spec-bootstrap
Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-design-md
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md. Use when the user wants to extract a style guide, create visual consistency across Stitch screens, or document design tokens (colors, typography, spacing) from existing Stitch designs. Retrieves screens via Stitch MCP and outputs a markdown design system file.