new flexgen features (#1629)

Author: LineIndent

assets/ai_builder/features/style_dark.webp

@@ -0,0 +1,59 @@
+# AI Testing Feature
+
+## Overview
+
+The Testing feature allows you to automatically test your generated applications for common issues and functionality problems. The AI will analyze your app and identify potential bugs, broken links, navigation issues, and other problems.
+
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src=rx.color_mode_cond(
+                "/ai_builder/features/test_light.webp",
+                "/ai_builder/features/test_dark.webp",
+            ),
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+## How to Use
+
+1. **Start Testing**: Type "test this app" or similar command to activate testing mode
+2. **AI Analysis**: The AI will automatically switch to testing mode and begin analyzing your application
+3. **Review Results**: The preview tab switches to "Testing" mode to show the testing process and results
+
+## What Gets Tested
+
+The AI automatically checks for:
+
+- **Broken Navigation**: Links that don't work or lead to missing pages
+- **Non-functional Buttons**: Buttons that don't respond or trigger errors
+- **Broken Links**: External or internal links that return errors
+- **UI/UX Issues**: Interface elements that don't function as expected
+- **Data Flow Problems**: Issues with forms, inputs, and data handling
+- **Layout Issues**: Visual or structural problems with the interface
+
+## Testing Interface
+
+When testing is active:
+- The preview tab changes to "Testing" mode
+- You can see the AI interact with your application in real-time
+- Issues and results are reported as they're discovered
+- The testing process is visual and interactive
+
+## Benefits
+
+- **Quality Assurance**: Catch issues before deployment
+- **Time Saving**: Automated testing is faster than manual checking
+- **Comprehensive Coverage**: Tests multiple aspects of your application

assets/ai_builder/features/style_light.webp

@@ -0,0 +1,71 @@
+# App Style Customization
+
+## Overview
+
+The App Style feature allows you to customize the visual appearance of your AI-generated applications. You can choose from predefined design themes or create custom styling to match your brand and preferences.
+
+## How to Use
+
+1. **Access the Feature**: Click on the App Style option to open the customization panel
+2. **Choose Your Approach**:
+   - **Custom**: Manually configure individual design elements
+   - **Themes**: Select from professionally designed templates
+
+## Custom Styling Options
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src=rx.color_mode_cond(
+                "/ai_builder/features/style_light.webp",
+                "/ai_builder/features/style_dark.webp",
+            ),
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+When using Custom mode, you can adjust:
+
+- **Primary Color**: Choose your main brand color from 20+ preset options
+- **Secondary Color**: Select a complementary color for accents
+- **Typography**: Pick a font family for your app
+- **Border Radius**: Control how rounded corners appear
+- **Shadows**: Add depth with shadow effects
+- **Spacing**: Adjust the spacing between elements
+
+## Themes
+
+These options are predefined popular themes you can choose for your app. Below are some of the available themes you can choose from
+
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src=rx.color_mode_cond(
+                "/ai_builder/features/theme_light.webp",
+                "/ai_builder/features/theme_dark.webp",
+            ),
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
+
+- **Minimal Design**: Clean, geometric design with no shadows or gradients
+- **Modern UI**: Sleek, contemporary interface optimized for performance
+- **Carbon Design**: Enterprise-grade design following IBM's Carbon system
+- **Material Design**: Google's design language with elevation and semantic colors