Visual Edits

Click on any component, then describe your design change in plain English.

AI-Powered Visual Editing

Transform your applications with natural language. Simply select any component and describe the changes you want in plain English. Astrio’s AI instantly understands and implements your design vision.

How It Works

1. Select Component

   Click on any element in your application - buttons, text, images, layouts

2. Describe Change

   Tell Astrio what you want: “Make this button blue” or “Add a shadow effect”

3. See Results

   Watch as your changes appear instantly in real-time

4. Refine

   Continue iterating with additional natural language commands

Visual Editing Features

Natural Language

Describe changes in plain English - no technical knowledge required

Real-Time Updates

See changes instantly as you make them

Undo/Redo

Easily revert changes with full history tracking

Smart Suggestions

Get AI-powered design recommendations

What You Can Edit

Styling and Appearance

Transform the look and feel of any component:

Natural Language Examples:
- "Make this button larger and round"
- "Change the background to a gradient from blue to purple"
- "Add a subtle drop shadow to this card"
- "Make the text bold and center-aligned"
- "Use a darker color scheme"

Layout and Positioning

Adjust layouts without understanding CSS:

Layout Commands:
- "Move this sidebar to the right side"
- "Make these cards display in a 3-column grid"
- "Add more spacing between these elements"
- "Stack these items vertically on mobile"
- "Center this content on the page"

Content and Text

Update content dynamically:

Content Changes:
- "Change this heading to 'Welcome to Our Store'"
- "Add a subtitle below this title"
- "Make this paragraph shorter and more concise"
- "Add a call-to-action button here"
- "Insert a contact form below this text"

Interactive Elements

Enhance user interactions:

Interaction Improvements:
- "Add a hover effect to this button"
- "Make this image clickable"
- "Add animation when this appears"
- "Create a dropdown menu here"
- "Add a loading spinner to this button"

Advanced Visual Editing

Component Libraries

Choose from pre-built components and customize them:

UI Components

Buttons, inputs, cards, navigation bars

Layout Components

Grids, flexboxes, containers, sections

Data Components

Tables, lists, charts, dashboards

Media Components

Images, videos, galleries, carousels

Form Components

Inputs, selectors, validation, submission

Navigation

Menus, breadcrumbs, pagination, tabs

Design Systems

Maintain consistency across your application:

• Color Palettes - Define and apply consistent color schemes
• Typography - Set font families, sizes, and weights
• Spacing - Standardize margins, padding, and gaps
• Border Radius - Consistent corner radius across components
• Shadows - Unified shadow styles for depth and elevation

Responsive Design

Ensure your app looks great on all devices:

Responsive Commands:
- "Hide this on mobile devices"
- "Stack these columns on tablets"
- "Make this text smaller on phones"
- "Show a hamburger menu on mobile"
- "Adjust this layout for desktop screens"

AI Design Intelligence

Smart Design Suggestions

Astrio’s AI analyzes your design and suggests improvements:

• Accessibility - Recommendations for better color contrast and readability
• User Experience - Suggestions for improved user flows and interactions
• Performance - Optimizations for faster loading and better performance
• Design Trends - Modern design patterns and best practices

Context-Aware Editing

The AI understands the context of your changes:

Contextual Understanding:
- "Make this more professional" → Applies appropriate styling for business apps
- "Add some fun colors" → Suggests vibrant, playful color schemes
- "Make it more minimal" → Reduces visual clutter and simplifies design
- "Add e-commerce features" → Suggests shopping cart, product cards, etc.

Collaboration in Visual Mode

Real-Time Collaboration

Multiple team members can edit visually simultaneously:

• Live cursors - See where teammates are working
• Instant updates - Changes appear for everyone in real-time
• Design comments - Add feedback directly on components
• Version history - Track all visual changes over time

Design Review Process

Streamline design approval workflows:

1. Create Design

   Build your design using visual editing

2. Share for Review

   Send a link to stakeholders for feedback

3. Collect Feedback

   Reviewers can comment directly on components

4. Implement Changes

   Apply feedback using natural language commands

Advanced Features

Animation and Transitions

Add motion to your designs:

Animation Commands:
- "Fade in this element when it appears"
- "Add a slide-in animation from the left"
- "Make this button pulse when clicked"
- "Create a smooth transition between these pages"
- "Add a loading animation to this content"

Custom Styling

For more control, combine visual editing with custom CSS:

/* Generated from "Make this button more modern" */
.modern-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
  transition: all 0.3s ease;
}

.modern-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.35);
}

Integration with Dev Mode

Seamlessly switch between visual and code editing:

• Generated code - See the code behind your visual changes
• Code synchronization - Manual code changes reflect in visual mode
• Hybrid editing - Combine both approaches for maximum flexibility

Best Practices

Design Efficiency

Maximize your productivity with visual editing:

Start Simple

Begin with basic layouts and add complexity gradually

Iterate Quickly

Make small changes and test frequently

Think Mobile-First

Design for mobile screens first, then scale up

Performance Considerations

Keep your designs optimized:

• Image optimization - Astrio automatically optimizes images you add
• CSS efficiency - Generated styles are optimized for performance
• Responsive images - Different sizes served based on device
• Lazy loading - Images load only when needed

Use descriptive language when making requests. Instead of “make it better,” try “increase the font size and add more contrast for better readability.”

Major layout changes might affect responsive behavior. Always test your changes on different screen sizes after making significant modifications.