Use AI assistants (Cursor, Copilot, Claude) to build features fast - no deep coding required

AI Coding with ProductReady

For product managers, designers, and non-technical founders: This guide shows you how to use AI coding assistants to customize ProductReady without being a developer.

What is "Vibe Coding"? It's using AI assistants (like GitHub Copilot, Cursor, or Claude) to write code by describing what you want in plain English. Think of it as having a senior developer on-demand.

Why This Matters

Traditional coding: Learn syntax → Write code → Debug → Repeat

AI coding: Describe what you want → AI writes code → You review → Ship

Example: "Add a user profile page with avatar upload" → AI generates the entire feature in minutes.

Getting Started

Step 1: Choose Your AI Assistant

Cursor - Best for beginners and full features

Download Cursor (free trial)
Open ProductReady folder: File → Open Folder → kapps/apps/productready
Press Cmd+K (Mac) or Ctrl+K (Windows)
Start typing what you want!

Why Cursor?

Understands your entire codebase
Can edit multiple files at once
Has composer mode for complex features
Best AI models (Claude, GPT-4)

GitHub Copilot - Good if you use VS Code

Install VS Code
Install GitHub Copilot extension
Open ProductReady folder
Use Copilot Chat (Cmd+I)

Limitations:

Requires GitHub subscription ($10/month)
Less context-aware than Cursor
Better for small edits than full features

Claude Desktop - For guidance and planning

Download Claude Desktop
Use MCP (Model Context Protocol) to connect to your code
Great for asking questions and getting guidance

Best For:

Planning features before coding
Understanding existing code
Troubleshooting errors

Real Examples: What You Can Build

Example 1: Add a "Projects" Feature

Your prompt to AI:

Add a new "Projects" feature to ProductReady:

1. Create a database table for projects with:
   - title (string)
   - description (text)
   - status (enum: active, archived, completed)
   - ownerId (foreign key to users)
   - createdAt, updatedAt

