Section 1 of 1
Hands-on Lab: Stitch AI
Generate UI Design from PRD
Learning Objectives
After this session, students will be able to:
🪄
Use Stitch AI to generate UI
Generate UI drafts from text input and preferences.
📄
Convert PRD into design
Turn a simple PRD into a clearer prompt and UI outcome.
💬
Write effective prompts
Add context, constraints, and goals to improve results.
🔁
Compare design variations
Evaluate multiple outputs and choose the best fit.
Review Your Product
Make sure each group has:
1
Product name
Agree on a clear, short product name.
2
Target users
Who is the product for?
3
Main features
List the most important features.
4
Platform (Mobile/Web)
Decide where the UI will live.
Students discuss briefly in groups.
Create Simple PRD
Use this PRD structure:
🏷️
Product Name — What is the product called?
👥
Target Users — Who will use it?
🎯
Problem Statement — What problem does it solve?
🧩
Key Features — What must the product do?
📱
Platform — Mobile or Web?
🎨
Design Style (optional) — Modern, minimal, playful, etc.
Students write PRD based on their product.
Login to Stitch AI
Steps:
1
Open Stitch AI website
Go to the Stitch AI page in your browser.
2
Click Sign in
Find the sign-in button from the landing or header.
3
Login with Google
Use your Google account to authenticate.
4
Access dashboard
You should land on the Stitch AI dashboard.
Input PRD
Steps
1
Copy your PRD
Use the simple PRD format from the previous slide.
2
Paste into prompt field
Paste PRD first, then add one instruction line.
3
Add additional instructions
Specify platform + style + key components.
Set Design Preferences
Students configure:
🎨
Color style
Choose an overall color direction (bright, muted, monochrome).
✨
Design style
Clean, modern, playful, minimal—pick one clearly.
📱
Platform
Match your PRD: Mobile or Web layout patterns.
🧩
Layout complexity
Simple vs complex layout based on time and scope.
Set Agent and Variations
Configure:
1
Design agent
Choose the agent option provided by Stitch AI.
2
Number of variations (2–3)
Generate multiple options for comparison.
3
Screen flow
Specify whether it's one screen or a small flow.
4
UI complexity
Keep it realistic for a lab session.
Generate Design
Steps:
1
Click Generate
Start the generation process.
2
Wait for results
Let Stitch AI render the variations.
3
Compare variations
Look for the closest match to your PRD.
4
Choose best design
Pick the strongest variation to continue.
Evaluate UI Result
Students evaluate:
📌
Match with PRD — Does the UI reflect the features and goals?
🎨
Color consistency — Are colors cohesive across the screen?
🧭
Navigation structure — Is the flow clear and predictable?
👀
UI readability — Is the text and hierarchy readable?
✅
Feature completeness — Are key features represented in the layout?
Iterate Prompt
If result is not suitable:
🧠
Add more detail
Clarify users, goals, and constraints.
🛠️
Adjust features
Prioritize must-have components and remove noise.
🎛️
Change style
Update style keywords to shift the look and feel.
🔄
Generate again
Run another iteration and compare improvement.
Document Result
Students:
🧷
Export design to Figma
Export the selected design to Figma (not a screenshot).
⭐
Save best variation
Keep the chosen version as your main reference output.
📄
Save prompt used
Store the exact prompt text so it can be repeated and improved.
Example folder naming pattern (e.g.,
Group-01) as a small callout.
Group Discussion
Each group:
1
Show design result
Present the selected output.
2
Explain prompt
Share what you wrote and why.
3
Compare variations
Discuss differences and trade-offs.
Conclusion
Wrap-up for today (easy to read from the back of the room).
✅
Lab output
What you must submit
✓
A simple PRD for your product
✓
The prompt you used (copy text)
✓
2–3 UI variations generated
✓
1 best variation selected + exported to Figma
Next practice
Add one constraint: components / layout / accessibility.