Back to Details

analyze-and-plan

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Analyze & Plan

分析与规划

Analyze what you're building and define clear acceptance criteria before writing code. This skill provides task-specific analysis guidance for different types of AEM development work.
在编写代码之前，先分析要构建的内容并定义清晰的验收标准。本技能针对不同类型的AEM开发工作提供任务专属的分析指导。

When to Use This Skill

何时使用本技能

Invoked by: content-driven-development skill (Step 2)
Use this skill to:
  • Analyze visual designs/mockups (if provided)
  • Understand requirements for the task
  • Define what success looks like
  • Document analysis for reference throughout development
调用方： content-driven-development技能（步骤2）
使用本技能来：
  • 分析视觉设计/原型图（若提供）
  • 理解任务需求
  • 定义成功的标准
  • 记录分析内容，以便在整个开发过程中参考

Workflow

工作流程

Follow these steps in order:
按以下顺序执行步骤：

Step 1: Visual Analysis (if provided)

步骤1：视觉分析（若提供相关材料）

Skip if: No screenshots, design files, or reference URLs provided
If visual materials provided:
See 
resources/visual-analysis.md
for complete visual analysis guidance covering:
  • Visual elements - Layout, typography, colors, spacing, borders, shadows, effects, icons, imagery
  • Interactive elements - Components, states (hover/focus/active), animations, transitions
  • Dynamic UI patterns - Modals, tooltips, dropdowns, accordions, carousels
  • Content structure - Hierarchy, repeating patterns, content types
  • Responsive behavior - Mobile, tablet, desktop variations
  • Systematic mapping - Page vs component, existing patterns, block model classification
What to do:
  1. Gather all visual materials (screenshots, designs, URLs)
  2. Use visual-analysis.md guide to systematically analyze
  3. Document findings using the provided template
  4. Extract key requirements for next steps
Output: Visual requirements documented for use in next steps
跳过条件： 未提供截图、设计文件或参考URL
若提供视觉材料：
请查看
resources/visual-analysis.md
获取完整的视觉分析指导，涵盖：
  • 视觉元素 - 布局、排版、颜色、间距、边框、阴影、效果、图标、图像
  • 交互元素 - 组件、状态（悬停/聚焦/激活）、动画、过渡效果
  • 动态UI模式 - 模态框、提示框、下拉菜单、折叠面板、轮播图
  • 内容结构 - 层级、重复模式、内容类型
  • 响应式表现 - 移动端、平板端、桌面端的差异
  • 系统映射 - 页面与组件的对应关系、现有模式、块模型分类
操作步骤：
  1. 收集所有视觉材料（截图、设计稿、URL）
  2. 依据visual-analysis.md指南进行系统性分析
  3. 使用提供的模板记录分析结果
  4. 提取关键需求用于后续步骤
输出： 记录好的视觉需求，供后续步骤使用

Step 2: Understand Requirements

步骤2：理解需求

What to do:
  • Think about what you are building/fixing/modifying?
  • Consider why this is needed?
  • What's the context surrounding these changes?
  • Consider all viewports (mobile, tablet, desktop)
  • Think about the author experience and how that impacts what we do
Ask the user questions if needed:
  • Clarify unclear requirements
  • Understand edge cases
  • Confirm assumptions
  • Get missing information
Use task-specific guidance:
  • See "Task-Specific Analysis Guidance" section below
  • Apply appropriate guidance based on task type
Output: A clear understanding of all requirements
操作步骤：
  • 思考要构建/修复/修改的内容是什么？
  • 考虑为什么需要这些改动？
  • 这些改动的背景是什么？
  • 考虑所有视口（移动端、平板端、桌面端）
  • 思考作者体验及其对工作的影响
必要时向用户提问：
  • 澄清不明确的需求
  • 了解边缘情况
  • 确认假设
  • 获取缺失的信息
使用任务专属指导：
  • 查看下方“任务专属分析指导”部分
  • 根据任务类型应用相应的指导
输出： 对所有需求的清晰理解

Step 3: Define Acceptance Criteria

步骤3：定义验收标准

What to define:
  • What does "done" look like?
  • How will you validate success?
  • What should NOT break (regressions)?
Include:
  • Visual match (if designs provided)
  • Functional requirements
  • Responsive behavior
  • Author experience
  • Performance considerations
