Agent-Skills.md

Agent Skills: 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.

UncategorizedID: teachingai/full-stack-skills/pencil-ui-design-spec-generator

Repository

teachingai/full-stack-skills
partme-aiLicense: NOASSERTION
20635

Install this agent skill to your local

pnpm dlx add-skill https://github.com/partme-ai/full-stack-skills/tree/HEAD/skills/pencil-skills/pencil-ui-design-spec-generator

Skill Files

Browse the full folder contents for pencil-ui-design-spec-generator.

Download Skill

Loading file tree…

skills/pencil-skills/pencil-ui-design-spec-generator/SKILL.md

Skill Metadata

Name
pencil-ui-design-spec-generator
Description
"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."

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