Learning Timeline
Key Insights
Limits of 'One-Shot' Prompting
While the latest models are powerful, complex apps rarely work 100% perfectly with just a single prompt (one-shot). Expect minor errors in links or selection logic that will require follow-up instructions.
Visual Tips: Light vs Dark Mode
Always check both visual modes. Sometimes elements that look great in 'Light Mode' might need extra contrast adjustments to look professional in 'Dark Mode'.
Prompts
AI Tool Comparison Website Generation
Target:
ChatGPT Canvas
Create a website that compares top AI tools like we have on Futuripedia. Specific details: use rounded cards for each tool, include a dark/light mode toggle, and implement filtering options. Ensure the layout is clean and follows modern UI/UX standards.
Step by Step
Building a Web App Using GPT Canvas
- Open ChatGPT and ensure you are using the latest model that supports 'Canvas mode' (such as GPT-4o or an available 5.x model).
- Enter a highly detailed prompt in the chat box, specifying the app's primary function (e.g., an AI tool comparison site like Futuripedia).
- Specify particular UI requirements in the prompt, including the use of 'rounded cards' and a 'dark/light mode toggle'.
- Press 'Enter' and let ChatGPT generate the code, which will automatically appear in the Canvas window on the right side of the screen.
- Once the code is generated, view the live preview of the application directly within Canvas.
- Test the 'Light Mode' and 'Dark Mode' functionality by clicking the built-in toggle button.
- Test the interactivity by trying out the 'filtering' feature on the displayed tools list.
- Verify every link and selection element, such as 'Claude vs ChatGPT' comparisons, to ensure they work correctly.
- Identify any errors or bugs (such as broken links) to provide feedback for the iteration process.