Use task-specific guidance:
  • See acceptance criteria guidelines in "Task-Specific Analysis Guidance" below
Output: Specific, testable acceptance criteria
需要定义的内容：
  • “完成”的标准是什么？
  • 如何验证成功？
  • 哪些内容不应被破坏（回归问题）？
包含项：
  • 视觉匹配度（若提供设计稿）
  • 功能需求
  • 响应式表现
  • 作者体验
  • 性能考量
使用任务专属指导：
  • 查看下方“任务专属分析指导”中的验收标准指南
输出： 具体的、可测试的验收标准

Step 4: Document Analysis

步骤4：记录分析内容

Create markdown file at: 
drafts/tmp/{block-name}-analysis.md
  • Use the block name being worked on (e.g., 
    drafts/tmp/hero-analysis.md
    )
  • For non-block work, use descriptive name (e.g., 
    drafts/tmp/navigation-fix-analysis.md
    )
File should include:
  • Task description and context
  • Visual analysis (if applicable)
  • Requirements identified
  • Acceptance criteria defined
  • Any open questions or assumptions
Notes:
  • This is a working artifact, not committed to git
  • Used for reference throughout development (especially in Step 7: Final Validation)
  • Allows multiple analyses to coexist in drafts/tmp/
Output: Analysis file at 
drafts/tmp/{block-name}-analysis.md
在以下路径创建Markdown文件： 
drafts/tmp/{block-name}-analysis.md
  • 使用当前开发的块名称（例如：
    drafts/tmp/hero-analysis.md
    ）
  • 对于非块类工作，使用描述性名称（例如：
    drafts/tmp/navigation-fix-analysis.md
    ）
文件应包含：
  • 任务描述与背景
  • 视觉分析结果（若适用）
  • 识别出的需求
  • 定义的验收标准
  • 任何未解决的问题或假设
注意事项：
  • 这是一个工作 artifacts，无需提交到git
  • 用于整个开发过程中的参考（尤其是步骤7：最终验证）
  • 允许多个分析文件共存于drafts/tmp/目录中
输出： 位于
drafts/tmp/{block-name}-analysis.md
的分析文件

Task-Specific Analysis Guidance

任务专属分析指导

Building a new block

构建新块

Must analyze:
  • Author inputs (list what content authors will provide: e.g., "image, title, description, link")
    • What's required vs optional?
    • What can be inferred or auto-generated?
  • What variations do we need to support?
  • Styling and layout expectations
  • Interactive behavior requirements
  • Responsive behavior across viewports
DON'T design at this stage:
  • ❌ Table structure (how many columns/rows)
  • ❌ Cell layout (which content goes in which cell)
  • ❌ Block variant classes or naming
  • ❌ Exact authoring format or field names
  • ❌ Authoring experience or ease-of-use (always the goal, addressed in Step 3)
Note: At this stage, focus on WHAT content is needed, not HOW it's structured. Detailed content model design (table structure, cells, variants, authoring UX) happens in the content-modeling skill (CDD Step 3).
Acceptance criteria should cover:
  • Styling and layout match requirements across viewports
  • All variations work
  • Interactive behavior functions as expected
必须分析：
  • 作者输入内容（列出内容作者将提供的内容：例如“图片、标题、描述、链接”）
    • 哪些是必填项，哪些是可选项？
    • 哪些内容可以推断或自动生成？
  • 需要支持哪些变体？
  • 样式与布局预期
  • 交互行为需求
  • 不同视口下的响应式表现
本阶段无需设计：
  • ❌ 表格结构（多少列/行）
  • ❌ 单元格布局（哪些内容放入哪个单元格）
  • ❌ 块变体类或命名
  • ❌ 具体的编辑格式或字段名称
  • ❌ 编辑体验或易用性（始终作为目标，将在步骤3中处理）
注意： 本阶段重点关注需要什么内容，而非内容如何结构化。详细的内容模型设计（表格结构、单元格、变体、编辑UX）将在content-modeling技能（CDD步骤3）中进行。
验收标准应涵盖：
  • 不同视口下的样式与布局符合需求
  • 所有变体均可正常工作
  • 交互行为符合预期

Adding a Variant to an Existing Block

