SuperDuper UI

How to use AI with our clones effectively: 1. Identify the pattern you need ("checkout flow like Shop") 2. Export or reference the relevant screens 3. Feed to AI with specific instructions 4. Review and refine the output 5. Customise for your context The key: specificity. "Design a checkout" = generic output "Design a checkout following these specific patterns" = output worth building on superduperui.com/ai

The Cash App clone (102 screens) proves that simple can be powerful. Cash App does less than other finance apps. That's the point. Send money. Receive money. Invest a bit. Get a card. No feature bloat. No overwhelming dashboards. No 47-screen onboarding. Constraint is a design decision. Sometimes the best thing you can do is say no to features. Study Cash App when you need permission to keep things simple.

Airbnb desktop clone: 154 screens. Different from mobile because context changes: → More screen real estate → Mouse/keyboard navigation → Multi-window workflows → Detailed comparison views → Longer session times The same app, different design decisions. We offer both iOS and web versions because responsive isn't enough. Desktop-specific patterns matter.

Designer confession: I used to think using references was cheating. Every project had to start from a blank canvas. Original. Pure. I wasted years. Every architect studies buildings. Every writer reads. Every musician listens. Designers who study design aren't cheating. They're doing what every creative discipline does. The blank canvas myth costs time. Let it go.

The Threads clone (138 screens) shows Meta's take on social. Interesting study because it's both: → Following established patterns (familiar social feed UX) → Differentiating from competitors (simpler than Twitter, different from Instagram) Watching how a new app from a major company balances familiarity and differentiation teaches you about strategic design decisions. Not just "how does this look" but "why these choices."

Every clone includes what generic UI kits skip: → Empty states (what does "no results" look like?) → Error states (what happens when things break?) → Loading states (what shows while waiting?) → Edge cases (what if content is too long?) → Permission states (what if the user says no?) These screens take time to design well. They're also where real apps succeed or fail. We don't skip the hard parts.

The Perplexity clone (271 screens) shows how to design for AI-first products. Different from ChatGPT's approach: → Citation-heavy design → Source transparency → Search-centric UI → Knowledge graphs → Follow-up suggestions Two companies solving similar problems with different UX philosophies. Studying both teaches you that there's rarely one "right" answer. Context determines which approach works. superduperui.com/ai

Controversial: junior designers should spend more time studying and less time inventing. Not forever. But early career? Learn the rules before you break them. Study navigation patterns until you can draw them from memory. Study form design until you know why each element exists. Study error states until edge cases become obvious. Creativity comes from having a foundation to push against. Our clones are that foundation. 3,700+ screens of what "good" looks like.

The UberEats clone (204 screens) covers every state of food delivery: → Restaurant discovery and search → Menu browsing and customisation → Cart management (more complex than you'd think) → Checkout and payment → Order tracking in real-time → Delivery updates → Rating and feedback If you're building marketplace or delivery apps, this is the benchmark. UberEats handles millions of orders. Their patterns work under pressure.

Hot take: The best design portfolios show judgment, not just execution. Anyone can show pretty screens. Showing WHY you made decisions? That's rare. "I referenced Airbnb's booking flow because..." "I adapted Revolut's verification pattern because..." "I studied how Netflix handles discovery because..." Demonstrating that you study, analyse, and adapt from the best signals maturity. Great designers have sources. Own yours.

How agencies use our clones: 1. Client brief comes in ("we need an app like Revolut but for X") 2. Open relevant clone immediately 3. Walk client through existing patterns 4. Discuss what to keep, what to change 5. Start designing with a shared visual vocabulary Clients get involved faster. Alignment happens earlier. Revisions drop because expectations are set correctly from day one. References aren't just for designers. They're communication tools.

The Headspace clone (193 screens) is a masterclass in calming UX. Opposite energy from most apps: → Deliberate whitespace → Soft colour palettes → Gentle transitions → Minimal cognitive load → Progress without pressure Not every app should feel calm. But understanding how to create that feeling expands your design vocabulary. Sometimes the best UX means slowing down, not speeding up.

Updated website. Updated Airbnb clone. What's next? We're working on: → Filter by pattern → Component-level purchasing (buy just what you need) → More frequent updates as apps evolve → More desktop clones We read every request. The clones you ask for influence what we build next. What apps would make your work easier? Reply or DM.

Real scenario from last month: Founder needed to pitch investors. No budget for a designer. They grabbed our Shop clone, rebranded it in an afternoon, and presented a realistic prototype. Investors didn't know the difference between that and weeks of custom design work. The pitch succeeded. Sometimes "good enough, fast" beats "perfect, eventually."

The fintech trust hierarchy (from studying Revolut, Wise, Cash App, PayPal, and Coinbase): 1. Security indicators everywhere Locks. Shields. Verification badges. Constant reassurance. 2. Transaction confirmation patterns Multiple steps. Clear amounts. Explicit approval. 3. Error prevention over error handling Stop mistakes before they happen. 4. Progressive disclosure Reveal complexity only when needed. 5. Instant feedback Every action acknowledged immediately. Building in finance? These patterns aren't optional. They're table stakes.

The ChatGPT clone (171 screens) is fascinating because OpenAI had to invent patterns from scratch. No one had designed conversational AI interfaces at this scale before. How do you show AI "thinking"? How do you handle streaming text? How do you display code blocks in chat? How do you manage conversation history? They figured it out. Now you can study exactly how. Watching pattern invention teaches you how to approach genuinely novel problems.

Honest question for designers: How much of your "design time" is actually design? Not recreating patterns you've built before. Not hunting for references. Not setting up the same component structure for the 47th time. Actual, creative, problem-solving design work. For most designers, it's less than 30%. The rest is overhead. Necessary, but not why you became a designer. We built SuperDuperUI to shift that ratio.

Gmail has 239 screens. 239 solutions to one of the hardest UX problems: making email manageable. Threads. Labels. Search. Filters. Attachments. Priority inbox. Snooze. Archive. Spam. Drafts. Google has spent 20 years refining these patterns. Billions of users trained on them. If you're building anything with messaging, notifications, or content organisation, Gmail is required studying. Not to copy. To understand why their decisions work at scale.

Prediction: AI won't replace designers. But designers with good references will replace designers without them. AI amplifies what you feed it. Feed it vague prompts and hope for the best? Get generic, mediocre output. Feed it specific, high-quality patterns with clear direction? Get output that actually works. The designers who curate excellent reference libraries will generate better AI output faster. The skill is shifting from "build everything from scratch" to "direct AI with precision." Your reference library is now a competitive advantage.

What AI integration actually means for design workflow. Old workflow: 1. Get requirements 2. Research patterns (hours of browsing) 3. Sketch concepts 4. Build in Figma New workflow: 1. Get requirements 2. Feed AI high-quality references 3. Generate starting point 4. Refine and customise The quality of step 2 determines the quality of step 3. Garbage references = garbage output. Production-quality references = production-quality starting points. superduperui.com/ai