القائمة
Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
التثبيت باستخدام 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 design system guidelines. Use to read and understand specifications e.g. Material Design iOS HIG or custom specs before designing.
Get node visual screenshot. Visual Verification. Use to capture screenshots after operations to verify if the design meets expectations.
| name | pencil-mcp-get-editor-state |
| description | Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task. |
| license | Complete terms in LICENSE.txt |
This skill is designed to call the Pencil MCP tool:
get_editor_stateIf your client namespaces MCP tools, it may appear as mcp__pencil__get_editor_state.
Even if a trigger phrase matches, you must verify the user's intent:
If the answer is NO, do NOT use this skill. (e.g., "What is selected?" might refer to selected text in the IDE, not the Pencil canvas).
CRITICAL PREREQUISITE: You must ONLY use this skill when the user EXPLICITLY mentions "Pencil".
ALWAYS use this skill when:
Trigger phrases include:
include_schema (boolean, optional):
true if you want the .pen file schema to be included.false (default) to save context.get_editor_state.selection: List of selected node IDs.activePageId: Current page ID.filePath: Path of the current document.Get the current state to understand what the user is looking at. See 1-basic-check.json.
Get state including the .pen file schema to understand the document structure definitions. See 2-with-schema.json.
Explicitly checking state during a multi-step workflow where schema is already known. See 3-explicit-check.json.
English keywords: get state, editor context, current selection, active document, canvas position, check environment
Chinese keywords (中文关键词): 获取状态, 编辑器上下文, 当前选区, 选中节点, 画布位置, 环境检查
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。