Learning Timeline
Key Insights
The Visual Identity of AI Code
If you notice 'Classic Blue' and 'Purple' color gradients in a generated app, it's usually a sign that the application was built with AI assistance, giving off that signature 'AI-coded vibe'.
Iterative Prompting Technique
Avoid trying to include every feature in a single prompt if it's too complex. Start with the core functionality (MVP), then ask the AI to add new features incrementally—like the 'Templates' tab—for more stable and reliable results.
Prompts
Basic UI Builder Prompt
Target:
Kimi K2.5
Build a drag and drop UI builder like Figma. Include snap to grid and alignment guides. Include an export option to HTML.
Template Expansion Prompt
Target:
Kimi K2.5
Add some pre-built templates including a login form, dashboard, pricing cards, and a landing hero page. Add a new 'Templates' tab to access these.
Step by Step
Building a UI Builder with Kimi K2.5
- Open the Kimi K2.5 AI tool and prepare the prompt input area.
- Enter the main prompt to build the core 'drag and drop' UI builder structure, supporting 'snap to grid' and 'alignment guides' functionality.
- Wait for the AI to generate the code and application preview. Test the 'drag' functionality on basic elements like 'Image', 'Input', 'Card', and 'Circle'.
- Use the generated 'Export' to HTML function to ensure the code can be used outside the platform.
- Use iterative prompting to add 'pre-built templates' and enhance the app's functionality.
- Click on the newly added 'Templates' tab in the app's top navigation bar.
- Select a specific template like 'Login Form', 'Dashboard', 'Pricing Cards', or 'Landing Hero Page' to automatically load the design.
- Click the 'Download code' button to download the source files and open them in 'Full Screen' to view the final result.