2. Create tRPC routes:
   - projects.list (get all user's projects)
   - projects.create (create new project)
   - projects.update (update project)
   - projects.delete (soft delete)

3. Add a Projects page at /dashboard/projects with:
   - List view (table or cards)
   - Create button
   - Edit/delete actions

4. Use the existing design system (KUI components)

What AI will generate:

src/db/schema/projects.ts - Database schema
src/server/routers/projects.ts - API routes
src/app/dashboard/projects/page.tsx - UI page
Migration file for the database

Time: 2-5 minutes with AI vs. 2-3 hours manually

Example 2: Customize the Landing Page

Your prompt to AI:

Customize the ProductReady landing page for my SaaS product "TaskFlow":

1. Change hero section:
   - Headline: "Manage Your Team's Tasks in One Place"
   - Subheadline: "Simple, powerful task management for modern teams"
   - CTA: "Start Free Trial"

2. Add 3 feature cards:
   - Real-time collaboration
   - AI-powered task prioritization
   - Beautiful dashboards

3. Update colors to purple theme:
   - Primary: #8B5CF6
   - Secondary: #A78BFA

4. Add a pricing section with 3 tiers:
   - Free (0 users), Starter ($9/mo), Pro ($29/mo)

What AI will generate:

Updated src/app/(home)/page.tsx
New color CSS variables in src/app/global.css
Pricing component with tiers

Time: 5-10 minutes with AI vs. 1-2 days with designer

Example 3: Add Stripe Payments

Your prompt to AI:

Integrate Stripe subscription payments into ProductReady:

1. Install Stripe SDK: pnpm add stripe @stripe/stripe-js

2. Create Stripe checkout session API:
   - Hono route at /api/checkout
   - Create checkout for monthly subscription ($29)
   - Return session URL

3. Add billing page at /dashboard/billing:
   - Show current subscription status
   - "Upgrade" button that redirects to Stripe
   - Handle success/cancel callbacks

4. Store subscription data:
   - Add subscriptions table (userId, stripeSubscriptionId, status, currentPeriodEnd)
   - Update on webhook events

5. Use environment variables:
   - STRIPE_SECRET_KEY
   - STRIPE_PUBLISHABLE_KEY
   - STRIPE_WEBHOOK_SECRET

What AI will generate:

Stripe integration code
Billing UI components
Webhook handler
Database schema updates

Time: 10-15 minutes with AI vs. 1-2 days manually

Effective Prompt Patterns

Key Insight: The more specific you are about location, UI position, and context, the better AI understands your intent and generates accurate code.

AI coding works best when you provide clear spatial and contextual information. Here are three proven prompt patterns:

Pattern 1: UI-Based Prompts (Location + Route + Position)

When modifying UI elements, always specify:

Directory: Exact app/file location
Route: URL path where the change appears
Position: Visual location on the page

Template:

Directory: apps/XXX
Route: /dashboard/XXXX
Position: [specific UI location]
Change: [what to modify]

Example 1 - Modify existing UI element:

Directory: apps/productready
Route: /dashboard/tasks
Position: Top-left sidebar, above the task list
Change: Add a "Filter by Priority" dropdown that shows: All, High, Medium, Low
Use the existing Select component from KUI

Example 2 - Add new component:

Directory: apps/productready
Route: /dashboard
Position: Main content area, below the welcome message
Change: Add a "Quick Actions" card with 3 buttons:
  - Create Task (opens task form)
  - Invite Team (opens invite dialog)
  - View Reports (navigates to /dashboard/reports)
Use existing Card and Button components from KUI

Example 3 - Complex UI flow:

Directory: apps/productready
Route: /dashboard/settings/profile
Position: Right side panel, under "Avatar" section
Change: Add image upload with preview:
  1. Click avatar → file picker opens
  2. Select image → shows preview
  3. "Save" button updates avatar
  4. Max size: 2MB, formats: jpg, png, webp
  5. Show error toast if validation fails
Follow the upload pattern in features-upload.mdx

Why this works: AI can pinpoint exactly where to make changes and what existing patterns to follow.

Pattern 2: Test-Based Prompts (Fix Errors)

Let AI fix linting, type checking, and test errors by providing the command output.

Template:

Directory: apps/XXX
Command: [linting/test command]
Result: [paste error output]
Fix: [any specific constraints]

Example 1 - Type errors:

Directory: apps/productready
Command: pnpm typecheck
Result:
  src/components/TaskCard.tsx:23:15 - error TS2339: 
  Property 'priority' does not exist on type 'Task'
  
  src/components/TaskCard.tsx:45:20 - error TS2345: 
  Argument of type 'string' is not assignable to parameter of type 'TaskStatus'
  
Fix: Add missing types and ensure proper type safety

Example 2 - Lint errors:

Directory: apps/productready
Command: pnpm lint
Result:
  src/app/dashboard/page.tsx
    12:8   Warning: React Hook useEffect has a missing dependency
    23:15  Error: 'user' is possibly 'undefined'
    34:10  Error: Unexpected var, use let or const instead
    
Fix: Follow React best practices and resolve all warnings

Example 3 - Test failures:

Directory: apps/productready
Command: pnpm test src/lib/utils.test.ts
Result:
  ✓ should format currency correctly
  ✕ should handle null dates (expected: "N/A", received: "Invalid Date")
  ✕ should parse task status (TypeError: Cannot read property 'toLowerCase' of undefined)
  
Fix: Add null checks and proper error handling

Why this works: AI sees the exact error context and can apply targeted fixes without breaking other code.

Pattern 3: Solution-Based Prompts (Problem + Goal)

Describe the problem you're facing and what you want to achieve. Best for feature requests and improvements.

Template:

Directory: apps/XXX
Problem: [current issue or limitation]
Goal: [desired outcome]
Constraints: [any requirements or limitations]

Example 1 - Performance issue:

Directory: apps/productready
Problem: The /dashboard/tasks page loads slowly with 1000+ tasks.
  Currently fetches all tasks at once and renders them in a single list.
Goal: Implement pagination or infinite scroll to improve performance.
  Load 50 tasks initially, load more when scrolling to bottom.
Constraints: 
  - Preserve existing filters (status, priority, assignee)
  - Keep search functionality working
  - Don't break existing task card UI

Example 2 - UX improvement:

Directory: apps/productready
Problem: Users keep accidentally deleting tasks because the delete button 
  is too easy to click (no confirmation).
Goal: Add a confirmation dialog before deleting tasks.
  Show: "Are you sure you want to delete '[task title]'? This cannot be undone."
  Buttons: "Cancel" (default focused) and "Delete" (red, destructive)
Constraints:
  - Use existing Dialog component from KUI
  - Add keyboard shortcut: Escape to cancel, Enter to confirm
  - Show toast notification after successful deletion

Example 3 - Feature extension:

Directory: apps/productready
Problem: Task comments don't support @mentions, making it hard to notify team members.
Goal: Add @mention functionality to task comments:
  - Type "@" → shows dropdown of team members
  - Select member → inserts @username in comment
  - Mentioned users get in-app notification
  - Mentioned text appears highlighted in comments
Constraints:
  - Reuse existing mentions pattern from other apps if available
  - Store mentions in database for notification tracking
  - Support multiple mentions per comment

Why this works: AI understands the context, user intent, and technical constraints to design a complete solution.

Prompting Best Practices

✅ Good Prompts

Specific and structured:

Add user avatar upload:
1. Update users table: add avatarUrl field
2. Create /api/upload endpoint (accept images, max 2MB)
3. Store in public/avatars/ folder
4. Add upload button in settings page
5. Show avatar in dashboard header

Includes context:

I'm building a customer feedback tool. Add a "Feedback" feature similar to 
the existing Tasks feature, but with fields: customerEmail, rating (1-5), 
comment, category (bug/feature/other)

References existing patterns:

Create a Notifications page following the same layout as Dashboard. 
Use the same sidebar, header, and content structure. Show notification 
list with mark-as-read functionality.

❌ Bad Prompts

Too vague:

Make it better

Missing details:

Add payments

(Which payment provider? What are you selling? Monthly or one-time?)

Unrealistic:

Build a full CRM like Salesforce

(AI can't build entire apps - break into smaller features)

Step-by-Step: Your First AI Feature

Let's build a "Team Invites" feature together.

Step 1: Plan in Plain English

Open Cursor/Copilot and write:

I want to add a Team Invites feature:

Users should be able to:
1. Invite teammates by email
2. See pending invites (status: pending, accepted, expired)
3. Cancel invites
4. Invited users get an email with a signup link

What files do I need to create/modify?

AI will respond with a plan - review it first!

Step 2: Generate Database Schema

Create a database schema for invites in src/db/schema/invites.ts:

Fields:
- id (primary key)
- email (string, indexed)
- teamId (foreign key to users.id)
- invitedBy (foreign key to users.id)
- token (unique string for invite link)
- status (enum: pending, accepted, expired)
- expiresAt (timestamp)
- createdAt, updatedAt

Use Drizzle ORM syntax following the pattern in src/db/schema/users.ts

Step 3: Create API Routes

Create tRPC router for invites at src/server/routers/invites.ts:

Routes:
1. invites.create - Send invite (input: email), generates token, returns invite
2. invites.list - Get all user's sent invites
3. invites.cancel - Cancel pending invite (input: inviteId)
4. invites.accept - Accept invite using token (input: token)

Follow the pattern in src/server/routers/tasks.ts
Include proper authentication checks

Step 4: Build the UI

Create an Invites page at src/app/dashboard/invites/page.tsx:

Layout:
- Header: "Team Invites"
- Button: "Invite Teammate" (opens dialog)
- Table showing: Email, Status, Invited Date, Actions (Cancel button)
- Dialog with: Email input field, Send button

Use existing KUI components (Button, Dialog, Table)
Call tRPC mutations: trpc.invites.create, trpc.invites.cancel
Show success toast on actions

Step 5: Test It

How do I test the invites feature?
1. What test data do I need?
2. How do I verify the token generation?
3. Should I write unit tests?

AI will guide you through testing!

For Product Managers: Spec Writing

Use AI to turn your product ideas into technical specs that developers (or AI) can implement.

Your Product Idea

Product Feature: Comment threads on tasks

Users should be able to:
- Add comments to any task
- Reply to comments (nested threads)
- @mention other users
- Edit/delete their own comments
- See comment count on task cards
- Get notifications when mentioned

Turn this into a technical specification with:
- Database schema
- API endpoints
- UI components needed
- User flows

AI will output a complete technical spec that you can hand to developers or use to generate the code yourself!

For Designers: Styling with AI

Change Colors

Update the design system to use a teal/ocean theme:

Primary color: #0D9488 (teal)
Secondary color: #14B8A6
Accent: #06B6D4 (cyan)

Update CSS variables in src/app/global.css
Ensure good contrast for accessibility (WCAG AA)
Keep dark mode variants

Customize Components

Make the dashboard cards more modern:

- Add subtle hover effect (lift + shadow)
- Round corners more (from 8px to 12px)
- Add gradient background (subtle)
- Increase padding (more spacious)

Update the Card component in src/components/ui/card.tsx
Use Tailwind classes

Responsive Design

Fix the dashboard layout for mobile:

- Sidebar should collapse to hamburger menu
- Task cards should stack (not grid)
- Hide less important columns in table view
- Make buttons full-width on mobile

Update src/app/dashboard/layout.tsx
Use Tailwind responsive classes (sm:, md:, lg:)

Common Gotchas

"AI changed the wrong file"

Solution: Be more specific about file paths

❌ "Update the button component"
✅ "Update src/components/ui/button.tsx"

"The code doesn't match the existing style"

Solution: Reference existing patterns

Follow the same pattern as src/server/routers/tasks.ts
Use the same error handling and validation approach

"AI suggested installing a new library"

Solution: Ask if you really need it

Can I do this with existing libraries in package.json?
What are the pros/cons of adding this dependency?

Advanced: Multi-File Features

For complex features that span multiple files, use Cursor Composer mode:

Press Cmd+Shift+I (Composer mode)
Describe the full feature
AI will modify multiple files at once
Review changes before accepting

Example prompt:

Add complete analytics dashboard:

1. Database:
   - Create analytics_events table (event_type, user_id, metadata, timestamp)
   
2. API:
   - analytics.track - Log event
   - analytics.getStats - Get aggregated stats (DAU, MAU, events/day)
   
3. UI:
   - /dashboard/analytics page
   - Charts showing: Daily active users, Event counts, User growth
   - Date range picker (last 7/30/90 days)
   
4. Components:
   - Use Recharts library for charts
   - Create reusable StatCard component
   
Update all necessary files and create new ones as needed.

AI will create/modify 8-10 files in one go!

Quick Reference: Common Prompt Templates

Keep these templates handy for everyday AI coding:

UI Changes

Directory: apps/[app-name]
Route: /[route-path]
Position: [where on page]
Change: [what to modify]

Fix Errors

Directory: apps/[app-name]
Command: pnpm [lint/typecheck/test]
Result: [paste error output]

New Features

Directory: apps/[app-name]
Problem: [current situation]
Goal: [desired outcome]
Constraints: [requirements]

Code Review

Review the changes in [file-path]:
- Check for type safety issues
- Verify error handling
- Ensure consistent code style
- Suggest performance improvements

Refactoring

Directory: apps/[app-name]
File: [file-path]
Current: [describe current implementation]
Refactor to: [describe target state]
Keep: [what should not change]

Learning Resources

Cursor Docs: cursor.sh/docs
GitHub Copilot: github.com/features/copilot
Prompt Engineering: Learn prompting
ProductReady Examples: See /spec/ folder for real product specs

Next Steps

Start small: Customize colors or text content
Build one feature: Follow Example 1 above
Iterate: Ask AI to improve what it generated
Learn patterns: Study the code AI writes

Remember: AI is a tool, not magic. You still need to:

✅ Review code before running it
✅ Test features thoroughly
✅ Understand what the code does (ask AI to explain!)
✅ Version control (git commit frequently)

Ready to ship? Let AI do the heavy lifting! 🚀

AI Coding with ProductReady

On this page