Design Iteration Challenge
Time to push your skills! Take your One-Prompt Website and transform it from good to great through deliberate iteration.
🎯 Lesson Objectives
By the end of this lesson, you will:
- Make three significant improvements to your project
- Practice more advanced iteration techniques
- Push the boundaries of what AI can create
- Develop your eye for good design
The Challenge
🏆 Your Mission
Take your One-Prompt Website and make THREE significant improvements using only AI prompts.
Goal: Transform your good project into a GREAT project!
What Counts as "Significant"?
| ✅ Significant (counts) | ❌ Minor (doesn't count) |
|---|---|
| Adding a whole new section | Changing one word |
| Completely changing the color scheme | Making something slightly bigger |
| Adding complex interactivity | Adjusting one color |
| Redesigning the layout | Fixing a typo |
| Adding animations | Minor spacing tweak |
Iteration Ideas by Category
Category 1: Visual Enhancements
| Improvement | Example Prompt |
|---|---|
| Add shadows | "Add subtle box shadows to all cards for depth" |
| Add gradients | "Replace solid colors with elegant gradients" |
| Add animations | "Add smooth fade-in animation when page loads" |
| Add patterns | "Add a subtle geometric pattern to the background" |
| Add icons | "Add relevant icons next to each section heading" |
| Dark mode | "Create a dark mode version with toggle switch" |
Category 2: Content Additions
| Improvement | Example Prompt |
|---|---|
| New section | "Add a testimonials section with 3 quotes" |
| FAQ section | "Add an FAQ accordion below the main content" |
| Stats section | "Add a section showing key statistics with numbers" |
| Team section | "Add a team members grid with photos and names" |
| Timeline | "Add a timeline showing my journey/history" |
Category 3: Interactive Elements
| Improvement | Example Prompt |
|---|---|
| Hover effects | "Add engaging hover effects on all clickable elements" |
| Form | "Add a newsletter signup form with email validation" |
| Modal popup | "Make the Learn More button open a modal with details" |
| Accordion | "Make the FAQ section collapsible with smooth animation" |
| Scroll effects | "Add smooth scroll-to-section when clicking nav links" |
Category 4: Layout Changes
| Improvement | Example Prompt |
|---|---|
| Two-column | "Reorganize into a two-column layout for desktop" |
| Grid layout | "Display projects in a 3-column responsive grid" |
| Hero redesign | "Make the hero section full-screen with centered content" |
| Sticky header | "Make the navigation bar sticky when scrolling" |
| Card layout | "Convert list items into beautiful card components" |
Category 5: Polish & Professionalism
| Improvement | Example Prompt |
|---|---|
| Typography | "Improve typography with better font pairing and hierarchy" |
| Whitespace | "Add more strategic whitespace for breathing room" |
| Consistency | "Make all buttons, cards, and spacing consistent" |
| Mobile optimization | "Optimize every section for perfect mobile display" |
| Loading states | "Add skeleton loading states for images" |
Document Your Three Improvements
Improvement #1
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
Improvement #2
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
Improvement #3
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
Challenge Levels
Level 1: Basic
Choose 3 simple improvements:
- Change color scheme
- Add hover effects
- Improve spacing
Level 2: Intermediate
Choose 3 moderate improvements:
- Add a new content section
- Add a form with validation
- Implement dark mode toggle
Level 3: Advanced
Choose 3 complex improvements:
- Add multiple animations
- Create a tabbed interface
- Add scroll-triggered effects
Challenge Yourself!
Try to do at least Level 2 improvements. Push your boundaries!
Iteration Best Practices
✅ Do This
❌ Avoid This
Be specific in your prompts
Vague requests like 'make it better'
Ask for one major change at a time
Asking for 10 changes at once
Review carefully after each change
Rushing without reviewing
Build on what's working
Starting over unnecessarily
Save versions you like
Losing good progress
Check mobile responsiveness
Ignoring mobile view
Before & After
Document your transformation!
Take Screenshots:
- Before: Screenshot your page before improvements
- Progress: Screenshot after each improvement
- After: Screenshot your final improved version
Why Document?
- See how far you've come
- Remember what worked
- Share your journey
- Learn from the process
Bonus Challenges
If you finish early, try these:
Bonus 1: Complete Redesign
Start fresh with the same content but a completely different visual style.
Try this prompt
Bonus 2: Multiple Themes
Create ability to switch between themes.
Try this prompt
Bonus 3: Micro-interactions
Add delightful small animations.
Try this prompt
Completion Checklist
✅ Before finishing this lesson:
0/6Self-Assessment
Rate your improved project:
📝
Reflection Journal
Saved privately on your device
0 characters
0 total characters
✅ Lesson Summary
What You Practiced:
- Advanced iteration techniques
- Specific, targeted prompts
- Critical evaluation of design
- Progressive enhancement
Key Insight
Great designs aren't made in one prompt — they're refined through iteration.
Create → Review → Identify Gaps → Improve → Repeat
➡️ Next Lesson
Things don't always go smoothly. Next, we'll cover Troubleshooting Common Issues so you're prepared for any problems!