Detail Editing

Overview

Detail editing is an iterative optimization process, enabling you to make granular adjustments to AI-generated applications through a visual interface. With detail editing, you can refine initial application prototypes into complete products that meet practical requirements.

Main editing scopes including:

• 🎨 Interface Optimization: Precisely adjust layout, color, font, and other visual elements to enhance user experience.
• 🔧 Feature Enhancement: Add or modify specific feature details to enhance application usability.
• 📱 Interaction Improvement: Optimize user operation flow and interaction experience to improve usability.
• 🔗 Data Binding: Configure the data sources and event handling logic for components.

Editing Access Point

Detail Editing provides multiple convenient access points:

• Dialog Box Editing: Click the "Edit" button within the dialog box
• Component Selection: In the preview area, click the icon to select a component for editing.

Editing Methods

AI Builder provides two complementary editing methods, allowing you to flexibly choose based on your needs.

AI Dialogue Editing

In the input field below the selected component, enter your requirements to modify it. Builder will make the changes based on your description.

tip

Note: AI Dialogue Editing supports event binding and changing data sources. If you only need to modify styles, using manual editing will be more accurate and efficient.

For example, after selecting the button, change the event, for instance:

Add a click event that pops up an alert box when clicked.

Builder will add a click event based on your description, which will pop up an alert box when clicked.

Manual Editing Mode

In Manual Editing Mode, you can directly make edits in the style input field on the dialog box without the need to enter natural language descriptions.

Depending on the component, the editable style properties are as follows:

Property Type	Property Name	Description
Spacing Property	padding	Padding setting
Spacing Property	margin	Margin setting
Color Property	color	Text color
Color Property	background	Background color/ image
Font Property	font-size	Font size
Font Property	font-weight	Font weight
Border Property	border-radius	Border radius setting
Advanced Settings	Arbitrary tailwind class names	Custom styles
Content Property	Filler text	Static text content
Image Resource	Image URL	Image URL, for img tag only

Best Practices

✅ Recommended Practices

1. Progressive Optimization: First improve the core features, then optimize the details.
2. Maintain Consistency: Unified design style and interaction patterns.
3. Timely Preview: Preview the effect promptly after each modification.
4. Track Changes: Record significant modifications to facilitate rollback.

❌ Practices to Avoid

1. Over-Engineering: Avoid unnecessary complex effects.
2. Inconsistency: Using different styles for similar elements.
3. Frequent Major Changes: Avoid overhaul-style modifications.

Frequently Asked Questions

Q: How to undo the modifications if the modified result is unsatisfactory?

A: You can use the rollback feature to re-describe the desired effect and let the AI regenerate it.

Q: Can I add custom CSS styles?

A: Custom styles can be added via the Style Editor or through advanced customization in Dev Mode.

Next Steps

After completing detailed editing, if more advanced code customization is needed, you can enter Dev Mode.

🛠️ Go to Dev Mode Code Editing →

Alternatively, if satisfied with the current result, you can directly proceed to resource release:

🚀 Start Resource Release →