START HERE · Roundups
5 Website Design Examples to Study Before Your Next AI Build
Study Clay, Airtable, AdAnt, Aardvark, and Dennis Snellenberg: five different ways to make a website distinctive, with specific lessons to adapt.
Read the articleTHE SWIPEFILE BLOG
RSS feed ↗Good taste, explained.
Design breakdowns, practical guides, and fewer “make it pop” prompts.
More to read
Roundups3 Ecommerce Design References for Discovery and Product Selection
Study product grids and detail pages from Next.js Commerce and Medusa, with practical lessons for imagery, variants, comparison, and purchase controls.
Roundups3 Input-First Landing Pages That Make the First Step Clear
Compare Sivi, Notify.domains, and Repaint to design a useful opening around a prompt, a domain, or an existing website URL.
Roundups3 Login and Sign-Up Page Examples With Clear Entry Paths
Compare Notion, Resend, and Stripe captures for sign-in hierarchy, provider choices, registration context, and the states an authentication flow needs.
Roundups3 Newsletter Landing Page Examples With a Clear Reason to Subscribe
Study Justin Welsh, Kieran Drew, and David Perell for newsletter positioning, sample content, and a subscription form that fits the publication.
Roundups3 Portfolio Website Examples: Let the Work Shape the Layout
Compare Brittany Chiang, Dann Petty, and Jessica Hische to choose a portfolio structure for experience, visual range, or detailed creative work.
Roundups3 SaaS Hero Examples That Make the Product Easier to Understand
Study Webflow, Airtable, and RightFont to choose between an output gallery, a workflow preview, and a focused interface image for your SaaS homepage.
Roundups3 Search and Filter UI Examples for Different Kinds of Results
Compare Open Library, Tabler job listings, and Wikimedia Commons to design result metadata, filters, and recovery from an over-narrow search.
Roundups3 Status Page Examples: Show What Is Happening and When
Study Resend, Linear, and Tabler captures for service summaries, component history, incident context, and the difference between current state and past data.
Roundups3 Website Hero Image Strategies: Product World, Human Context, and Atmosphere
Compare Clay, Shopify, and Skala to choose hero imagery that explains a product, connects it to real work, or establishes a distinctive setting.
Roundups4 App UI Patterns Worth Studying: Dashboards, Boards, Timelines, and Canvases
Compare OpenPanel, Tabler, FullCalendar, and ChartDB to choose an app layout around the task: monitoring, moving work, scheduling, or mapping relationships.
Roundups4 Landing Page Examples: What to Borrow From Long Sales Pages
Explore four course sales pages for offer structure, curriculum, product previews, and proof placement. Learn what to adapt without inventing results.
GuidesCart and Checkout Design: Keep the Order Clear at Every Step
Study Medusa cart and address captures to connect product choices, quantity editing, order summaries, checkout steps, and useful form feedback.
GuidesData Table Design: Make Dense Information Easier to Compare
Use Tabler table, task-list, and log references to choose useful columns, distinguish actions, support long content, and plan narrow-screen behavior.
GuidesEmpty, Loading, and Error States: Design What Happens Between Screens
Use empty-cart references to distinguish first use, no results, loading, failure, and success, with practical guidance for recovery and status feedback.
GuidesHow to Design Account Settings That People Can Understand
Use Tabler settings references to organize account sections, explain save behavior, separate personal and workspace settings, and handle plan changes clearly.
GuidesHow to Review an AI-Built Website Against Your Design References
Turn vague design feedback into a focused review: compare hierarchy, evidence, density, actions, and responsive behavior against a small reference set.
GuidesHow to Turn a Mood Board Into an AI Design Brief
Build a focused reference board, explain what each example contributes, and hand a concrete design brief to your preferred AI coding or design tool.
GuidesTypography and Spacing for AI Websites: A Practical Checklist
Make an AI-built website easier to read with a clear type hierarchy, consistent spacing, real content, readable contrast, and responsive checks.
GuidesWebsite Navigation Design: Give Every Link a Clear Job
Learn how to separate global navigation, local sections, and actions using references from Brian Lovin, Tabler settings, and Next.js Commerce.