teachingai/pencil-ui-design-spec-generator

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:

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 工具说明 — 各 MCP 方法参数与用法。
• Pencil MCP — 官方 MCP 说明。