get_shared_page_elements Architecture
Retrieve the catalog of shared UI components discovered across all scanned pages
Overview
Part of the Architecture Toolkit. After pages are compared, DoneDone.Run automatically analyzes each page's HTML and screenshots to identify reusable UI components — headers, footers, navigation menus, sidebars, widgets, call-to-action banners, and more. This tool returns the full catalog of shared elements for a clone job, each with its type, description, page count, code pattern, and cropped screenshot.
How It Works
- During page comparison, an AI analyzes each page's rendered HTML and full-page screenshot to detect shared UI components.
- New elements are cataloged with bounding-box coordinates; existing elements are matched and their page associations grow.
- After all pages finish comparing, a deduplication sweep merges any elements that were cataloged separately but represent the same component.
- This tool returns the final deduplicated catalog with every element's type, description, code pattern, screenshot URLs, and the list of pages each element appears on.
Input Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
job_id |
string |
required | The clone job ID returned by discover_all_pages |
type_filter |
string |
optional | Filter by element type (e.g. header, footer, navigation, sidebar, hero, call_to_action, card, widget, search_bar, banner) |
What You Get Back
- Element type and label (e.g. 'navigation — Main Site Navigation')
- Plain-English description of the element's purpose and appearance
- Generalized code pattern with placeholders for dynamic content
- Page count — how many pages this element appears on
- List of pages where the element was detected (page ID + source URL)
- Cropped screenshot URL — just the element isolated from the page
- Bounded screenshot URL — full page with the element highlighted
Example Use Case
Before building a clone site, an agent calls get_shared_page_elements to learn that the site has a sticky top navigation on 16 of 19 pages, a footer with an email signup on 9 pages, and a sidebar with search, archives, and recent posts widgets on 7 blog pages. The agent uses this blueprint to build shared layout components first, then drops page-specific content into them.