Learning Timeline
Key Insights
Differences in Model Interactivity Capabilities
GPT5 tends to produce code that is more interactive and customizable (such as drag-and-drop functions and dark mode) compared to Claude, which focuses more on static visual aesthetics.
Claude's Weaknesses in Complex Applications
Be careful when using Claude for web applications requiring complex logic like a Photoshop clone; it sometimes generates a beautiful UI, but the buttons and tools are non-functional.
GLM 4.5 as an Open-Source Alternative
The GLM 4.5 model shows excellent performance in managing 'layering' and 'text rendering' functions, making it a strong alternative to other paid models.
Prompts
CRM Dashboard Generation Prompt
Target:
Claude / GPT5 / GLM 4.5
Create a beautiful CRM dashboard that offers real-time insights into sales, customer engagement, and marketing campaigns. Include interactive charts and graphs such as funnel visualizations, pie charts, etc.
Graphic Software Clone Prompt
Target:
Claude / GPT5 / GLM 4.5
Create a clone of Photoshop with all the basic tools.
Step by Step
How to Generate an Interactive CRM Dashboard with AI
- Access an AI platform that aggregates various models (such as Claude and GPT) under a single subscription.
- Select your preferred AI model (e.g., Claude Opus 4.1 or GPT5) from the model list.
- Type a specific CRM dashboard prompt into the chat input field.
- Make sure to activate the 'code' button (or toggle Preview) to see the visual results of the generated code in the side window.
- Click the 'Generate' button to start the code generation process.
- Review the generated visual elements such as the 'sales funnel', 'pie charts', and 'heat map'.
- Test interactive elements like the ability to change the 'time range', the 'live' button, and the 'dark mode' toggle if you are using GPT5.
- Try rearranging dashboard components using the 'drag and reorder' function to test the level of customization in the generated code.
Building Complex Web Applications (Photoshop Clone)
- Enter a prompt to build a graphics application like Photoshop into the AI input field.
- Click 'Generate' and wait for the code to be fully generated.
- Click the 'Expand' button on the preview window to display the application in full screen.
- Test basic tool functionality by clicking on the 'Brush tool', 'Eraser', or 'Pencil'.
- Try selecting different colors and drawing on the canvas to ensure the script is working.
- Test the 'layer' management system by clicking 'Add new layer' and try to toggle the visibility of that layer.
- Use shape tools like 'Rectangle', 'Ellipse', and 'Line' to check the geometric accuracy of the code.
- Try the 'Text' function to add writing to the application canvas.
