diff --git a/prompts/01-create-todo.md b/prompts/01-create-todo.md index df66cbb..9d252aa 100644 --- a/prompts/01-create-todo.md +++ b/prompts/01-create-todo.md @@ -4,17 +4,28 @@ Copy and paste this into Claude Code: --- -Create a todo app as a single index.html file. Requirements: +Create a todo app as a single index.html file. -- Dark mode with a charcoal background (#1a1a2e or similar) -- Modern, clean design with good spacing and readable fonts +**Functionality:** - Add new tasks with a text input and an "Add" button (also works on Enter) -- Mark tasks as complete (strikethrough + muted color) -- Delete tasks with a small delete button +- Mark tasks as complete (strikethrough + muted color, completed tasks move to bottom) +- Delete tasks with a button that only appears on hover - All tasks saved to localStorage so they survive page refresh -- Smooth transitions when adding/completing/deleting tasks -- No external dependencies (no CDN links, no frameworks) -- The whole app in one file: HTML, CSS, and JavaScript together +- Show today's date in the header +- Show remaining task count at the bottom +- Smooth staggered fade-in animation when tasks render +- No external dependencies except one Google Font + +**Design (this matters, make it look like a real app):** +- Dark mode with a true warm dark background, NOT cold navy or blue-tinted +- Use Plus Jakarta Sans from Google Fonts +- Warm color palette: copper/peach for the primary accent, sage green for completed checkmarks, warm off-white for text +- Surface cards should be slightly elevated from background, not the same shade +- Grouped card layout: tasks share connected backgrounds with tight 2px gaps, rounded corners only on first and last item +- Custom checkbox with rounded corners (not circles) and an SVG checkmark +- Subtle radial gradient on the page background for depth +- Generous spacing, refined focus states with soft glow +- The app should feel premium and intentional, not like a tutorial demo --- @@ -28,10 +39,14 @@ Claude Code will: ## What to Expect Open `index.html` in your browser. You should see: -- A dark-themed input field at the top +- A warm dark-themed app with today's date in the header - Type a task and press Enter to add it -- Click a task to mark it done -- Click the delete button to remove it +- Hover over a task to see the delete button +- Click the checkbox to mark it done (it moves to the bottom) - Refresh the page and your tasks are still there -If something does not look right, tell Claude Code what is wrong. For example: "The delete button is too close to the task text, add more spacing." It will fix it. +If something does not look right, tell Claude Code what is wrong. For example: "The accent color is too bright, make it more muted." It will fix it. + +## Why the Design Instructions Matter + +Without specific design guidance, AI tools default to generic-looking output: cold blues, basic border-radius, system fonts. The design section in this prompt steers Claude Code toward something you would actually want to use. Try removing those lines and compare the result. diff --git a/prompts/02-add-categories.md b/prompts/02-add-categories.md index f86d367..8aab66d 100644 --- a/prompts/02-add-categories.md +++ b/prompts/02-add-categories.md @@ -6,15 +6,29 @@ Copy and paste this into Claude Code: Add color-coded categories to the todo app. Requirements: -- Four categories: Work (blue #5B9FD6), Personal (green #4DB8A4), Health (orange #E87020), Learning (purple #A87BDB) +**Functionality:** +- Four categories: Work, Personal, Health, Learning - When adding a task, show a dropdown to pick the category -- Each task shows a small colored dot or badge indicating its category -- Add filter buttons at the top: "All", "Work", "Personal", "Health", "Learning" +- Each task shows a small vertical color bar indicating its category +- Show the category name as a small uppercase label on each task +- Add pill-shaped filter buttons at the top: "All", "Work", "Personal", "Health", "Learning" - Clicking a filter shows only tasks in that category - "All" shows everything -- Active filter button should be visually highlighted +- Active filter button fills with the category color - Categories are saved in localStorage along with the tasks -- Keep the existing dark mode design + +**Design:** +- Use MUTED, sophisticated colors, not bright primaries: + - Work: dusty blue (#7C9CBF) + - Personal: sage green (#8BB896) + - Health: terracotta (#D4896A) + - Learning: lavender (#B08FCF) +- Category indicator should be a thin vertical bar (3px wide), not a dot +- Filter buttons should be pill-shaped with a border, not rectangular +- Active "All" filter uses warm white, category filters use their own color +- Custom styled select dropdown (hide native arrow, add SVG chevron) +- Group the search bar and filters into a toolbar card with subtle border +- Keep the existing warm dark design, do not introduce cold blues --- @@ -27,7 +41,7 @@ This is the agent loop in action: it does not start from scratch. It reads what ## What to Expect - A category dropdown appears next to the task input -- Colored filter buttons appear above the task list -- Each task shows its category color +- Pill-shaped filter buttons appear above the task list +- Each task shows its category as a colored vertical bar and small label - Switching filters instantly shows/hides tasks - Old tasks (without categories) still work