用途
pencil-mcp-snapshot-layout 是一个用于获取页面布局结构快照的技能，设计目的是调用 Pencil MCP 工具 snapshot_layout。当需要理解当前页面的类 DOM 树结构，以便为后续布局调整做准备时，适合使用该技能。
主要能力
该技能通过调用 snapshot_layout 工具获取布局结构。如果客户端对 MCP 工具做了命名空间处理，该工具可能显示为 mcp__pencil__snapshot_layout。返回结果为带有布局信息（边界、约束）的树结构，可用于：
- 理解 Pencil 中节点的层级和布局关系。
- 在计划移动或对齐元素时获取其当前边界。
- 检查内容裁剪或元素重叠等布局问题。
使用方式
调用时机（重要）：即使触发了某个触发短语，也必须先确认用户意图——用户是否明确要求使用 “Pencil”，或当前对话上下文是否明确围绕 “Pencil” 设计任务。如果答案为否，则不应使用该技能（例如 “分析布局” 可能指 HTML/CSS 布局分析）。该技能仅在用户明确提到 “Pencil” 时使用。
应在以下情况使用：
- 需要理解 Pencil 中节点的层级和布局关系；
- 计划移动或对齐元素，并需要这些元素的当前边界；
- 需要检查内容裁剪或元素重叠等 “问题”；
- 用户要求对 Pencil 设计执行 “分析布局” 或 “检查结构”。
触发短语包括：
- “Pencil snapshot layout”（Pencil 布局快照）
- “Analyze Pencil page structure”（分析 Pencil 页面结构）
- “Check Pencil layout problems”（检查 Pencil 布局问题）
- “Get Pencil node hierarchy”（获取 Pencil 节点层级）
输入参数：
- filePath（字符串，可选）：用于访问特定 .pen 文件的路径，默认为当前活动文档。
- maxDepth（整数，可选）：限制在节点树中向下深入的层级。建议始终指定一个合理的限制（例如 2 或 3）以避免上下文溢出。0 表示只返回顶层节点。
- parentId（字符串，可选）：只返回该节点子树的布局。
- problemsOnly（布尔值，可选）：设为 true 时只返回存在布局问题（例如被父节点裁剪）的节点。默认为 false。
使用步骤：
- 确定范围：你需要整个页面（maxDepth=1）还是特定区域（parentId=...）？
- 调用工具：snapshot_layout(...)。
- 分析输出：结果是一个带有布局信息（边界、约束）的树结构。
示例：
- 简单：顶层快照——获取顶层框架的布局，查看空白区域可能所在位置。参见 1-top-level.json。
- 中等：特定框架布局——获取特定框架的布局结构，了解其子元素的定位。参见 2-specific-frame.json。
- 复杂：布局问题——检查特定区域深层是否存在布局问题（如内容被裁剪）。参见 3-layout-problems.json。
关键词：
英文关键词：snapshot layout、layout analysis、node hierarchy、structure check、bounds check、layout problems
中文关键词：布局快照、布局分析、节点层级、结构检查、边界检查、布局问题
适用场景
适用于在 Pencil 设计环境中进行布局相关工作的场景，例如分析页面结构、检查节点层级与布局关系、在调整布局前了解元素边界，以及排查内容裁剪或元素重叠等问题。
限制
该技能仅在用户明确提到 “Pencil”，或当前对话上下文明确围绕 “Pencil” 设计任务时使用；否则不使用。参数的最大深度等具体取值建议来自资料说明，用于避免上下文溢出。其他未在资料中提供的功能、收费、价格、平台或效果信息暂未提供。
分类
category: design