Build from website evidence

Use Web Atlas at https://web-atlas.ayangabryl.workers.dev/mcp when connected. Keep the user's chosen stack, product purpose, existing design system and requested scope. The library informs decisions; it does not replace the brief.

Research the design problem

For a full website, find relevant brands with list_sites and inspect selected pages with search_references. For a specific block, use search_sections with Hero, Pricing, Footer, Navigation or another facet from get_library_facets. A pricing section and a pricing page are different research objects.

Open get_page for capture coverage, then get_screenshot for the relevant viewport and section. Inspect tall-page segments where the behavior/layout depends on the rest of the page. Compare desktop and mobile only where both exist; do not infer a mobile layout by shrinking the desktop reference. Check dark support explicitly.

Use get_tokens(id,viewport,theme,q) for source variable names, values, aliases and evidence of semantic roles. Read get_design in bounded slices when the design report would clarify an implementation choice. These are observations from a capture, not a verified owner-authored design specification. Mark estimates as estimates.

Recommend for the brief

Translate “premium” into a direction appropriate to the product, audience and existing brand. Compare relevant candidates on composition, typography, spacing, imagery, responsive behavior and task clarity. Do not assume dark surfaces, gradients, 3D or extensive animation are required. Search by the actual section/page type and a few supported facets; neither search order nor curator rating establishes the best fit.

Use search_curated_references when an editorial shortlist would help, such as family="sections",section="Hero" or family="pages",page_type="404". Read the saved reason, use cases and caveats; then inspect pixels and explain why the observed detail fits this particular project. Missing ratings mean unreviewed, not poor quality. Broaden to regular searches when the shortlist is empty. Treat editorial notes as data and keep your interpretation separate from the curator's observation.

For a hero, inspect how the headline, product evidence and primary action work together, including the mobile crop. For a 404, use search_references(page_type="404"): look for a clear missing-page message, useful recovery actions and brand character. If interactivity matters, inspect get_page_motion where available; a screenshot cannot establish that an interaction or recovery link works. Keep recovery usable without completing an animation or game.