full-stack-skills/pencil-skills

pencil

用于通过 Pencil MCP 读取/修改 .pen 设计文件并校验布局。用户提到 pencil/.pen/设计稿编辑、需要列出工具或执行 batch_get/batch_design 时调用。

Source text: Chinese

pencil-design-from-stitch-html

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,…

pencil-mcp-batch-design

Batch execute design changes. The Agent's 'Hands'. Core capability for inserting, updating, moving, or deleting nodes.

pencil-mcp-batch-get

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.

pencil-mcp-find-empty-space-on-canvas

Smartly find empty canvas space. Use to automatically plan artboard placement to avoid overlap and keep the canvas organized.

pencil-mcp-get-editor-state

Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.

pencil-mcp-get-guidelines

Get design system guidelines. Use to read and understand specifications e.g. Material Design iOS HIG or custom specs before designing.

pencil-mcp-get-screenshot

Get node visual screenshot. Visual Verification. Use to capture screenshots after operations to verify if the design meets expectations.

pencil-mcp-get-style-guide

Get specific style detailed definitions. Use to get metadata for a specific style, including palettes, typography rules, etc.

pencil-mcp-get-style-guide-tags

Explore design style tags. Use to get design inspiration, such as 'Modern', 'Dark Mode', 'SaaS' directions.

pencil-mcp-get-variables

Read design variables Tokens . Use to get Design Tokens color font variables defined in the current document to ensure consistency.

pencil-mcp-open-document

Open or create a design document. Use when you need to initialize design tasks, create new files, or switch to specific designs.

pencil-mcp-replace-all-matching-properties

Global property batch replace. Use for global style adjustment, e.g., 'Replace all red backgrounds with brand blue'.

pencil-mcp-search-all-unique-properties

Global property search. Use for design audit, e.g., 'Find all nodes using red background

pencil-mcp-set-variables

Set or update design variables. Use to establish or maintain a Design Token system.

pencil-skill-creator

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.

pencil-ui-design-spec-generator

Translates vague user requirements into an action-level PENCIL_PLAN sequence of Pencil MCP tool calls . Does not execute; outputs the plan only.

pencil-ui-design-system-antd

Initialize Ant Design. design system components in Pencil variables and component overview.

pencil-ui-design-system-bootstrap

Initialize Bootstrap. design system components in Pencil variables and component overview.

pencil-ui-design-system-echarts

Initialize ECharts. design system components chart placeholders and data-viz tokens in Pencil.

pencil-ui-design-system-element

Initialize Element Plus. design system components in Pencil variables and component overview.

pencil-ui-design-system-layui

Initialize Layui. design system components in Pencil variables and component overview.

pencil-ui-design-system-ucharts

Initialize uCharts. design system components chart placeholders and data-viz tokens in Pencil.

pencil-ui-design-system-uview

Initialize uView 2.x . design system components in Pencil variables and component overview.

pencil-ui-design-system-uviewpro

Initialize uView Pro. design system components in Pencil variables and component overview.

pencil-ui-design-system-vant

Initialize Vant. design system components in Pencil variables and component overview.

pencil-ui-designer

The Pencil Orchestrator. Handles the flow of initializing Design System Components based on requirements.

pencil-mcp-snapshot-layout

Get page layout structure snapshot. Use when you need to understand the current page's DOM-like tree structure to prepare for layout adjustments.

Source text: Mixed languages