Design screen examples

Dock

Settings page where the user customizes their workspace brand colors, button styles, and color palette with a live preview.

• Settings
• Edit

Flora

AI generation start screen where the user can enter a prompt to make anything or start from templates like product photography and fashion lookbooks.

• AI Generation
• Templates

Lovable

Community showcase detail page where a user views a specific app built with the platform, including its category breadcrumbs, view count, and a live preview.

Paper

Design editor where the user configures layout guides, inner shadows, and export settings for a selected frame.

• Design Editor
• Edit

Variant

Personal workspace home where the user browses saved boards and reads archived notes in a master-detail view.

• Browse
• Files

Orchestra

Design editor where the user builds a standard operating procedure document on a whiteboard canvas using text blocks, drawings, and connection lines.

• Design Editor
• Edit

Firecrawl

Interactive playground where the user views scraped markdown content extracted from a target URL, with options to download or copy the results.

• AI Generation
• Media Editor

UserJot

Detail page where the user reads a product update about a visual refresh, smarter search, and navigation changes.

Workflow

Detail page where a user reviews an e-commerce website design by reading and leaving numbered comments on specific areas of the canvas.

• Comments
• Media Detail

Slite

Template picker modal where the user previews a Design Engineering Doc template before creating a new document.

• Templates
• Search

Wynde

Form builder modal where the user configures test settings like language, device participation, and branding.

• Form
• Settings

Glide

Design editor where the user configures the layout and navigation of a mobile app via a central device canvas.

• Design Editor
• Empty State