Cards in group
This card focuses on the conceptual process of requesting undo functionality via prompt and AI integration within a Paint web app context. It does not cover manual coding of undo features, alternative UI designs, or undo implementations for other app types.
Learn how to effectively instruct an AI to integrate undo functionality into a Paint web app through a clear prompt, and understand the AI’s interpretation and execution process.
Steps
- Identify the desired feature enhancement—in this case, an undo button.
- Craft a clear, concise natural language prompt, e.g., 'Add an undo button that reverses the last drawing action.'
- Submit the prompt to the AI-powered coding assistant (e.g., Codeex with GPT 5.5).
- The AI parses the prompt to understand that undo behavior involves tracking user actions and reverting the last change on demand.
- AI modifies the source code to implement an undo stack or command history to store drawing actions.
- AI updates the UI to include an undo button, linking it to the new undo logic.
- The AI produces an updated version of the Paint app incorporating undo functionality.
- User tests the new app version to confirm the undo feature behaves as expected.
Materials: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Undo_and_Redo, https://martinwolf.org/undo-redo/, https://openai.com/blog/chatgpt-plugin-code-execution, Example GitHub repositories of Paint apps with undo functionality
15 minDifficulty: intermediateDomains: Software Development, Human-Computer Interaction, AI-Driven Development
This card covers the process of prompting AI to add a save-as-PNG feature, including example prompt phrasing and AI code modification strategies. It does not cover underlying canvas drawing techniques, advanced image processing beyond PNG export, or multi-format exports other than PNG.
Learners will understand how to craft effective prompts that instruct an AI agent to add functionality enabling saving drawings as PNG files in a Paint web app, and how the AI updates the code and UI accordingly.
Steps
- Understand the feature requirement: adding a 'Save as PNG' option to the Paint app.
- Formulate a clear and concise prompt to the AI, e.g., 'Include an option to save drawings as PNG files, adding a save button that exports the current drawing as a downloadable PNG image.'
- Submit the prompt to the AI agent integrated with Codeex and GPT 5.5.
- Observe the AI analyzing the existing source code to identify where to add UI elements and export logic.
- AI modifies the source code to add a save button and implements the logic to convert the canvas drawing to a PNG data URL and trigger a download.
- Review the updated web app UI for the new save button and test saving drawings as PNG.
- Iterate on the prompt if necessary to refine functionality or UI placement.
Materials: Example prompt: 'Include an option to save drawings as PNG files, adding a save button that exports the current drawing as a downloadable PNG image.', Codeex documentation on canvas export methods., Browser APIs for canvas image data extraction and file downloading., Sample GitHub repo of a simple Paint app with save functionality added.
20 minDifficulty: intermediateDomains: software development, human-computer interaction, artificial intelligence, web applications
This card covers only UI refinements through text prompts for a Paint web app, specifically focusing on elements like color pickers. It does not cover backend changes, new feature implementation unrelated to UI, or performance optimization.
Learners will be able to effectively communicate UI improvement ideas to an AI agent using text prompts and understand how the AI translates these instructions into code and design changes to refine a Paint web app's interface.
Steps
- 1. Understand the current UI component (e.g., the color picker) and identify what aspect you want to improve (e.g., visibility, size, placement).
- 2. Craft a clear and concise prompt specifying the desired UI enhancement, for example, 'Make the color picker more prominent.'
- 3. Submit the prompt to the AI agent (GPT 5.5 with Codeex) integrated with the Paint web app project.
- 4. Review the AI-generated code changes and UI updates reflecting the prompt instructions.
- 5. Test the updated app version to ensure the UI improvements meet expectations.
- 6. Iterate by providing further refined prompts if needed for additional UI enhancements.
Materials: Reference implementation of a simple Paint web app source code., Access to GPT 5.5 with Codeex integration for AI-driven code editing., Example prompts and resulting UI changes for color picker prominence improvements.
20 minDifficulty: beginnerDomains: human-computer interaction, ui/ux design, prompt engineering, software development
This card covers the iterative workflow of submitting text prompts to AI for app feature enhancements, receiving updated source code, and conducting local tests. It does not cover the technical internals of AI code generation models or deep programming concepts beyond the prompt-driven development cycle.
Understand the seamless end-to-end process of improving app features through natural language prompts, AI code generation, and local testing, enabling rapid and accessible software iteration even without coding skills.
Steps
- Define the next app feature or improvement you want by writing a clear natural language prompt.
- Submit the prompt to an AI code generation agent (e.g., using GPT 5.5 with Codeex) configured to understand your project's codebase.
- Receive the updated source code and any UI adjustments synthesized from your prompt.
- Download or access the revised app version and run it locally or in a sandbox environment.
- Test the new or improved feature, checking functionality and user experience.
- Identify any further modifications or refinements needed and write a new prompt based on testing feedback.
- Repeat the cycle iteratively, progressively enhancing the app through prompt refinement and AI updates.
- Leverage the speed and accessibility of this workflow to innovate without requiring traditional coding expertise.
Materials: Example prompts illustrating feature requests., Sample updated code snippets generated by AI after prompt submissions., Guides on setting up a local environment for testing web apps., Resources on effective prompt writing techniques for AI code generation tools.
25 minDifficulty: beginnerDomains: software development, human-computer interaction, AI-assisted programming