Design
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.
Get page layout structure snapshot. Use when you need to understand the current page's DOM-like tree structure to prepare for layout adjustments.
This skill is designed to call the Pencil MCP tool:
snapshot_layoutIf your client namespaces MCP tools, it may appear as mcp__pencil__snapshot_layout.
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., "Analyze layout" might refer to HTML/CSS layout analysis).
CRITICAL PREREQUISITE: You must ONLY use this skill when the user EXPLICITLY mentions "Pencil".
ALWAYS use this skill when:
Trigger phrases include:
filePath (string, optional): Path to access a specific .pen file. Default is active document.maxDepth (integer, optional):
0 means only top-level nodes.parentId (string, optional): Only return layout for this node's subtree.problemsOnly (boolean, optional):
true to only return nodes with layout issues (e.g., clipped by parent).false.maxDepth=1) or a specific section (parentId=...)?snapshot_layout(...).Get the layout of the top-level frames to see where empty space might be. See 1-top-level.json.
Get the layout structure of a specific frame to understand its children's positioning. See 2-specific-frame.json.
Check for layout issues (like clipped content) deep within a specific section. See 3-layout-problems.json.
English keywords: snapshot layout, layout analysis, node hierarchy, structure check, bounds check, layout problems
Chinese keywords (中文关键词): 布局快照, 布局分析, 节点层级, 结构检查, 边界检查, 布局问题
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。