メニュー
Translates vague user requirements into an action-level PENCIL_PLAN sequence of Pencil MCP tool calls . Does not execute; outputs the plan only.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
When you need to turn Stitch page HTML (or a Stitch URL) into a Pencil .pen design. Parses DOM and Tailwind, applies HTML→Pencil mapping and execution order, outputs sequential batch_design for layout and style fidelity (background, color, size, margin, padding, shadow). Supports multi-framework tokens.
Batch execute design changes. The Agent's 'Hands'. Core capability for inserting, updating, moving, or deleting nodes.
Batch search and read node information. The Agent's 'Eyes'. Use to find specific components e.g. all nodes named 'Button' or get child structure within a container.
Smartly find empty canvas space. Use to automatically plan artboard placement to avoid overlap and keep the canvas organized.
Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
Get design system guidelines. Use to read and understand specifications e.g. Material Design iOS HIG or custom specs before designing.
| name | pencil-ui-design-spec-generator |
| description | Translates vague user requirements into an action-level PENCIL_PLAN sequence of Pencil MCP tool calls . Does not execute; outputs the plan only. |
| license | Complete terms in LICENSE.txt |
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").
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.
Return a PENCIL_PLAN as a numbered list. Each step must specify:
mcp__pencil__open_document, mcp__pencil__set_variables, mcp__pencil__batch_design, mcp__pencil__get_screenshot).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>
open_document('new') and optionally get_editor_state.set_variables (from the corresponding pencil-ui-design-system-* skill) and batch_design for component overview; optionally call get_guidelines(topic: 'design-system') first.batch_design operations (insert frames, text, components); keep each call to at most ~25 operations; then get_screenshot to verify.English: PENCIL_PLAN, Pencil plan, action-level plan, design spec, Pencil steps, MCP tool sequence, plan generator
中文关键词： PENCIL_PLAN、Pencil 计划、动作级计划、设计规范、Pencil 步骤、MCP 工具序列、计划生成