Get Instant Access
Enter your details to unlock the complete guide and start building your first app this weekend.
Make It Yours
8 prompts to transform your todo app from tutorial to personal.
YOUR APP SHOULD LOOK LIKE YOU BUILT IT
Right now, your todo app works. But it looks like everyone else's todo app.
These 8 prompts will make it uniquely yours. Pick one, pick all eight, or mix and match.
This is where you stop following instructions and start creating.
Pro tip: Add ONE customization at a time. Test it. Commit to git. Then add the next one. Don't try to do all 8 at once.
CUSTOMIZATION 1: Add Categories With Color Coding
What this adds: Users can assign categories to todos (Work, Personal, Urgent) with color-coded labels.
Why it's useful: Helps organize todos visually at a glance.
Copy this prompt:
Add categories to my todo app with these requirements:
1. Users can create custom categories (e.g., "Work", "Personal", "Urgent")
2. Each category has a color
3. When adding a todo, users select a category
4. Todos display with a colored tag showing their category
5. Users can filter todos by category
Make it look clean and professional. Use the shadcn/ui Badge component for the tags.
Break this into steps and ask for my approval before each change.Bonus: Once this works, you can ask Claude to add "Archive completed todos by category" or "Category-based statistics."
CUSTOMIZATION 2: Add Dark Mode Toggle
What this adds: A toggle button that switches between light and dark themes.
Why it's useful: Looks professional and respects user preferences (especially at night).
Copy this prompt:
Add a dark mode toggle to my app:
1. Add a moon/sun icon button in the top right
2. Clicking it switches between light and dark themes
3. Remember the user's preference (use localStorage)
4. Make sure all components look good in both modes
5. Use smooth transitions when switching
Follow Next.js and Tailwind best practices for dark mode.
Show me the plan first, then we'll implement it step by step.This teaches you: Theme management, local storage, and state persistence—skills you'll use in every future app.
CUSTOMIZATION 3: Make It Look Like An App You Love
What this adds: A visual style based on apps you already like.
Why it's powerful: You don't need to be a designer. Let Claude learn from great design.
How to do this:
- Find 2-3 apps or websites with design you love
- Take screenshots of their key screens
- Note what you like about each (colors? spacing? buttons? layout?)
- Use the prompt below
Copy this prompt:
I want to redesign my todo app inspired by these apps:
[Attach or describe 2-3 screenshots]
What I like about them:
- App 1: [e.g., "Clean, minimal, lots of white space"]
- App 2: [e.g., "Smooth animations, rounded corners"]
- App 3: [e.g., "Calm blue color palette"]
Create a visual style guide for my app that captures these vibes, then:
1. Update my color palette
2. Adjust typography (fonts, sizes, weights)
3. Refine spacing and layout
4. Add subtle animations
Keep my app's functionality exactly the same. Just make it look better.This is Vybe Engineering: You define the feeling. Claude handles the CSS.
CUSTOMIZATION 4: Add Due Dates And Sorting
What this adds: Users can set due dates and sort todos by priority.
Why it's useful: Turns your todo app into an actual productivity tool.
Copy this prompt:
Add due dates and sorting to my todo app:
Features:
1. Users can set an optional due date when creating/editing a todo
2. Todos show "Due in X days" or "Overdue by X days"
3. Add sorting options: "Due date", "Date added", "Alphabetical"
4. Highlight overdue todos in red
5. Use a clean date picker component (shadcn/ui has one)
Update the database schema if needed. Guide me through the changes step by step.Advanced add-on: Once this works, ask Claude to "Send email reminders for todos due tomorrow" (you'll need to connect an email service like Resend).
CUSTOMIZATION 5: Add A Progress Dashboard
What this adds: A dashboard showing completion stats and streaks.
Why it's motivating: Gamifies productivity. People love seeing their streaks.
Copy this prompt:
Add a progress dashboard to my todo app:
Create a new page (/dashboard) that shows:
1. Total todos completed (all time)
2. Completion rate (completed vs total)
3. Current streak (consecutive days with at least 1 todo completed)
4. This week's progress (simple bar chart)
5. Most productive day of the week
Make it visually appealing with cards and maybe a simple chart library.
Walk me through adding this feature step by step.This teaches you: Data aggregation, date manipulation, and basic data visualization—incredibly valuable skills.
CUSTOMIZATION 6: Add Subtasks (Nested Todos)
What this adds: Break big todos into smaller subtasks.
Why it's useful: Helps tackle big projects by breaking them down.
Copy this prompt:
Add subtasks (nested todos) to my app:
Features:
1. Users can add subtasks to any todo
2. Clicking a todo expands to show its subtasks
3. Each subtask has its own checkbox
4. Parent todo shows "2/5 subtasks complete"
5. Parent todo auto-completes when all subtasks are done
This requires updating the database schema. Guide me through:
1. Database changes
2. UI updates
3. Logic for parent-child relationships
Break it into clear steps.This teaches you: Hierarchical data structures and recursive components—advanced concepts made simple by Claude.
CUSTOMIZATION 7: Add Drag-And-Drop Reordering
What this adds: Drag todos to reorder them by priority.
Why it feels pro: Tactile interaction makes your app feel polished.
Copy this prompt:
Add drag-and-drop reordering to my todo list:
Requirements:
1. Users can drag todos to reorder them
2. Order persists in the database
3. Smooth drag animation
4. Works on desktop (touch support is bonus)
Use a library like dnd-kit or react-beautiful-dnd to make this easier.
Guide me through:
1. Installing the library
2. Adding drag functionality
3. Updating the database to store order
Make it feel smooth and professional.This teaches you: Working with third-party libraries and creating interactive UIs.
CUSTOMIZATION 8: Add Collaboration (Share Your List)
What this adds: Share your todo list with someone else (like a project partner or roommate).
Why it's powerful: Turns your solo app into a collaborative tool.
Copy this prompt:
Add collaboration features to my todo app:
Features:
1. Users can invite others by email
2. Invited users can view and edit shared todos
3. Show who completed each todo (avatar + name)
4. Real-time updates when someone adds/completes a todo (optional, but cool)
This is complex. Break it into phases:
- Phase 1: Invite system and permissions
- Phase 2: Shared todo visibility
- Phase 3: Real-time updates (if we want it)
Guide me through Phase 1 first. We'll decide on the others later.This is advanced: You're building a multi-user collaborative app. This single feature teaches you 80% of what you need to build a SaaS product.
MIX AND MATCH
You don't need to add all 8 customizations. Pick the ones that excite you:
If you want to learn design:
Try #2 (Dark Mode) and #3 (Style from apps you love)
If you want to learn features:
Try #1 (Categories), #4 (Due dates), #6 (Subtasks)
If you want to learn advanced concepts:
Try #5 (Dashboard), #7 (Drag-drop), #8 (Collaboration)
If you want to ship something unique fast:
Try #3 only. A beautifully designed basic app beats an ugly feature-packed app.
Here's the secret: each customization teaches you skills you'll use in every future app.
Categories → You'll need this in e-commerce sites (product categories)
Dark mode → You'll need this in every modern app
Due dates → You'll need this in booking systems, calendars, reminders
Dashboard → You'll need this in analytics tools, admin panels
Subtasks → You'll need this in project management, course builders
Drag-drop → You'll need this in kanban boards, form builders
Collaboration → You'll need this in... basically any SaaS product
You're not just customizing a todo app. You're building your developer toolkit.
Pick one. Build it. Ship it. Share it.
Then come back and pick another.