Design Editor screen examples

Alloy

Design editor where the user modifies a captured webpage using an AI prompt interface in the sidebar.

• AI Editing
• AI Chat

Lovable

Design editor where the user modifies the typography and styling of an h1 element using an inspector panel and inline AI prompts.

• AI Editing
• AI Chat

Mailchimp

Design editor where the user customizes the branding, messaging, and styles of a survey page, including background and button colors.

• Edit
• Upload & Download

Paper

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

• Edit

Durable

Design editor where the user configures typography settings like font family, size, and line height for headings and body text while previewing a dark-themed hero section.

• Edit

Typeform

Form builder interface where the user customizes the background color and image for a welcome screen via a design settings popover.

• Form
• Edit

Workflow

Design editor where a user reviews a homepage mockup, reads a thread of comments from teammates, and can approve the current version.

• Workflow Builder
• Comments

Outseta

Design editor where the user customizes the appearance of a signup form by adjusting colors, button styles, and custom CSS alongside a live preview.

• Edit
• Form

Fourthwall

Design editor where the user configures the layout, appearance, and padding of a specific image section on their store's homepage.

• Edit

Creatopy

Design editor where the user creates and previews multiple variations of an ad banner for different dimensions.

• AI Editing
• Publish

Tabular

Design editor where the user configures the layout, background, and text styles of a button block within an email template.

• Edit
• Publish

Bitly

Design editor where the user customizes the profile, theme, layout, and social links for their link-in-bio page with a live mobile preview.

• Edit
• Profile