Build · beginner · 12 min read
The Non-Coder's Prompt Library: 50 Copy-Paste Templates
Tested prompts for building common features with AI tools — authentication, payments, dashboards, onboarding, and more.
Published March 5, 2026 ·
promptstemplatesreference
These prompts are written for Lovable, but most work in Bolt.new and other AI builders with minor adjustments. Each prompt is designed to be complete and specific — the two qualities that most affect whether AI builders get it right on the first try.
A few rules before you start: give one instruction per prompt, be explicit about what already exists in your app before asking for something new, and always describe the user-facing outcome you want, not just the technical mechanism.
Authentication and User Management
1. Magic link login
Add magic link (passwordless) email login to this app. When a user enters
their email and clicks "Send login link," send them an email with a
one-click login link that expires after 15 minutes. After clicking the link,
redirect them to /dashboard. Do not include a password field anywhere.2. Google OAuth sign-in
Add Google sign-in as an option on the login and signup pages. Place the
Google button above the existing email form with an "or" divider between
them. After Google auth, if this is the user's first login, redirect to
/onboarding. For returning users, redirect to /dashboard.3. User profile page
Create a /settings/profile page where logged-in users can update their
display name, bio (max 200 characters), and profile photo. The photo
upload should accept JPG and PNG up to 5MB. Show a preview before saving.
Display a success toast notification after changes are saved.4. Password reset flow
Add a "Forgot password?" link on the login page that opens a password
reset flow. The user enters their email, receives a reset link, clicks it,
and can set a new password. Show appropriate error messages if the email
is not in the system. After a successful reset, redirect to login with
a "Password updated — please log in" message.5. Protected routes
Make the following routes accessible to logged-in users only:
/dashboard, /settings, /projects, /billing. If a logged-out user
visits any of these, redirect them to /login and after they log in,
return them to the page they originally requested.6. User role system
Add a role field to the user profiles table with two possible values:
'user' and 'admin'. Default all new signups to 'user'. Create an
/admin route that only users with role='admin' can access — anyone
else should see a 404 page, not a redirect to login (don't reveal
the admin section exists).7. Account deletion
Add a "Delete my account" option in /settings/account. Require the
user to type "DELETE" to confirm. On confirmation, delete all their
data from the database and their auth record, then redirect to the
homepage with a "Your account has been deleted" message.8. Email verification on signup
After a user signs up with email and password, send them a verification
email. Until they verify, show a banner at the top of every page:
"Please verify your email — resend verification email." Block access
to premium features until their email is verified, but let them
explore the basic app.Payments and Subscriptions
9. One-time Stripe Checkout
Add a "Buy now" button to the /pricing page that opens a Stripe Checkout
session for a one-time payment of $49. After successful payment, set
a 'purchased' flag on the user's record in the database and redirect
them to /dashboard with a "Payment successful" banner. If payment
is cancelled, return them to /pricing.10. Monthly subscription tiers
Set up two subscription tiers using Stripe: Starter at $19/month and
Pro at $49/month. Create a /pricing page that shows both plans side
by side with a feature comparison. Clicking "Subscribe" on either plan
should open a Stripe Checkout session for the appropriate price ID.
After successful checkout, store the subscription tier on the user's
profile and redirect to /dashboard.11. Upgrade and downgrade flow
On the /billing page, show the user's current plan and an option to
upgrade or downgrade. Upgrading should take effect immediately (and
charge the prorated difference). Downgrading should take effect at
the end of the current billing period. Use Stripe's subscription
update API. Show the effective date for downgrades clearly.12. Free trial with card required
Add a 14-day free trial to the Pro plan. Require a credit card at
signup but do not charge until the trial ends. Show a banner during
the trial counting down days remaining: "Your trial ends in X days."
Send an email 3 days before the trial ends. After the trial, charge
the card automatically or cancel and downgrade to the free tier.13. Trial without card required
Add a 7-day free trial that requires no credit card. After 7 days,
lock the app behind an upgrade prompt. The prompt should appear on
every page of the app after trial expiry, not just in settings.
Include a "Continue free" option that downgrades them to a limited
free tier with a clear feature comparison.14. Invoice and receipt emails
After every successful Stripe payment (one-time or subscription
renewal), send the user a receipt email that includes: the amount
charged, the plan or product, the date, their billing name, and a
link to their full invoice on Stripe's hosted invoice page. Use
Stripe webhooks to trigger this email.15. Billing portal
On the /billing page, add a "Manage billing" button that opens
Stripe's hosted Customer Portal. The portal should let users update
their payment method, view invoice history, and cancel their
subscription. After they close the portal, return them to /billing
with updated subscription status.16. Failed payment handling
Listen for Stripe's payment_intent.payment_failed webhook. When a
payment fails: send the user an email explaining their payment failed
with a link to update their card, add a persistent banner to their
dashboard about the payment issue, and give them a 7-day grace period
before restricting access.Dashboard and Analytics
17. Usage stats dashboard
Create a /dashboard page that shows these stats for the logged-in user:
total projects created (count), active projects (count), storage used
(sum of file sizes in MB), and account age (days since signup). Show
each stat in its own card with a label. Data should update in real time.18. Admin user management table
Create an /admin/users page (admin only) showing a table of all users
with these columns: email, display name, plan, signup date, last login,
and an Actions column with "View" and "Suspend" buttons. Add search
by email and filter by plan. Paginate at 50 rows per page.19. Date-range analytics
On the /admin/analytics page, add a date range picker (default: last
30 days). Show these metrics for the selected range: new signups (chart
by day), active users (unique users who logged in), conversions to paid
(count and percentage of new signups), and revenue (sum from Stripe).
Use a simple line chart for the daily breakdown.20. Export data to CSV
On the /admin/users page, add an "Export CSV" button. Clicking it
should generate and download a CSV file with all users: email, name,
plan, signup date, and total payments. The file should be named
users-export-YYYY-MM-DD.csv with today's date. Handle large datasets
by streaming the response rather than loading all rows into memory.21. User activity log
Add an activity log that records these events for each user: login,
logout, profile update, plan change, project created, project deleted.
Show the last 50 events in a table on /settings/activity with columns
for action, timestamp, and IP address. Do not let users delete their
own activity log.22. Real-time notification count
Add a notification bell icon to the navbar. Show an unread count badge
(red circle with number) when there are unread notifications. Clicking
the bell opens a dropdown showing the last 10 notifications with their
message, timestamp, and read status. Clicking a notification marks it
read and navigates to the relevant page.Onboarding and UX
23. Post-signup onboarding flow
After a new user signs up, send them through a 3-step onboarding flow
before reaching the dashboard. Step 1: "What will you use this for?"
(4 radio options). Step 2: "Tell us about yourself" (display name +
company name). Step 3: "Invite your team" (optional email invite field
with "Skip for now" link). Store all answers on the user's profile.
Show a progress indicator (1 of 3) at the top.24. Welcome email sequence
Trigger these emails for new signups:
- Immediately: Welcome email with a link back to the app and 3 things
to try first.
- Day 2: "Getting started" email with a link to the best guide in the
help docs.
- Day 7: Check-in email with a question asking if they've run into any
issues and a reply-to address.
Use Resend for sending. Do not send Day 2 or Day 7 emails if the user
has already completed onboarding.25. Onboarding progress checklist
Add an onboarding checklist widget to the /dashboard sidebar. It should
show these items with checkmarks when completed: "Verify your email,"
"Complete your profile," "Create your first project," "Invite a team
member," "Connect your domain." Track completion in the database.
Hide the widget automatically once all items are checked.26. Empty states
The /projects page currently shows a blank area when there are no
projects. Replace this with an empty state component: an icon, a heading
("You haven't created any projects yet"), a one-line description, and
a "Create your first project" primary button. Apply the same pattern
to the /team and /activity pages.27. Feature tours with tooltips
Add a one-time feature tour for new users on their first visit to
/dashboard. Use sequential tooltips that highlight: the "New project"
button, the search bar, the settings icon in the nav, and the help
button. Each tooltip has a title, 1-2 sentences of description, and
"Next" / "Skip tour" buttons. Store tour completion in the user's
profile so it never shows again.Data and Forms
28. Multi-step form with progress bar
Convert the project creation form into a 3-step form. Step 1: name and
description. Step 2: project settings (type, visibility). Step 3: invite
team members (optional). Add a progress bar at the top showing the
current step. "Back" and "Next" buttons navigate between steps. Only
the final step has a "Create project" submit button. Validate each step
before allowing advancement.29. File upload with preview
Add a file upload field to the project form. Accept PDF, PNG, JPG, and
DOCX files up to 10MB each, maximum 5 files per upload. Show a preview
thumbnail for images and a file icon with filename for PDFs and DOCCs.
Allow users to remove individual files before submitting. Upload to
Supabase storage and store the URLs in the database.30. Search with live filtering
Add a search bar to the /projects page. As the user types (with 300ms
debounce), filter the displayed projects by name and description. If
no results match, show an empty state: "No projects match '[search term]'"
with a "Clear search" link. The search should be client-side only —
no server round-trips for the filter.31. Infinite scroll
The /projects page currently uses pagination. Replace it with infinite
scroll. Load the first 20 projects on page load. As the user scrolls
within 200px of the bottom, load the next 20 projects and append them.
Show a spinner while loading. When all projects are loaded, show a
"You've seen everything" message at the bottom.32. Auto-save form
On the project settings form, add auto-save behavior. After the user
stops typing for 2 seconds, automatically save changes to the database.
Show a "Saving..." indicator in the top-right of the form while saving,
then "Saved" with a timestamp when complete. Do not require a manual
Save button. Show an error state if auto-save fails.33. Duplicate record action
Add a "Duplicate" action to each project card in the /projects list.
Clicking Duplicate should create a copy of the project with all its
settings, named "[Original Name] (copy)". Immediately open the new
project so the user can rename it. The original project should be
unchanged.34. Bulk actions
Add checkboxes to each row in the /projects table. When one or more
checkboxes are selected, show a bulk action bar at the top of the
table with these options: "Archive selected," "Delete selected," and
"Export selected." Clicking "Delete selected" should require a
confirmation dialog before proceeding.35. Form validation with inline errors
The signup form currently shows a generic error at the top if validation
fails. Replace this with inline validation: show a red error message
directly below each field that fails. Validate email format on blur,
password minimum 8 characters on blur, and matching passwords on the
confirm field. Enable the submit button only when all fields are valid.API and Integrations
36. Webhook receiver
Create a POST /api/webhooks/stripe endpoint to handle Stripe webhooks.
Verify the webhook signature using the Stripe-Signature header. Handle
these events: checkout.session.completed (activate subscription),
customer.subscription.deleted (deactivate subscription), and
invoice.payment_failed (flag account). Log all received webhook events
to a webhooks_log table for debugging.37. REST API with API keys
Create a /settings/api page where users can generate and revoke API keys
for their account. Each key should have a name, a creation date, and a
last-used date. Store keys hashed in the database (never in plaintext).
Add middleware that validates the Authorization: Bearer [key] header on
all /api/v1/* routes and attaches the corresponding user to the request.38. Slack notification integration
Add a Slack integration to the /settings/integrations page. The user
pastes a Slack Incoming Webhook URL and checks which events they want
notifications for: new signups, new orders, failed payments, project
completed. Test the connection with a "Send test notification" button.
Store the webhook URL encrypted in the database.39. CSV import
Add a CSV import feature to /settings/data. The user uploads a CSV file
with columns: name, email, company, plan. Show a preview of the first
5 rows before importing. Validate all rows and show a list of errors
(duplicate email, invalid format) before allowing the import to proceed.
After import, show a summary: "X records imported, Y skipped."40. Public embed widget
Create a public embeddable widget that shows [the project status page]
for a given account. The embed code is a single <script> tag. Generate
the embed code on /settings/embed and let users copy it. The widget
should work on any external HTML page without requiring authentication.
Style it to match our app's design.Notifications and Emails
41. In-app notification system
Create a notifications table with: id, user_id, type, title, body,
read (boolean), link (optional URL), created_at. Add a notification
bell in the nav with unread count. The dropdown shows the 10 most
recent notifications. Mark all as read when the user opens the
dropdown. Add a /notifications page for the full history.42. Email preference center
Add a /settings/notifications page where users can toggle which emails
they receive: product updates, billing reminders, weekly digest,
marketing emails. Store preferences in the database. Respect these
preferences in all outgoing emails (except transactional emails like
receipts and password resets, which cannot be unsubscribed).43. Weekly digest email
Set up a weekly digest email sent every Monday at 9am to active users.
The email should include: a summary of their activity in the past week
(projects created, tasks completed), one tip or new feature highlight,
and a link back to the dashboard. Users who have disabled the weekly
digest in their notification settings should not receive it.Team and Collaboration
44. Team invitations
Add a /settings/team page where the account owner can invite team
members by email. Each invite should have a role: 'editor' or 'viewer'.
Invited users receive an email with an accept link. Accepting creates
their account (or links to their existing one) and grants access to
the team workspace. The owner can revoke access at any time.45. Comments on records
Add a comments section to the project detail page. Any team member can
post a comment. Comments show the author's avatar and name, the text,
and a timestamp. Allow editing and deleting your own comments (not
others'). When a new comment is posted, notify all other team members
who have commented on the same project via email (one email per event,
not per comment).46. Real-time collaborative presence
On the project detail page, show which team members are currently
viewing the page. Display their avatars in the top-right with a green
"online" indicator. When a user leaves the page, remove their avatar
within 5 seconds. Use Supabase Realtime for presence tracking.
Limit display to 5 avatars with a "+X more" indicator for larger groups.SEO and Public Pages
47. Dynamic sitemap
Generate a dynamic sitemap.xml at /sitemap.xml. Include: all static
pages (/, /pricing, /about), all public project pages (/projects/[slug]),
and all blog posts (/blog/[slug]). Set lastmod to the record's
updated_at date. Set changefreq to 'weekly' for blog posts and
'monthly' for static pages. Exclude any routes that require login.48. Open Graph meta tags
Add Open Graph meta tags to every page. For static pages, use the
page title and a default description. For project pages, use the
project name as the og:title and project description as og:description.
For blog posts, use the post title, excerpt, and featured image URL.
The og:url should always be the canonical URL of the page.49. Blog post schema markup
Add JSON-LD structured data to all blog post pages using the Article
schema type. Include: headline (post title), author name and URL,
datePublished, dateModified, image URL, and publisher (company name
and logo URL). This helps Google display rich results in search.Miscellaneous Utilities
50. Dark mode toggle
Add a dark mode toggle to the /settings/appearance page (not the nav —
keep the nav clean). Store the user's preference in their profile.
Apply the mode on page load before render to avoid flash. The dark
theme should use near-black backgrounds (#0F0F0F), not pure black,
and off-white text (#E8E8E8), not pure white. All existing colors
should shift appropriately — test every page in both modes before
considering it done.Tips for Getting Better Results
Be specific about what already exists. Start every prompt with context: “I have a /dashboard page with a list of projects. Each project has a name, status, and created_at date.” AI builders that know your data model make fewer wrong assumptions.
One thing per prompt. “Add a search bar and also fix the pagination and also add export” will produce something half-right across all three. Split it.
Describe the user experience, not the implementation. “When the user hovers over a project card, show a three-dot menu” is better than “Add a dropdown component to each card.” Let the AI decide the implementation.
Ask for confirmation before the database changes. If a prompt involves changing the schema, ask the AI to explain what it’s about to do before doing it. Undoing a bad migration takes longer than preventing one.
Test on mobile immediately. AI builders almost always build for desktop first. After every feature, check it on a narrow viewport before continuing.
Enjoying this guide?
Get the weekly digest — new tools, honest takes, and what founders are shipping.