open/claude-code-first-project
1
0
Fork 0
Code Activity Actions

improve: bake design guidelines directly into prompts

Browse source 
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>
This commit is contained in:
Kjell Tore Guttormsen 2026-03-15 16:30:11 +01:00
commit 00488eb9a0
2 changed files with 48 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

39
prompts/01-create-todo.md
View file

@ -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.