为现有块添加变体

Must analyze:
  • What does the variant do?
  • How does author enable it? (class name? content marker?)
  • Style-only (CSS) or behavior change (JS)?
  • Styling/layout changes for variant
  • Responsive considerations
Acceptance criteria should cover:
  • Variant styling/layout matches requirements across viewports
  • Variant applies correctly when specified
  • Existing variants/default behavior continue to function as is
必须分析：
  • 变体的功能是什么？
  • 作者如何启用它？（类名？内容标记？）
  • 仅样式变更（CSS）还是行为变更（JS）？
  • 变体的样式/布局变更
  • 响应式考量
验收标准应涵盖：
  • 不同视口下的变体样式/布局符合需求
  • 指定变体时可正确应用
  • 现有变体/默认行为保持正常运行

Modify Existing Block Behavior

修改现有块的行为

Must analyze:
  • What behavior is changing and why?
  • Any impact to existing content using this block?
  • Content/authoring implications of the change (what content needs to be updated and how)?
  • JS and/or CSS changes needed?
  • Responsive implications?
Acceptance criteria should cover:
  • New behavior works as expected
  • Existing functionality is not broken (regression check)
  • Works across viewports
  • Existing content still works
必须分析：
  • 哪些行为将发生变更，原因是什么？
  • 对使用该块的现有内容有何影响？
  • 变更对内容/编辑的影响（需要更新哪些内容，如何更新？）
  • 是否需要修改JS和/或CSS？
  • 响应式影响？
验收标准应涵盖：
  • 新行为符合预期
  • 现有功能未被破坏（回归检查）
  • 在所有视口下均可正常工作
  • 现有内容仍可正常使用

CSS-Only Styling Change

仅CSS样式变更

Must analyze:
  • What's changing visually
  • Which viewports are affected
  • Layout implications
Acceptance criteria should cover:
  • Styling/layout changes match requirements across viewports
  • No layout breaks
  • No regressions
必须分析：
  • 视觉上有哪些变更
  • 哪些视口会受到影响
  • 布局影响
验收标准应涵盖：
  • 不同视口下的样式/布局变更符合需求
  • 无布局崩溃问题
  • 无回归问题

Bug Fix

缺陷修复

Must analyze:
  • What is the bug?
  • What should happen instead?
  • Root cause (if not obvious)
Acceptance criteria should cover:
  • Bug no longer occurs
  • No regressions (existing behavior unchanged)
  • Works across viewports, if relevant
必须分析：
  • 缺陷是什么？
  • 预期的正确表现是什么？
  • 根本原因（若不明显）
验收标准应涵盖：
  • 缺陷不再出现
  • 无回归问题（现有行为未改变）
  • 若相关，在所有视口下均可正常工作

Success Criteria

成功标准

  • ✅ Task type identified (new block, variant, modification, etc.)
  • ✅ Requirements analyzed using appropriate guidance
  • ✅ Acceptance criteria defined
  • ✅ Analysis documented to markdown file
  • ✅ Visual analysis completed (if applicable)
  • ✅ 已识别任务类型（新块、变体、修改等）
  • ✅ 已使用相应指导分析需求
  • ✅ 已定义验收标准
  • ✅ 已将分析内容记录为Markdown文件
  • ✅ 已完成视觉分析（若适用）

Output

输出

This skill provides:
  • ✅ Clear understanding of what to build
  • ✅ Documented requirements
  • ✅ Specific acceptance criteria for validation
  • ✅ Analysis notes file for reference
Next step: Return to CDD Step 2 with documented analysis and acceptance criteria
本技能提供：
  • ✅ 清晰理解要构建的内容
  • ✅ 已记录的需求
  • ✅ 用于验证的具体验收标准
  • ✅ 供参考的分析笔记文件
下一步： 将已记录的分析结果和验收标准返回至CDD步骤2

Resources

资源

  • Visual Analysis: 
    resources/visual-analysis.md
    - Comprehensive guide for analyzing screenshots, design files, and existing URLs. Includes systematic analysis techniques, documentation templates, and implementation mapping.
  • 视觉分析： 
    resources/visual-analysis.md
    - 分析截图、设计文件和现有URL的综合指南。包含系统性分析技巧、文档模板和实现映射。