improve: bake design guidelines directly into prompts

Instead of requiring a plugin, prompts 01 and 02 now include
specific design instructions (warm palette, typography, spacing)
that produce premium-looking output by default.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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)
+**Functionality:**
-- Modern, clean design with good spacing and readable fonts
 - Add new tasks with a text input and an "Add" button (also works on Enter)
-- Mark tasks as complete (strikethrough + muted color)
+- Mark tasks as complete (strikethrough + muted color, completed tasks move to bottom)
-- Delete tasks with a small delete button
+- 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
+- Show today's date in the header
-- No external dependencies (no CDN links, no frameworks)
+- Show remaining task count at the bottom
-- The whole app in one file: HTML, CSS, and JavaScript together
+- 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
+- Hover over a task to see the delete button
-- Click the delete button to remove it
+- 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.

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
+- Each task shows a small vertical color bar indicating its category
-- Add filter buttons at the top: "All", "Work", "Personal", "Health", "Learning"
+- 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
+- Pill-shaped filter buttons appear above the task list
-- Each task shows its category color
+- 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