pencil-import-workflow

Pencil Import Workflow

This skill is used for the interaction orchestration of "importing from a Pencil design file and generating Axhub Make prototype code".
The key points are:First read the currently open Pencil file and Frame via MCP, then let the user confirm the import scope and output structure, and only then write files。

Prerequisites

1. The Pencil desktop app has the target .pen file open
2. MCP is available (if not available, refer to:/skills/mcp-installer/SKILL.md）

Standard Process (must be followed in order)

1) Check Pencil MCP availability

• Prefer calling:mcp__pencil__get_editor_state
• If unsure about the tool prefix/namespace: first use MCP's list_tools(or equivalent capability) to list available tools, find the pencil-related tools, and then call them
• If the tool is unavailable/the call fails:
  • Stop subsequent steps
  • Prompt the user to open Pencil and select the target Frame, then retry

2) Get the current selection and candidate Frames

• If the selection contains Frames: candidates = selection Frames
• If the selection is empty or is not a Frame:
  • Use mcp__pencil__batch_get to search/list Frame candidates in the current file ("existing frames")

The candidate information output to the user must include at least:

• Index
• frameId
• frameName
• Size (if available)

When there are few candidates (optional): use mcp__pencil__get_screenshot to help the user identify them.

If there are too many candidates to confirm:

• Ask the user to go back to Pencil and first select the Frames to import (multiple selection allowed)
• Then re-read the selection

3) Have the user confirm (blocking point; do not write files before confirmation)

Must wait for the user to explicitly answer the following 2 types of questions:

1. Import scope: all / subset (specified by index or frameId) / go back to Pencil and reselect
2. Output structure (choose one, do not recommend):
   • A. Single prototype with multiple screens: generate 1 src/prototypes/<name>/, and within index.tsx provide navigation to switch between Screens
   • B. Multiple prototypes in batch: generate 1 for each Frame src/prototypes/<proto-name>/

Also confirm the naming rules:

• <name> / <proto-name> How to derive kebab-case from the Frame name
• Rules for handling duplicate-name conflicts (suffix, index, or user-specified)

4) Generate prototype artifacts

For each generated prototype directory, output at least:

• src/prototypes/<name>/spec.md
• src/prototypes/<name>/index.tsx
• (optional)src/prototypes/<name>/style.css

spec.md Must record Pencil source information (write it if available):

• .pen Identifier/path (if obtainable)
• List of imported frameIds, list of frameNames
• Mapping from Screens to implementation modules

If you need stronger constraints for "first complete the prototype, then rebuild Pencil 1:1 and enforce subsequent synchronization", refer to:/skills/pencil-sync-after-prototype-workflow/SKILL.md(skill name:pencil-sync-after-prototype-workflow）。

5) Acceptance

Run for each generated prototype:

node scripts/check-app-ready.mjs /prototypes/<name>

Until the status is READY。