メニュー
Factory skill for creating new pencil-ui-design-system-* skills. Use when you need to add support for a new design system layui antd bootstrap element uview uviewpro vant ucharts echarts etc. to the Pencil ecosystem.
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-skill-creator |
| description | Factory skill for creating new pencil-ui-design-system-* skills. Use when you need to add support for a new design system layui antd bootstrap element uview uviewpro vant ucharts echarts etc. to the Pencil ecosystem. |
| license | Complete terms in LICENSE.txt |
This skill guides the creation of new pencil-ui-design-system- skills*. Each skill initializes a design system in Pencil (variables + component overview frames) via PENCIL_PLAN.
All design-system skills created by this creator MUST adhere to:
Keep this file concise. Use bundled references when you need full details:
references/workflows.mdreferences/output-patterns.mdUse the bundled script to automatically generate the skill structure, SKILL.md (with Golden Template), and references/ placeholders.
# Usage: ./scripts/init_pencil_design_system_skill.py <name> --path <skills-directory>
./scripts/init_pencil_design_system_skill.py layui --path skills/
This will:
skills/pencil-ui-design-system-layui.SKILL.md with the required structure (When to use, Step 1 Variables, Step 2 Component overview).references/contract.md, references/official.md, references/examples.md placeholders.LICENSE.txt from an existing skill.Follow: references/workflows.md -> Manual creation.
Identify the framework and name the skill: pencil-ui-design-system-<name> (kebab-case).
pencil-ui-design-system-layuipencil-ui-design-system-uviewpromkdir -p skills/pencil-ui-design-system-<name>/references
SKILL.md (Golden Template)You MUST use the following template structure for the new skill:
name: pencil-ui-design-system-{{name}}, description containing "初始化 {{design_system}}: design system components".set_variables (colors, fonts, radius). Follow .pen schema.batch_design (component categories and component names per category).replace: false unless full reset; use Auto Layout for frames.references/contract.md: Design tokens and component contracts (prefix, naming).references/official.md: Link to official documentation.references/examples.md: Example PENCIL_PLAN or usage.This skill is part of the Pencil specification flow:
open_document, set_variables, batch_design, get_screenshot) in order.Script enforces: pencil-ui-design-system-[a-z0-9]+(-[a-z0-9]+)*.