Learning Timeline
Key Insights
The Power of Visual AI
AI can not only generate designs from text but is also capable of translating simple hand-drawn sketches into professional-looking user interfaces (UI).
Direct Edit Functionality
Using 'Direct Edit' is like pointing your finger at a graphic designer sitting right next to you; it allows for quick edits without needing to modify the entire original prompt structure.
Global Style Control
Any changes made within the 'Color Palette' menu are applied globally across your project, ensuring brand consistency on every page.
Prompts
Direct Edit Example
Target:
Direct Edit Tool
avocado crunchy chili toast
Step by Step
How to Stylize and Customize UI Designs with AI
- Click the '+' (Plus) button on the toolbar to add design inspiration.
- Select and upload a reference 'Screenshot' (e.g., Apple's website) or a 'Hand-drawn sketch' for the AI to rebuild.
- Click the 'Color Palette' button to access visual style settings.
- Adjust the 'Color Palette' options, 'Fonts', and edge roundness via 'Corner Radius'.
- Enter a text prompt in the provided field to request a specific design style (e.g., minimalist or corporate style) to automatically transform the entire website theme.
- Click the 'Direct Edit' button to make direct changes to specific elements.
- Select the element you want to modify (such as a text box) and type in the new content (e.g., change 'avocado toast' to 'avocado crunchy chili toast').
- Use the 'Hand' icon to pan the 'Canvas' to view other parts of the design.
- Click the 'Upload' button to upload additional images to be used as inspiration references for your application.
