# Rapid Prototyping

> Hızlı prototipleme, MVP geliştirme ve farklı tasarım aslına uygunluk seviyelerinde doğru aracı seçme stratejileri.

- Skill: `gktuoktay/rapid-prototyping` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gktuoktay/rapid-prototyping`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gktuoktay/rapid-prototyping/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: GktuOktay (https://skillmd.com/u/gktuoktay)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gktuoktay/rapid-prototyping

---


# Rapid Prototyping and MVP Development

Prototyping is the process of creating a preliminary model of an application to validate concepts, flows, and technical feasibility before committing to full-scale development.

## 1. Choosing the Right Fidelity

Prototypes range from low to high fidelity. Choosing the right level is essential for efficiency.

| Fidelity Level | Format | Purpose | Speed | Tools |
| :--- | :--- | :--- | :--- | :--- |
| **Low (Lo-Fi)** | Paper Sketches, Whiteboard | Brainstorming, defining core layout, early validation of user flows. | Very Fast | Pen & Paper, Excalidraw, Balsamiq |
| **Medium (Mid-Fi)** | Wireframes, Clickable Screens | Defining structure, navigation, and content hierarchy without visual distraction. | Fast | Figma, Sketch, Whimsical |
| **High (Hi-Fi)** | Interactive Mockups | Finalizing visual design (colors, typography), micro-interactions, realistic user testing. | Slow | Figma, Framer, Protopie |
| **Coded (Code-Fi)** | Functional MVP (HTML/CSS/JS) | Validating technical feasibility, testing with real data, actual user interaction on devices. | Very Slow | CodeSandbox, Vercel, HTML/CSS, Tailwind |

## 2. Tool Selection

- **Figma**: The industry standard for Mid-Fi and Hi-Fi prototyping. Excellent for collaboration, creating clickable flows, and sharing with stakeholders.
- **Code-based Prototyping**: Tools like Framer (which bridges design and code) or jumping straight into React/Tailwind. Best when interactions are too complex for Figma or when you intend to iterate the prototype directly into production.
- **No-Code/Low-Code**: Tools like Webflow, Bubble, or Retool. Excellent for functional MVPs without requiring a full engineering team.

## 3. Speed vs. Quality Tradeoffs

A prototype is a disposable artifact used for learning, not a production application.
- **Accept Technical Debt**: Hardcode data, skip error handling, ignore edge cases.
- **Fake It 'Til You Make It**: Use "Wizard of Oz" techniques (humans manually doing tasks behind the scenes) instead of building complex backend logic.
- **Focus on the Core Loop**: Only build the features necessary to test the specific hypothesis.

## 4. Prototype Scope Definition

Before building, clearly define the scope:
1. **Hypothesis**: What are we trying to learn? (e.g., "Will users understand how to use the new filtering system?")
2. **Audience**: Who will test this?
3. **Tasks**: What specific actions do we want users to attempt?
4. **Metrics**: How will we measure success? (Task completion rate, time on task, qualitative feedback).

## 5. User Testing with Prototypes

- **Recruit Representative Users**: Test with people who match your target demographic.
- **Task-Based Testing**: Give users specific scenarios ("Find a red shirt in size medium and add it to your cart") rather than asking "What do you think of this design?"
- **Think Aloud Protocol**: Ask users to vocalize their thoughts, confusion, and expectations as they interact with the prototype.
- **Do Not Defend the Design**: If a user struggles, it is a flaw in the design, not the user. Observe and learn.

## 6. Iterating Based on Feedback

- **Synthesize Data**: Look for patterns in user struggles. If 3 out of 5 users fail to find the checkout button, it needs redesigning.
- **Rapid Iteration**: Make changes immediately between testing sessions if a critical flaw is discovered.
- **Kill Darlings**: Be prepared to throw away designs that test poorly, regardless of how much time was spent on them.

## 7. Converting Prototype to Production Code

- **Never Use Prototype Code Directly**: If you built a code prototype fast and dirty, do not deploy it to production. Rewrite it with proper architecture, testing, and security.
- **Design Handoff**: Use Figma's Dev Mode or Zeplin to extract CSS values, assets, and spacing.
- **Component Driven**: Identify repeating UI patterns in the prototype and build them as reusable React/Vue components in the production codebase.