Use this prompt with AI to generate your collaboration story page.
BAD (Generic):
“The AI helped me build a website. It was useful. We worked together and made a good site.”
GOOD (Specific):
“Sprint 2, iteration 3: I showed AI a screenshot of my nav next to iOS 7 reference. Spacing was wrong (1rem vs 2rem), blue wasn’t vibrant enough (#5DADE2 vs #3498DB). After specifying exact measurements, we nailed it. Taught me AI needs visual proof + metrics, not feelings.”
I need you to write a thoughtful, honest reflection on our collaboration
building this [STYLE NAME] design gallery. This should be written from your
perspective as the AI partner.
Include:
1. **Initial Vision**
- What I first described
- Your understanding of the style requirements
- Early challenges interpreting my vision
2. **Research Phase**
- How we explored the style together
- What references were most helpful
- Key characteristics we identified
3. **Build Process**
- Sprint 1 (Foundation): What worked, what didn't
- Sprint 2 (Components): Iterations and improvements
- Sprint 3 (Polish): Final refinements
4. **Challenges & Solutions**
- Moments when I gave unclear direction
- Times you misunderstood the style
- How we course-corrected together
- What made the collaboration effective
5. **Evolution**
- How the design changed through iterations
- Key decisions that improved authenticity
- What we learned about [STYLE NAME]
6. **Reflection**
- What made this partnership work
- Your observations about human-AI design collaboration
- What future students should know
Be specific. Reference actual moments from our chats. Be honest about
struggles and missteps. Make it readable and engaging, not corporate-speak.
Length: 500-700 words
Tone: Professional but personal, honest, reflective
Write the HTML page with:
- Clean, readable typography
- Process screenshots embedded (I'll add these)
- Proper structure (header, sections, conclusion)
- Style consistent with the main site
Insert screenshots showing:
Check that it includes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collaboration Story | [Style Name] Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav><!-- Your nav --></nav>
<h1>Collaboration Story</h1>
<p class="subtitle">A reflection on human-AI design partnership</p>
</header>
<main>
<section class="story">
<h2>Initial Vision</h2>
<p>[AI writes about your first description...]</p>
<img src="images/early-mockup.jpg" alt="Early design mockup">
</section>
<section class="story">
<h2>Research Phase</h2>
<p>[AI writes about exploring the style...]</p>
<img src="images/references.jpg" alt="Reference images we used">
</section>
<section class="story">
<h2>Build Process</h2>
<h3>Sprint 1: Foundation</h3>
<p>[AI describes foundation work...]</p>
<div class="comparison">
<img src="images/sprint1-before.jpg" alt="Before">
<img src="images/sprint1-after.jpg" alt="After">
</div>
<h3>Sprint 2: Components</h3>
<p>[AI describes component work...]</p>
<h3>Sprint 3: Polish</h3>
<p>[AI describes final refinements...]</p>
</section>
<section class="story">
<h2>Challenges & Solutions</h2>
<p>[AI describes specific problems and how we solved them...]</p>
</section>
<section class="story">
<h2>Evolution</h2>
<p>[AI describes how design evolved through iterations...]</p>
<img src="images/evolution.jpg" alt="Design evolution timeline">
</section>
<section class="story">
<h2>Reflection</h2>
<p>[AI reflects on the partnership and lessons learned...]</p>
</section>
<section class="metrics">
<h2>Project Metrics</h2>
<ul>
<li>Total time: [X] hours</li>
<li>Iterations: [X] rounds</li>
<li>Lighthouse Performance: [X]</li>
<li>Lighthouse Accessibility: [X]</li>
<li>Pages completed: [X]</li>
</ul>
</section>
</main>
<footer>
<!-- Your footer -->
</footer>
</body>
</html>
Be specific about:
Include challenges like:
Show evolution:
Time needed: 30 minutes (AI generates, you refine and add screenshots)
Result: Authentic reflection on your partnership and process ✨