Skip to main content

​
1. Design Editor

Design Editor transforms the entire page into an editable canvas.
Click the palette icon to enter full-page edit mode, select any element visually, and modify it directly — or use prompts to refine layout and styles.

​
What Design Editor Does

  • Converts the page into editable regions
  • Lets you click into any element to adjust spacing, structure, alignment, typography, colors, radii, shadows, etc.
  • Supports prompt-based fine-tuning for larger or cross-component changes
  • Offers Boxify to structure the page into operable groups when needed

​
Credits

  • Boxify (structuring the page into box model groups) consumes credits
  • All other edits (typography, spacing, colors, layout adjustments, radii, shadows, image replacement, etc.) are free

​
When to Use Design Editor

Use it for full-page adjustments such as:
  • Copy edits & placeholder localization
  • Fonts, sizes, weights, letter/line spacing
  • Color themes, CTA/button styles, link colors
  • Layout & grids (Flex/Grid), alignment, distribution, auto-layout
  • Spacing (padding/margin), radii, shadows, borders
  • Responsive breakpoints
  • Image/icon replacement
  • Component states（hover/active/disabled）

​
How to Access & Use

  1. Click the palette icon to enter Design Editor mode
editable icon
  1. Hover and click to select target elements
  2. Optionally enable Boxify to structure the page (Boxify consumes credits)
boxify
  1. Use side tools or the command palette to adjust typography/colors/layout/spacing
  2. For larger changes, use prompts for broader or linked updates
  3. Click Update preview to apply changes instantly to prototype & code

​
2. Select Element & Edit

Select Element & Edit is a lightweight, fast workflow for making targeted edits without entering full-page edit mode. Use it when you only want to modify one section or one component quickly.

​
What It Does

  • Lets you click a single region or component directly
  • After selecting the target area, enter your instructions (config / prompt)
  • AI applies the update immediately to the selected scope only
  • Ideal for quick adjustments without switching into Design Editor

​
When to Use Select Element & Edit

Perfect for rapid, localized updates such as:
  • Changing a hero section’s text or spacing
  • Updating a specific button, card, or form block
  • Replacing an image or icon in one component
  • Modifying styles in one area without affecting the rest of the page

​
How to Use

  1. Click Select Element & Edit
quick change
  1. Hover and choose the exact element or block you want to modify
  2. Input your desired update (e.g., spacing, copy, color, style)
  3. AI applies the change instantly to that single region

Superun Website

Visit the website to learn more features and examples.