๐จ Design prompt
Reference design (Dribbble): Nutrition eCommerce Website UI Design
/watch https://cdn.dribbble.com/userupload/45377024/file/221af3f259705e27783271b991713a2c.mp4/design
Prompt
I want you to rebuild a vegetables ordering system like this pizza
ordering system. Come up with your own name, but use their design
elements to build our website. I want to see two different vegetable
templates.
I want to see two vegetable templates: normal and organic. I want to
be able to select two other add-ons for each template, and the image
should change according to the add-ons selected. I want to be able to
add to cart and also check out.
Use Higgsfield MCP to generate any images.
Ask me clarifying questions.
Follow the design as closely as possible.
1 Authentication (user accounts)
What it is: letting users sign up and log in so their data is tied to them, not just their phone.
Tool to use: Supabase โ free to start, handles sign up, login, and password resets out of the box. Works with React Native.
Alternative: Firebase Auth by Google โ also free, slightly more complex to set up.
Prompt to give Claude
Add Supabase authentication to my vegetable ordering system. I want
users to be able to sign up and log in with their email and password.
Show a login screen when the user is not authenticated, and once
logged in take them to the main app. Use @supabase/supabase-js. My
Supabase project URL is [PASTE URL] and my anon key is [PASTE KEY].
2 Cloud storage + database
What it is: instead of saving data on the phone, you save it to a database in the cloud. The user can switch phones and their data is still there.
Tool to use: Supabase Database โ same tool as auth above, so you only need one account. Gives you a database with a simple dashboard, no technical knowledge needed.
For images: Supabase Storage โ stores the actual image files. Also included in Supabase for free.
Prompt to give Claude
Replace AsyncStorage in my vegetable ordering system with Supabase.
Create the tables needed to store products, templates, add-ons, cart
items and orders (id, user_id, created_at, plus the relevant fields).
Upload product/add-on images to Supabase Storage and save the public
URL. All reads and writes should be scoped to the logged-in user only.
3 Payments and usage limits
What it is: charging users for the app. A common model is free with a small monthly allowance, then a subscription to unlock more.
Tool to use: RevenueCat โ the easiest way to add subscriptions to a React Native app. Handles Apple's payment system, receipts, and renewals for you. Free up to $2,500/month revenue.
Prompt to give Claude
Add a usage limit to my vegetable ordering system using RevenueCat.
Free users get 5 [actions] per month. When they hit the limit, show a
paywall screen offering a monthly subscription for $4.99/month that
unlocks unlimited use. Use react-native-purchases (RevenueCat's SDK).
My RevenueCat API key is [PASTE KEY].
4 Privacy policy (required by Apple)
What it is: a page that explains what data your app collects and how you use it. Apple will reject your app without one. Takes ~5 minutes to generate.
Tool to use: Termly or iubenda โ both generate a privacy policy for free. Host it as a web page and paste the URL into App Store Connect.
What to disclose for this app: camera access, images sent to AI, email address collected at signup.
5 App icon
What it is: the icon shown on the home screen and in the App Store. Apple requires a 1024×1024 PNG.
Tool to use: Canva โ free. Search the "app icon" template, design it, export at 1024×1024.
6 Onboarding screen
What it is: a 2โ3 screen intro shown the first time someone opens the app.
Prompt to give Claude
Add a simple onboarding flow to the vegetable ordering system. Show 3
screens the first time the user opens the app: 1) "Browse fresh
vegetables" with a leaf icon, 2) "Pick normal or organic + add-ons"
with a basket icon, 3) "Add to cart and check out" with a bag icon.
Each screen has a title, subtitle, and a Next button. The last screen
has a Get Started button. After completing onboarding, save a flag to
AsyncStorage so it never shows again.
7 Move the code to GitHub
Prompt to give Claude
I have already created a repository on GitHub at [PASTE YOUR REPO URL HERE].
Please perform the following steps in my terminal:
- Initialize a local git repository.
- Ensure a .gitignore file is present so I don't push unnecessary files.
- Stage all files and create an initial commit.
- Link this local folder to the existing GitHub repository using the URL provided.
IMPORTANT: Once the remote is linked and the commit is ready, STOP. Do
not push the code yet. Ask me for my explicit permission before you
execute the final git push command.
ฮฃ Full stack summary
| What you need | Tool | Cost |
|---|---|---|
| User accounts | Supabase | Free to start |
| Database + photo storage | Supabase | Free to start |
| Payments + subscriptions | RevenueCat | Free under $2.5K/month |
| Privacy policy | Termly | Free |
| App icon | Canva | Free |
| App Store submission | EAS by Expo | Free tier available |
| Apple Developer account | developer.apple.com | $99/year |
โ The order to do things
- Set up Supabase (auth + database) โ this unlocks everything else.
- Add usage limits tied to user accounts.
- Add the RevenueCat paywall.
- Generate the privacy policy.
- Design the app icon.
- Add onboarding screens.
- Submit via EAS.