The AI Automators demonstrates how visual references can steer Claude beyond generic website layouts. Brewery and coffee landing-page examples combine selected ideas from existing sites, including scroll interactions, video sections and typography. The method specifies which details to borrow as inspiration and which effects to avoid.
Design galleries such as Awwwards, SiteInspire and Lapa Ninja provide starting points for layouts and motion. A full-page screenshot captures overall structure, while smaller screenshots isolate individual components. For animation, several before-and-after images plus a written description communicate transitions more clearly than a single still.
Mobbin and Refero offer references from deployed applications and user flows. The tutorial reports that a Refero design.md file alone did not reproduce the intended appearance well, because it did not fully convey imagery or movement. Combining the file with screenshots supplies richer context, while React component libraries provide more specific implementation references.
Typography examples, deliberate color palettes and documented brand rules help maintain a consistent style. The tutorial recommends collecting those decisions into a reusable design system that can guide later artifacts. Broader image collections and design-resource directories can supply additional ideas when curated website galleries are too narrow.
Watch on YouTube
