getMockupAnalysisInstructions
Fetch the current page structure for a given URL to compare with a mockup and generate experience modifications.
Instructions
Extract detailed page structure to prepare for mockup comparison and experience generation.
MOCKUP-TO-EXPERIENCE WORKFLOW: This tool is the FIRST STEP when a user provides a mockup/screenshot and wants to create an experience.
Workflow:
User provides: mockup screenshot + target URL
LLM calls THIS TOOL with the URL to get current page structure
LLM analyzes mockup image (using vision) vs current page data
LLM identifies differences (layout, colors, text, positioning, etc.)
LLM generates ES5 modification code following ALL Adobe Target coding rules
LLM shows user the proposed changes for approval
LLM calls createActivityFromModifications to deploy
IMPORTANT INSTRUCTIONS FOR LLM: When user provides a mockup/screenshot:
Ask user: "What's the URL of the page this mockup is for?"
Ask user: "Do you have any links or image assets that need to be used in this experience?"
If user provides links/images: Use the exact URLs provided
If user says "no" or doesn't provide assets: Use placeholder links (e.g., "https://example.com/image.jpg" or "#")
Call THIS TOOL with the URL
Analyze the mockup screenshot carefully:
Identify visual differences from current page
Note layout changes, color changes, text changes, new elements
Look for CSS properties: colors, fonts, spacing, positioning
Identify which elements need modification (use specific selectors)
Generate modification code that:
Follows ALL Adobe Target code generation rules (ES5 only, at- prefix, etc.)
Uses specific selectors (IDs, data attributes, NOT broad classes)
Waits for elements to exist before modifying
Is well-commented explaining each change
Show user the generated code and explain the changes
After approval, call createActivityFromModifications
KEY ANALYSIS POINTS:
Compare mockup colors vs current page colors
Compare mockup text vs current page text
Compare mockup layout/positioning vs current page
Identify new elements in mockup that need to be created
Identify hidden elements that need to be shown/hidden
Note font changes, size changes, spacing changes
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | URL of the page to analyze | |
| focusArea | No | Optional: Specific section to focus on (e.g., "hero section", "navigation", "footer"). If not provided, analyzes entire page. |