Welcome, creator! 🚀 In this multi-stage workshop, we are going to use the C.R.A.F.T. framework (Context, Role, Action, Format, Target) to design a new product or service.
Use the tabs below to move through the design sprint. Your inputs in earlier steps will update the prompts in later steps! 🚀
Step 1: Who are we building for? 🧑🤝🧑
First, we need to identify our users. We want niche, interesting characters to make our product truly personal to them.
Context: We are preparing for a product design sprint to create a new product.
Role: Act as a Senior User Researcher and Creative Strategist.
Action: Create 4 detailed, unique user personas. They should be niche and specific.
Format: Output in this exact format, in markdown code block, with no preamble or conclusion:
- [Persona name]:
> Age: [age]
> Occupation: [occupation]
> Niche Interest: [interest]
> Pain Point: [specific challenge]
Target: Create personas with this level of detail and specificity.
👇 Your Action: Run the prompt above and paste the raw output below. A dropdown will be generated so you can select your favourite persona!
Step 2: Solving the Problem 💡
Now that we have our persona, let's brainstorm how technology can solve their specific needs.
Context: We are brainstorming feature sets for a new product.
Role: Act as a Senior Product Analyst and Technologist.
Action: Create 10 innovative solution ideas that address the specific needs of the target persona.
Format: Output ONLY in this exact format, in markdown code block, with NO preamble, introduction, or conclusion:
- [Idea name]:
> Description: [brief description]
Target: The persona is: [Select Persona from Step 1]
👇 Your Action: Run the prompt above and paste the raw output below.
⚠️ Could not parse the output format. The ideas will still be passed to the next step as plain text.
Step 3: Prioritisation 📊
We can't build everything! Let's rank these ideas to find the "Goldilocks" feature—high value, reasonable effort.
Context: We need to prioritise our product roadmap.
Role: Act as a Lead Product Manager.
Action: Rank the previous 10 ideas from easiest to hardest in terms of effort (0-100), and lowest to highest value (0-100). Provide a brief justification for the ranking.
Format: Output ONLY in this exact format, in markdown code block, with NO preamble, introduction, or conclusion:
- Smart Task Orchestrator:
> Effort Score: 45
> Value Score: 85
> Justification: Moderate effort due to algorithm complexity, high value for saving time
- [Next idea name]:
> Effort Score: [0-100]
> Value Score: [0-100]
> Justification: [brief justification]
Target: The list of ideas generated previously.
👇 Your Action: Run the prompt above and paste the raw output below. Then select your "Winning Solution" from the dropdown!
Step 4: The Crazy 8s Race 🏃💨
Grab a piece of paper! Fold it 3 times to make 8 boxes. You have 5 minutes to sketch 8 interaction ideas for your Winning Solution.
While you draw, let's race the AI to see what concepts it comes up with.
Context: We are in the ideation phase, looking for visual inspiration.
Role: Act as an expert UI/UX Designer and AI Artist.
Action: Create an image prompt description for a "Crazy 8s" moodboard. Each of the 8 sections should show a unique user interface interaction method for the solution.
Format: A detailed image generation prompt description.
Target: The solution is: [Select Solution from Step 3]
Optional: If you have access to an image generator (like Midjourney or Firefly), paste the output of the prompt above into it!
Step 5: Define Requirements 📋
Before we build, let's lock in what we're actually making. A clear requirements document ensures the prototype solves the right problem for the right person.
Context: We are defining the product requirements before building a prototype.
Role: Act as a Senior Product Manager.
Action: Write a concise product requirements document for the winning solution.
Format: Output ONLY in this exact format, in a markdown code block, with NO preamble or conclusion:
Problem Statement: [one sentence]
User Stories:
- As a [persona description], I want to [action] so that [benefit]
- As a [persona description], I want to [action] so that [benefit]
- As a [persona description], I want to [action] so that [benefit]
Acceptance Criteria (top story):
- [ ] [criterion]
- [ ] [criterion]
- [ ] [criterion]
Out of Scope:
- [item]
- [item]
Target:
Persona: [Select Persona from Step 1]
Solution: [Select Solution from Step 3]
👇 Your Action: Run the prompt above, then paste and refine the output below. This becomes your product brief!
Step 6: Make it Real 📸
Take a photo of your favourite sketch from your Crazy 8s paper (or select the best concept). We are going to upload this to a prototyping tool (like Figma Make, Gemini, or Vercel v0).
Context: Turning a low-fidelity sketch into a high-fidelity UI.
Role: Act as a Senior Frontend Developer.
Action: Make the UI match the attached image, but apply the correct functionality for the specific solution and persona.
Format: Functional React/HTML code (or UI design depending on tool).
Target:
This is an app to solve: [Select Solution from Step 3]
This is intended for: [Select Persona from Step 1]
You have 30 seconds to pitch this idea. Let's craft a compelling elevator pitch.
Context: We are presenting to the board of directors.
Role: Act as a Master Storyteller and Chief Product Officer.
Action: Write a 30-second elevator pitch that takes the stakeholders on a journey of discovery, highlighting the user's pain and the "magic" of our new solution.
Format: A speech script with stage directions for visuals.
Target:
Persona: [Select Persona from Step 1]
Solution: [Select Solution from Step 3]
🎉 Congratulations! You've gone from a blank slate to a pitched prototype using the C.R.A.F.T. framework!