50 lines
2.3 KiB
Markdown
50 lines
2.3 KiB
Markdown
# Prompt 01: Create the Todo App
|
|
|
|
Copy and paste this into Claude Code:
|
|
|
|
```
|
|
Create a todo app as a single index.html file.
|
|
|
|
Functionality:
|
|
- Add new tasks with a text input and an "Add" button (also works on Enter)
|
|
- 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
|
|
- 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
|
|
```
|
|
|
|
## What Happens
|
|
|
|
Claude Code will:
|
|
1. Create `index.html` with embedded CSS and JavaScript
|
|
2. Ask for your permission before creating the file
|
|
3. You approve, and the file appears in your folder
|
|
|
|
## What to Expect
|
|
|
|
Open `index.html` in your browser. You should see:
|
|
- A warm dark-themed app with today's date in the header
|
|
- Type a task and press Enter to add 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 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.
|