Chapter 10: Your Prompt Library - 50 Copy/Paste Solutions

How to Use This Library

This is your stuck-moment survival kit. Each prompt is designed for a specific situation where non-technical builders typically get blocked. They’re organized by phase and category so you can find what you need fast.

How these prompts work:

Copy the entire prompt
Fill in the [bracketed sections] with your specifics
Paste into your AI agent
Follow the resulting guidance

I’ve used every single one of these on my actual projects. They’re battle-tested, not theoretical.

Phase 1: Starting & Planning (Prompts 1-10)

1. The Project Kickoff

I want to build [describe your project in one sentence].

Target users: [who will use this]
Main purpose: [what problem does it solve]

Help me:
1. Validate this idea (is it technically feasible for a beginner?)
2. Identify the simplest version that would be useful
3. Choose the right technology stack for my skill level
4. Estimate realistic timeline for MVP

Be honest about complexity and suggest simplifications if needed.

2. The Feature Prioritization

My project idea includes these features:
- [list all features you're thinking about]

Help me sort these into:
1. Must-have for launch (core functionality)
2. Nice-to-have for launch (enhances but not critical)
3. Future additions (save for later)

For must-haves, explain why they're essential.
For nice-to-haves, explain the complexity cost.

3. The Tech Stack Decider

My project needs to:
- [list functional requirements]

My technical background: [describe your experience level]

Recommend:
1. Frontend framework/approach (and why)
2. Backend needs (if any)
3. Database solution (if needed)
4. Hosting platform

Prioritize: beginner-friendliness, free tiers, and active community support.

4. The Visual Reference Translator

I want my project to look similar to [URL or describe a site].

Specifically, I like:
- [describe visual elements you want to replicate - layout, colors, interactions, etc.]

Help me:
1. Identify the technical patterns being used (grid, flexbox, etc.)
2. Translate visual preferences into implementable components
3. Suggest how to achieve this aesthetic with my tech stack

Provide specific CSS/framework approaches, not just descriptions.

5. The Content Structure Planner

My site will have these sections/pages:
- [list all pages/sections]

For each section, help me define:
1. What content belongs here
2. What components are needed (header, cards, forms, etc.)
3. How sections connect/navigate
4. What order makes most sense

Create a sitemap and component inventory.

6. The Responsive Strategy

My design needs to work on:
- Desktop (primary)
- Tablet
- Mobile phone

For my [describe your project], suggest:
1. Which breakpoints to use
2. How layout should adapt at each size
3. What might need to be hidden/rearranged on mobile
4. Mobile-first or desktop-first approach (and why)

Provide specific pixel breakpoints and adaptation strategy.

7. The Color Scheme Builder

My project is about [describe your project theme/purpose].

I want a color scheme that feels [describe desired mood - professional, playful, calm, energetic, etc.].

Generate:
1. Primary color (main brand color)
2. Secondary color (accents)
3. Background colors (light and dark mode if applicable)
4. Text colors (ensuring readable contrast)
5. Error/success/warning state colors

Provide hex codes and usage guidance for each.

8. The Typography System

Choose a typography system for [describe your project type and aesthetic].

Provide:
1. Font pairing (heading font + body font)
2. Font sizes for: H1, H2, H3, body, small text
3. Line heights and spacing
4. Where to source fonts (Google Fonts, etc.)

Ensure: readability, professional appearance, and easy implementation.

9. The Data Model Designer

My project needs to store/manage:
- [list each type of data - users, products, posts, etc.]

For each data type, define:
1. What fields/properties it needs
2. Relationships between data types
3. What needs to be unique/required
4. Suggested data structure (JSON, table schema, etc.)

Keep structure simple and easy to query.

10. The MVP Scope Definer

I have [time period - e.g., 2 weeks, 1 month] to build my MVP.

My full vision includes:
- [list everything you imagine]

Help me define a realistic MVP that:
1. Can be completed in my timeframe
2. Proves the core concept
3. Is useful enough to get user feedback
4. Doesn't require features I can add later

Be ruthlessly realistic about scope.

Phase 2: Building (Prompts 11-25)

11. The Component Builder

I need to build a [specific component - navigation bar, card grid, form, modal, etc.].

It should:
- [list functional requirements]
- [list visual requirements]

Technology: [your framework/vanilla JS/etc.]

Provide:
1. Complete working code
2. Explanation of key parts
3. How to customize colors/spacing
4. Common variations I might need

Make it responsive and accessible.

12. The Form Handler

Create a form that collects:
- [list each field and its type]

The form should:
1. Validate input before submission
2. Show clear error messages
3. Submit to [email/API endpoint/database]
4. Confirm successful submission
5. Handle submission failures gracefully

Technology: [your stack]

Provide complete code and explain validation logic.

I have [data type] that users need to search/filter by:
- [list filterable attributes]

Build a search/filter system that:
1. Works with my data structure: [describe how data is stored]
2. Filters in real-time as user types/selects
3. Handles no results gracefully
4. Is performant with [estimated number] items

Technology: [your stack]

14. The Image Handler

My project needs to handle images for [use case - user uploads, gallery, product photos, etc.].

Requirements:
- Image upload (if applicable)
- Display at correct size/aspect ratio
- Optimization for web
- [any other specific needs]

Provide:
1. Upload handling code (if needed)
2. Display/styling code
3. Image optimization strategy
4. Where to store images

Technology: [your stack]

15. The API Integration

I need to integrate [specific API - weather, maps, payments, etc.].

My use case: [describe what you're trying to accomplish]

Guide me through:
1. Getting API credentials/keys
2. Making API requests securely
3. Handling responses
4. Error handling
5. Storing API keys properly (not in code)

Provide working code examples and security best practices.

16. The State Management

My app needs to manage this state across components:
- [list data that needs to be shared]

Using [your framework], implement:
1. Centralized state management
2. How components read state
3. How components update state
4. Persisting state (if needed - localStorage, database, etc.)

Provide the simplest approach for my use case, not the most sophisticated.

17. The Route/Navigation Setup

My site has these pages:
- [list all pages/routes]

Set up routing so:
1. Each page has a clean URL
2. Navigation between pages works smoothly
3. Current page is highlighted in nav
4. 404 page for invalid URLs
5. [any specific navigation behavior]

Technology: [your framework/router]

18. The Animation/Transition

Add [specific animation - fade in, slide, hover effect, page transition, etc.] to [component/page].

Requirements:
- Subtle and professional (not distracting)
- Performant (smooth on mobile)
- Accessible (respects prefers-reduced-motion)

Provide:
1. CSS or JavaScript code
2. Customization options (timing, easing, etc.)
3. Where to apply in my existing code

19. The Data Fetching

Fetch data from [API/database/file] and display it as [cards/list/table/etc.].

Handle:
1. Loading state (while fetching)
2. Display fetched data
3. Error state (if fetch fails)
4. Empty state (if no data)
5. Refetch/refresh functionality (if needed)

Technology: [your stack]
Provide complete, working code.

20. The Accessibility Audit

Review my [component/page/site] for accessibility issues.

Check:
1. Keyboard navigation (can everything be accessed without mouse?)
2. Screen reader support (proper ARIA labels, semantic HTML)
3. Color contrast (text readable for visually impaired)
4. Focus indicators (clear focus states)
5. Form labels and error messages

For each issue found, provide the fix.

Create a mobile-friendly navigation menu that:
- Shows as [hamburger icon/bottom bar/other] on mobile
- Expands to show [your navigation items]
- Closes when clicking outside or on a link
- Animates smoothly
- Works on all screen sizes

Technology: [your stack]
Provide complete code with styling.

22. The Loading State

Add loading indicators to my [component/page] while:
- [describe async operation - data loading, form submission, etc.]

The loading state should:
1. Appear immediately when operation starts
2. Prevent duplicate submissions/actions
3. Look professional and match my design
4. Handle long load times gracefully
5. Clear when operation completes

Provide implementation with my existing code.

23. The Error Boundary

Implement error handling for my [component/page] to gracefully handle:
- [list potential errors - network failures, invalid data, etc.]

When errors occur:
1. Show user-friendly error message (not technical details)
2. Prevent app from crashing
3. Log error for debugging
4. Provide recovery option (retry, go back, etc.)

Technology: [your stack]

24. The Pagination

I have [number] items displayed as [cards/list/table].

Implement pagination that:
1. Shows [X] items per page
2. Includes page navigation (prev/next, page numbers)
3. Maintains scroll position or scrolls to top
4. Updates URL with current page (optional)
5. Works with my existing [filtering/search - if applicable]

Technology: [your stack]

25. The Local Storage

Save [specific data] to the user's browser so it persists between sessions.

Implement:
1. Save data to localStorage on [trigger - form submit, button click, etc.]
2. Load saved data on page load
3. Update localStorage when data changes
4. Clear data on [specific action or never]
5. Handle localStorage being disabled/full

Provide complete code and error handling.

Phase 3: Debugging (Prompts 26-35)

26. The Console Error Translator

I'm getting this error:
[paste complete error message]

When: [describe what you were doing when it occurred]

In non-technical terms:
1. What does this error mean?
2. What's likely causing it?
3. How do I fix it?
4. How can I prevent this in the future?

Provide step-by-step fix.

27. The “It Works Locally But Not Live” Debugger

[Feature/component] works perfectly locally but fails when deployed.

Error on live site: [paste error if any, or describe behavior]

Debug:
1. What typically causes local vs. production differences?
2. What environment-specific settings am I missing?
3. What logs should I check?
4. How to test locally in "production mode"?

My hosting: [platform]

28. The Layout Breaking Investigator

My layout looks correct on [screen size] but breaks on [other screen size].

Specific issues:
- [describe what's broken - overlap, squished, cut off, etc.]

Screenshot attached: [if available]

Fix:
1. Identify the CSS causing the issue
2. Provide corrected responsive CSS
3. Explain why it was breaking
4. How to test this doesn't break other sizes

29. The Performance Profiler

My [page/component] is slow:
- [describe specific slowness - loading, scrolling, interactions]

Profile and optimize:
1. Identify the bottleneck (images, JavaScript, API calls, etc.)
2. Suggest specific optimizations
3. Provide implementation for top 3 fixes
4. Estimate performance improvement

Current load time: [if known]
Target: [if you have a goal]

30. The State Bug Debugger

My state/data is behaving unexpectedly:
- Expected: [what should happen]
- Actual: [what is happening]

When: [specific actions that trigger it]

Debug:
1. Trace where state is being set/modified
2. Identify the incorrect state update
3. Provide corrected state management
4. Explain why the bug was occurring

Technology: [your framework/state management]

31. The “Feature Worked Then Broke” Detective

[Feature] was working, then I [describe changes you made], and now it's broken.

Current behavior: [describe the breakage]
Error messages: [if any]

Debug:
1. What change likely caused this?
2. How are the changes conflicting?
3. Provide fix that keeps both working
4. How to test changes don't break existing features?

32. The Browser Compatibility Fixer

My site works in [browser] but not in [other browser].

Specific issue: [describe what doesn't work]

Fix:
1. What browser-specific issue is this?
2. Provide cross-browser compatible code
3. How to test in multiple browsers easily?
4. What features should I avoid for compatibility?

33. The Styling Conflict Resolver

When I add [new component/feature], my existing [other component] styling breaks.

Specific changes:
- [describe what changes visually]

Resolve:
1. Why are the styles conflicting?
2. How to scope styles to avoid conflicts?
3. Provide corrected CSS
4. Best practices to prevent future conflicts

34. The Infinite Loop Breaker

My app is [freezing/crashing/running forever]:

In: [specific component/function]
When: [specific trigger]

Console shows: [if any messages]

Debug and fix:
1. Identify the infinite loop
2. Explain why it's happening
3. Provide corrected code
4. How to prevent similar loops?

35. The Data Not Showing Debugger

My data isn't displaying on the page:

Data source: [API/database/file]
Data structure: [paste sample data if available]
Display component: [describe]

Debug:
1. Is data fetching correctly? (how to verify)
2. Is data structured as component expects?
3. Are there any console errors?
4. Provide working code for displaying this data

Phase 4: Deployment & Maintenance (Prompts 36-45)

36. The Pre-Deploy Checklist

Before deploying [project name] to production, verify:

Functionality:
- [list critical features to test]

Performance:
- Page load speed
- Mobile responsiveness
- Image optimization

Security:
- HTTPS enabled
- API keys in environment variables
- No exposed sensitive data

SEO:
- Meta tags set
- Sitemap generated
- Robots.txt configured

Generate a testing checklist specific to my project.

37. The Environment Variables Setup

My app uses these secrets/API keys:
- [list each secret and its purpose]

For deployment on [platform]:
1. Show me exactly where to add environment variables
2. What to name each variable
3. How my code accesses them
4. How to verify they're working
5. What never to commit to Git

Provide step-by-step guide.

38. The Custom Domain Connector

I deployed my site to [platform].
I purchased domain [yoursite.com] from [registrar].

Connect them:
1. DNS records to add in [registrar]
2. Settings to configure in [platform]
3. How to verify connection worked
4. How to enable HTTPS/SSL
5. How long before it works?

Provide exact values for each DNS record.

39. The SEO Basics Implementer

Add basic SEO to my site at [URL].

For each page:
1. Create unique, descriptive title tags
2. Write compelling meta descriptions
3. Ensure proper heading hierarchy
4. Add image alt text
5. Generate sitemap.xml

Provide:
- Templates for titles/descriptions
- Where to add each element in my code
- How to submit sitemap to Google

40. The Analytics Setup

Add simple analytics to [URL] to track:
- Visitor count
- Popular pages
- Traffic sources
- Mobile vs desktop usage

Requirements:
- Privacy-respecting
- Free tier adequate
- Simple dashboard
- No slow-down to site

Recommend a service and guide me through setup.

41. The Backup Strategy Creator

Create a backup system for my site on [platform]:

What to backup:
- Code/files
- Database (if applicable)
- User uploads (if applicable)
- Environment variables

Setup:
1. Automatic backup schedule
2. Where backups are stored
3. How to restore from backup
4. How to verify backups work

Prioritize: automated, free/cheap, beginner-friendly.

42. The Content Updater

I need to update [specific content type - pricing, team member, blog post, etc.] on my live site.

Current site structure: [describe]

Guide me:
1. Which file(s) contain this content
2. Exact location in those files
3. What else might be affected by this change
4. How to test change before deploying
5. How to deploy just this update

Minimize risk of breaking anything.

43. The Performance Monitor

Set up performance monitoring for [URL] to track:
- Page load speed
- Time to interactive
- Largest contentful paint
- First input delay

Requirements:
- Free or very cheap
- Simple to understand
- Alerts if performance degrades
- Actionable insights

Recommend tool and setup process.

44. The Security Audit

Run a security check on my deployed site at [URL].

Check:
1. HTTPS properly configured?
2. Any exposed API keys or secrets?
3. Dependencies up to date?
4. Common vulnerabilities?
5. Input validation on forms?

For each issue:
- Severity level
- How to fix
- Prevention strategy

45. The Rollback Procedure

I deployed changes to [URL] and something broke:

What broke: [describe issue]

On [hosting platform]:
1. How to see deployment history?
2. How to rollback to previous working version?
3. Will rollback lose any data?
4. How to redeploy fixed version?
5. How to prevent this next time?

I need to fix this immediately.

Phase 5: Scaling (Prompts 46-50)

46. The Authentication Adder

Add user authentication to my existing site where users can:
- [list what they need accounts for]

Using [auth service if chosen, or ask for recommendation]:
1. How to integrate with my current code?
2. What pages need authentication protection?
3. How to associate user data with accounts?
4. Migration path for existing data/users?

Prioritize: security, simplicity, free tier.

47. The Database Scaler

My current data storage:
- Platform: [Airtable/Sheets/JSON/etc.]
- Records: [approximate count]
- Performance issues: [describe slowness]

Should I:
1. Optimize current setup?
2. Migrate to real database?

If migrate:
- Which database for my use case?
- Migration plan without data loss
- Code changes required
- Cost implications

48. The Payment Processor

Add payment processing for:
- Product/service: [what you're selling]
- Price: [pricing model - one-time, subscription, etc.]
- Volume: [expected transactions]

Using Stripe:
1. What Stripe product/flow fits my needs?
2. Implementation steps
3. Security requirements
4. Testing approach
5. Required legal docs (terms, refund policy, etc.)

Simplest possible implementation.

49. The Admin Dashboard Builder

I manage [content type] by editing code files.

Build an admin dashboard where I can:
- View all [items]
- Add new [items]
- Edit existing [items]
- Delete [items]
- [any special features - bulk operations, image upload, etc.]

Options:
1. No-code admin tool (Retool, etc.)
2. Custom built dashboard

Recommend best fit and implementation guide.

Current tech: [your stack]

50. The Feature Debt Evaluator

Before I add [proposed new feature], evaluate:

Upfront cost:
- Time to implement
- Complexity added
- Testing required

Ongoing cost:
- Maintenance burden
- Support/documentation needed
- Future updates

User value:
- How many users benefit?
- How critical is this feature?
- Simpler alternatives?

Recommend: build now, defer, simplify, or skip entirely.

How to Get the Most From These Prompts

Customize them: The bracketed sections aren’t optional - fill them with your specific details for best results.

Combine them: Many projects need multiple prompts in sequence. Use 1 (Project Kickoff) → 3 (Tech Stack) → 9 (Data Model) → 11 (Component Builder) in order.

Iterate on answers: If the AI’s first response isn’t quite right, ask follow-up questions or request simpler explanations.

Save your versions: Once you customize a prompt and get good results, save it. You’ll likely need similar prompts for future projects.

Share patterns: Notice which prompts you use most often - those reveal your recurring stuck points and where you might want to build deeper knowledge.

Beyond These 50

These prompts cover the most common stuck moments, but you’ll encounter unique situations. When you do, use these patterns:

Be specific: “Make the header better” gets worse results than “Make the header sticky, reduce height to 60px, and change background to semi-transparent white”

Provide context: “Fix this error” gets worse results than “I get this error [paste error] when [specific action]. Here’s the relevant code [paste code]”

Ask for explanations: “Just fix it” teaches you nothing. “Fix it and explain why it was broken” builds your understanding.

Request alternatives: “How else could I accomplish this?” often reveals simpler approaches.

What This Chapter Gives You

You now have:

50 copy/paste prompts for common stuck moments
Prompts organized by project phase
Real examples of how to customize them
Patterns for creating your own prompts
A reference to return to whenever you’re blocked

This library is meant to be messy and well-used. Print it, bookmark it, keep it open in a tab. These prompts are tools, not theory. Use them.

Conclusion: You’re Ready

You started this playbook not knowing what a “header” was called or how to ask an AI agent for a “mobile-responsive navigation with dropdown menus.”

Now you have:

The vocabulary to describe what you see (Chapter 1)
Formulas for getting AI agents unstuck (Chapters 2-5)
Debugging strategies that work (Chapter 6)
Deployment confidence (Chapter 7)
Post-launch maintenance systems (Chapter 8)
Scaling approaches for growth (Chapter 9)
50 battle-tested prompts ready to use (Chapter 10)

Building with AI isn’t about being technical. It’s about knowing what to ask and when to ask it.

You’re ready to build. Go make something.