How does an AI-assisted prototype become something a customer might actually pay for? In this walkthrough, Meng To draws on ThreeUI, Shape, and Angle to explain how he finds a need in his own work, makes a focused tool, and puts it in front of people. His companion X post shares the playbook and three starting prompts. The lesson is as much about product judgment and distribution as it is about coding.
Start with a recurring job you understand, identify the part existing tools handle badly, and build one useful workflow around it. Use AI to reach a first version quickly, then split the work into parts, compare each part with a quality reference, test it, and show it to potential users. React, Supabase, APIs, and Stripe can support the product, but none of them proves demand. This video is a product walkthrough and planning session, not a complete app built and launched from scratch on camera.
Watch Meng To's Workflow
Credit: The product examples, approach, and original prompts come from Meng To's video and X post. Meng says in that post that his businesses reached $100K MRR and Aura accounts for 20%; that is his self-reported figure, not an independently audited result. The checklists and safer prompt adaptations below are editorial additions.
Three Products, One Product-Discovery Method
| Product | What to study | What the example teaches |
|---|---|---|
| ThreeUI | A catalog of Three.js components, templates, and visual effects. | A repeated design or development task can become a reusable asset with a clear buyer and tangible output. |
| Shape | Meng revisits an earlier product and asks what a current AI-assisted build could do differently. | Old projects are a source of domain knowledge, but a remake still needs an original reason to exist today. |
| Angle | Device mockups, screen placement, 3D presentation, and creative controls. | A feature list is not yet a product; the workflow must make a designer's real output faster or better. |
Meng also points to Mobbin for interface research. A reference can clarify quality, hierarchy, or interaction, but copying a competitor's assets or composition does not create differentiation. He uses references such as Figma, Spline, and Linear as separate quality bars for editing, 3D controls, and product presentation.
The Workflow: From Observation to Product Demo
- Find the missing step in a tool you already use. Write down the job, how often it occurs, what you do around the tool, and whether other people have the same workaround. Meng suggests looking at your daily tools and even your old projects before searching for a completely new category.
- Turn notes into a brief. Meeting notes or dictated thoughts can seed a spec, but decide the buyer, one core action, the editable output, and the acceptance test before asking an agent to build everything. If you have no reachable buyer, test the problem first.
- Give each part one quality reference. Separate the editor, asset library, landing page, 3D control, and checkout into distinct jobs. Build a vertical slice rather than judging a one-shot page as a finished app.
- Use reusable skills, then inspect the work. Save a workflow that actually improves output. Have the agent run tests and capture screenshots, but do your own visual and functional review. A self-assigned score out of ten is a prompt for critique, not proof of quality.
- Show, ask, and revise. Record a short demonstration, ask potential users what they would do with it, and observe where they get stuck. A demo, a waitlist, and a payment are different levels of evidence. Publish claims that match what exists.
The chapter on Claude Code and Codex reflects Meng's personal tool choices. The repeatable practice is more portable: articulate the work, inspect the result, and correct the next pass. No single coding agent substitutes for product feedback.
When the App Needs APIs, Data, and Payments
Frontend: Meng's sample prompt names React and Vite, a sensible fast path for an interactive web prototype. The app should first perform its core job with test data; accounts, team invites, and real-time collaboration are later requirements unless users genuinely need them from day one.
AI generation: An API feature should create or transform an output the user can inspect and edit. Put provider keys in a trusted backend, not in the Vite client bundle. Supabase Edge Function secrets are one server-side option. Add input validation, usage limits, failure states, and a per-job cost budget. If the app stores private files, define retention and consent before sending them to a model.
Accounts and collaboration: Supabase Realtime can support presence, broadcasts, and database-change subscriptions. It does not automatically solve invitations or access control. Test row-level security for every exposed table and role before using customer data.
Payments: Stripe Managed Payments is a merchant-of-record option for eligible digital products, not a universal switch for every business model. Check eligibility and supported checkout flows, then use test mode. A paid entitlement must be driven by verified, retry-safe Stripe webhooks, not merely by redirecting to a thank-you page. Human approval is required before live billing.
Three Adapted Prompts for Building the App
Meng's original post contains three prompts for the product, an AI feature, and payments. These copyable versions preserve the idea while adding scope, testing, key handling, and human approval. They work with a general coding assistant; they do not require a particular model.
Build one useful vertical slice
Frame the buyer and workflow before adding a platform.
Add generation without exposing keys
Specify the output, server boundary, and failure states.
Plan a test-mode checkout
Verify eligibility, webhooks, entitlements, and approval.
Watch by Stage
| Time | Stage |
|---|---|
| 00:00 | What people can pay for |
| 00:46 | Start with your daily work |
| 04:04 | Design references with Mobbin |
| 08:25 | Rebuilding Shape |
| 13:06 | Rebuilding Angle and mockups |
| 19:50 | Break the product into parts |
| 20:54 | Meeting notes into a product brief |
| 23:40 | Dictate the app and choose a stack |
| 32:55 | Review the first build |
| 35:21 | Add AI generation |
| 37:13 | API providers and server-side keys |
| 40:59 | Stripe and webhooks |
| 43:29 | Demos, meetups, and feedback |
Find Your Own Paid-App Opportunity
A good first product does not need to resemble ThreeUI, Shape, or Angle. The transferable skill is noticing a repeated workaround in a market you can reach and proving someone will commit before you build the whole platform.
Find a buyer before the big build
Three ideas, one vertical slice, seven days of validation.
Products, References, and Setup Docs
- Creator: Meng To's full video and original X post with his prompts and self-reported business update.
- Products: ThreeUI, Shape, and Angle. Mobbin is mentioned for design research.
- Backend and access: Supabase Realtime, Edge Function secrets, and row-level security.
- Payments: Stripe Managed Payments, eligibility, and webhook setup and verification.