Create a personalized coding helper that writes code, explains it, and improves it using smart AI prompt chains.
Free account with either AI tool. We'll use both to compare their strengths in different parts of our workflow.
Any text editor or code editor like VS Code, Notepad++, or even your browser's notepad to save your prompts and code.
First, we'll create a smart prompt that generates clean, working code from your descriptions. This prompt will be the foundation of your coding assistant, so we'll make it detailed and specific.
You are a senior web developer who writes clean, well-structured code. When I describe a project or feature, you will: 1. Generate complete, working HTML, CSS, and JavaScript code 2. Use modern best practices and semantic HTML 3. Include helpful comments explaining key parts 4. Make the code responsive and accessible 5. Use a clean, professional visual design After generating the code, always end your response with: "CHAIN_NEXT: Please explain this code" My first request: Create a simple calculator with buttons for numbers 0-9, basic operations (+, -, *, /), equals, and clear. Style it to look modern and clean.
What to look for: The AI should generate a complete calculator with HTML structure, CSS styling, and JavaScript functionality. Most importantly, it should end with the "CHAIN_NEXT" instruction, which signals the next step in our workflow.
Now we'll create a follow-up prompt that takes the generated code and explains it in plain English. This helps you learn from every piece of code your assistant creates.
You are a patient coding teacher. Looking at the code above, please explain: 1. **What this code does** - A simple overview in 1-2 sentences 2. **How the HTML works** - Explain the structure and key elements 3. **How the CSS works** - Explain the styling choices and layout 4. **How the JavaScript works** - Walk through the logic step by step 5. **Key concepts used** - List 3-4 programming concepts a beginner should understand Use simple language and avoid jargon. End your response with: "CHAIN_NEXT: Please review this code for improvements" Explain the code in the previous message.
What to look for: You should get a clear, beginner-friendly explanation that breaks down each part of the code. The explanation should make sense even if you're new to coding, and it should end with the next chain instruction.
The final piece of our chain is a code reviewer that looks for improvements, bugs, and best practices. This ensures your generated code is production-ready.
You are an experienced code reviewer. Please review the original code (not the explanation) and provide: **STRENGTHS:** What's done well in this code **IMPROVEMENTS:** Specific suggestions to make it better, including: - Performance optimizations - Accessibility improvements - Code organization - Error handling - Security considerations **PRIORITY FIXES:** The top 2-3 most important changes **IMPROVED CODE:** If there are significant improvements, provide the updated code Be constructive and specific. Focus on practical improvements that make real difference. Review the calculator code from earlier in this conversation.
What to look for: The AI should provide specific, actionable feedback about the code's strengths and weaknesses. Look for suggestions about accessibility, error handling, and code organization. If the suggestions are good, you might even get improved code to use.
Now let's test how well your assistant handles natural conversation. We'll ask for modifications using casual language to see if our prompts work with real-world requests.
Hey, I like the calculator but can you make a few changes? I want it to look more like a phone calculator - you know, with the dark theme and rounded buttons. Also, can you add a history feature that shows the last few calculations? Oh, and one more thing - make the display bigger so it's easier to read the numbers. Thanks!
What to look for: Your AI assistant should understand this casual request and generate updated code. It should maintain the professional code quality from your first prompt while adapting to the conversational tone. The response should still include the "CHAIN_NEXT" instruction if you want to continue the workflow.
Finally, let's package everything into a reusable system. Create a document with all your prompts so you can use this coding assistant workflow for any future project.
Create a new document called "My AI Coding Assistant" and save these three sections: **GENERATOR PROMPT:** [Paste your Step 1 prompt here] **EXPLAINER PROMPT:** [Paste your Step 2 prompt here] **REVIEWER PROMPT:** [Paste your Step 3 prompt here] **HOW TO USE:** 1. Start a new conversation with your AI 2. Use the Generator prompt with your project description 3. Copy/paste the Explainer prompt to understand the code 4. Copy/paste the Reviewer prompt to improve the code 5. Ask for changes using natural conversation 6. Repeat steps 2-4 for each major change **NOTES:** - Works best with specific project descriptions - Can handle casual conversation after the initial prompts - Each step builds on the previous one - Save good code examples for future reference
What to look for: You're creating your own prompt library that you can reuse for any coding project. This document becomes your personal AI coding assistant toolkit. Test it with a completely different project (like a to-do list or image gallery) to make sure it works consistently.
This happens sometimes with longer responses. Just remind the AI: "Please end your response with the chain instruction as specified." The prompt chains work best when each step knows what comes next.
Add "Explain like I'm completely new to coding" to your explainer prompt. Some AIs default to technical language, so being explicit about the audience level helps get clearer explanations.
Ask for specific examples: "Show me exactly what code to change, don't just tell me about it." The best code reviews include concrete suggestions, not just general advice.
Start fresh if the conversation becomes confusing. Long conversations can sometimes lose context. Your saved prompt workflow lets you restart cleanly anytime.
How to create connected prompts that work together, with each step feeding into the next for complex workflows.
Writing prompts that generate clean, working code with proper structure, comments, and modern best practices.
Mixing structured prompts with casual conversation to create AI tools that feel natural and flexible to use.
Creating reusable prompt libraries and systems that you can apply to future projects and share with others.
Create a fourth prompt that generates test cases for your code. This completes the full development cycle: generate, explain, review, test.
Adapt your prompts for Python, React, or other technologies. Change "HTML, CSS, JavaScript" to your preferred stack in the generator prompt.
Create specialized versions for mobile apps, data analysis, or game development. Each domain has different best practices and requirements.
Try the same prompts with Claude and ChatGPT to see which works better for different types of coding tasks. Some excel at frontend, others at logic.