Design Details
Curated library of real website designs, captured and taken apart
About
Design Details is a curated library of hand-picked real websites, with full-page desktop and mobile captures, cropped sections, and motion recordings, organised by industry and section type. Every site is captured from the live web, broken into sections, and described with its typography, colours, platform, and components. Use it to compare how real teams solve the same design problem, then download a DESIGN.md brief to hand a reference to your team or an AI tool. New hand-picked sites are added daily.
Study a complete layout or compare specific sections before starting a website project, note what the best ones get right (a first screen that says plainly what the product does, real product imagery, proof before the ask, motion that explains the product), and download the DESIGN.md brief for a site or section to share with your team or use as a reference for an AI coding tool.
More in Design & Marketing
View allRepostit
Post once on TikTok and Repostit shares it to Reels, Shorts and 4 more apps, watermark-free, plus Clips to cut long videos into shorts.
Mermaid Online
Live Mermaid diagram editor with AI text-to-diagram and screenshot-to-diagram, exporting PNG, SVG and code
UI Discovery
A curated library of real product UI, with palettes, fonts and AI build prompts you can use in Claude Code and Cursor