Onlook
onlook.com/
Onlook is a free, local-first visual editor for React apps that lets designers drag, rearrange, and restyle a live application's UI while the underlying code (Next.js, Vite, shadcn/ui, Storybook) stays the source of truth, rather than exporting a separate design file. The homepage demonstrates this through a running mock product called "Villainterest" — a Pinterest parody with copy like "evil DMs" and "lair location sharing" — used throughout as the worked example instead of generic dummy text. It cites 25.8k GitHub stars and carries endorsements attributed to a Google Chrome advocate, a Microsoft designer, and a Coinbase designer rather than typical enterprise-logo social proof.
- Category
- Design & Creative
- Style
- DarkMinimal
- Stack
- Next.jsTailwind CSS
- Fonts
- InterJetBrains Mono
- Palette
- Meta title
- Onlook — Cursor for Designers
- Sections
- 4
- Updated
Onlook's landing page, section by section
Each section below is cropped straight from Onlook's live page — useful references for design & creative landing page design.
Onlook design review: how the homepage is built
Onlook's 9,652-pixel desktop page stays nearly black from hero through footer, using soft grey type and rounded interface frames rather than bright panels. The opening combines a thin sans-serif line with a white handwritten treatment for “Designers”, then drops a large product canvas underneath. Inter and JetBrains Mono are listed in the capture metadata, echoed by restrained UI labels and code-like tabs. Its narrative moves from a working editor into a capabilities catalogue, testimonial cards, FAQs, and a quiet illustrated footer.
Hero and working canvas
The centered fold reads “Cursor for Designers” and follows it with “Onlook is where teams design together — directly in their real codebase”. “Book a Demo” is the dark outlined choice beside a white “Sign Up” button. The hero capture is not decorative: it shows layers at left, a selected image grid in the middle, and a Chat/Code rail on the right. A cookie banner crosses the screenshot, making the product view feel like a live browser session.
Design and code capabilities
“AI • Code • Design” splits across a compact heading before the script-style word “Design” completes “Side-by-side-by-side”. Alternating screenshots and captions introduce “Direct editing”, “Components”, “Revision history”, “AI Chat”, “Brand compliance”, and “Layers”. Each feature gets a small pictogram and blank space around its image. One chat card shows a request to design an inventory tracker, while a color picker and layers panel make the product claims materially visible.
Scope and community proof
After the deliberately oversized “...and so much more”, six terse capability blocks form a three-column list: “Import your codebase”, “Collaborate with your team”, “Publish your work”, “Draw-in Layers”, “All your favorite hotkeys”, and “Use Images and media assets”. A rounded dark support card immediately follows, centering “Supported by you & 26,525 other builders” over a contribution button and a scatter of circular avatars. The next section changes from interface imagery to a masonry-like field of small, person-attributed testimonial cards.
FAQ and footer
“Tens of thousands of builders love Onlook” sits beside the testimonials before the page cuts to “Frequently asked questions”. The desktop FAQ is a right-hand accordion list with plus signs, while “Read our FAQs” is isolated at left. “Bring your team to Onlook today” restores a single “Sign Up” action. The footer keeps Company, Product, Works with, and Follow the Odyssey as four short link groups, then fades into a large line-drawn globe carrying the ONLOOK wordmark.
On mobile
At 390 pixels, the hero preserves its centered hierarchy but crops the product canvas at both sides, turning the interface into a close-up of Chat/Code. “Book a Demo” and “Sign Up” stay paired rather than becoming full-width. The capabilities become a narrow two-column cadence. Testimonials stack as individual cards; FAQ questions become one-per-row lines; and footer link groups condense to a two-column grid above the faint globe illustration.
Worth borrowing
- A live product canvas can carry visual proof before any feature list begins.
- Alternating small UI specimens prevent a long dark page from becoming a single uninterrupted surface.
- A subdued illustrated footer can extend a product identity without competing with the final action.
