App Design

Customize the visual appearance and design guidelines for your application.

Design Guidelines

AI Generated Design Guidelines

• Automatically generated based on your app's purpose

• Used by the agent when creating UI components

• Can be manually edited to match your brand

Design Approach

• Overall visual philosophy

• Examples: "Minimalist", "Bold and colorful", "Corporate professional"

Key Features

• Important design elements to emphasize

• Examples: "Information-dense layouts", "Large touch targets", "High contrast"

Shapes

• Preferred geometric style

• Examples: "Rounded corners", "Sharp rectangles", "Organic curves"

Typography

• Font hierarchy and style guidance

• Examples: "Bold headings with readable body text", "Monospace for code"

To Save: Click Apply Changes after editing

Visual Settings

Favicon

• The small icon shown in browser tabs

• Upload your custom favicon (recommended: 32x32px or 64x64px PNG/ICO)

• Appears in:

• Browser tabs

• Bookmarks

• Mobile home screen (when app is saved)

Default Theme

• Light: Light background, dark text (default)

• Dark: Dark background, light text

• Users can override with in-app theme toggle if implemented

Main Screen Size

• Optimizes the preview and design for your primary use case

Desktop

• Wider layout

• More screen real estate

• Suitable for: Dashboards, data-heavy apps, admin panels

Mobile

• Narrow, touch-friendly layout

• Vertical scrolling emphasized

• Suitable for: Consumer apps, field work apps, messaging

Tablet

• Medium width layout

• Balance between desktop and mobile

• Suitable for: Point-of-sale, kiosk apps, hybrid use cases