Development Process Documentation

A Meta-Commentary on AI-Assisted "Vibe Coding"

Project Overview

This handwriting practice generator was built using an iterative, feedback-driven development process with Claude Code. The approach demonstrates how to effectively collaborate with AI agents to build real-world applications through incremental refinement.

9
Feedback Iterations
~2 hrs
Total Dev Time
1
HTML File
100%
Client-Side

AI Context Usage

The entire development process used 106k out of 200k tokens (53%) from Claude Sonnet 4.5. This includes all conversations, code generation, iterations, and this documentation.

2.9k
System Prompt (1.4%)
14.8k
System Tools (7.4%)
43.4k
Messages (21.7%)
45k
Autocompact Buffer (22.5%)

Model: claude-sonnet-4-5-20250929
Remaining capacity: 94k tokens (47% available)

Process Documentation

01. Initial Thoughts
Original problem statement and vision
02. Clarifying Questions
Discovery phase with Q&A
03. Product Requirements
Complete PRD for implementation
04. Feedback Round 1
Print preview & font issues
05. Feedback Round 2
Remove CSS guide lines
06. Feedback Round 3
Padding & font size adjustments
07. Feedback Round 4
Fix positioning with padding
08. Feedback Round 5
UX improvements for print button
09. Feedback Round 6
Open Graph meta tags

The "Vibe Coding" Process

Rather than attempting to specify everything upfront, this project used an iterative, test-and-refine approach:

Step 1: Capture the Vision
Started with raw thoughts about the problem - teaching values and improving handwriting through disciplinary sentence writing.
Step 2: Product Owner Mode
Used Claude as a product owner to ask clarifying questions, uncovering requirements like repetition ranges, font sizes for different ages, and device support.
Step 3: Generate PRD
Created a comprehensive Product Requirements Document that served as a blueprint for development.
Step 4: Rapid Prototyping
Built the initial version quickly - a working prototype with all core features in one go.
Step 5: Iterative Refinement
Through 6 feedback rounds, refined the implementation:
  • Fixed print preview functionality
  • Integrated custom handwriting font (KGPrimaryDotsLined.ttf)
  • Adjusted layout structure (all traced lines, then one practice line)
  • Removed redundant CSS guide lines (font has them built-in)
  • Tuned spacing and font sizes for different age groups
  • Switched from fixed heights to padding-based layout
  • Improved UX with secondary-colored print button placement
  • Added social media meta tags
Step 6: Documentation
Created this meta-commentary to capture lessons learned and best practices.

What Worked Well

Areas for Improvement

Next Time, Do This Better:

Start with Visual Examples: Provide mockups or screenshots of what you want upfront. A picture is worth 1000 words, and would have eliminated several feedback rounds about layout and spacing.
Upload Assets Earlier: The KGPrimaryDotsLined.ttf font should have been provided in the initial thoughts or PRD phase, not after implementation started.
Batch Related Feedback: Some feedback rounds could have been combined (e.g., font size + padding adjustments). Test more thoroughly between feedback cycles.
Use a Staging Environment: Instead of viewing the live file, create a test/staging setup where you can preview changes before committing them.
Define "Done" Criteria: Establish acceptance criteria in the PRD (e.g., "Must fit 10 large-font lines on one US Letter page"). This prevents scope drift.
Consider Browser Testing Matrix: Specify target browsers upfront (Chrome, Safari, Firefox) to catch cross-browser issues earlier.
Plan for Print Early: Print-specific requirements should be first-class citizens in the PRD, not afterthoughts. Print CSS is tricky and deserves upfront attention.

Optimal Workflow for Next Project

1. Write initial thoughts (vision, problem, goals) 2. Gather or create visual references (mockups, examples) 3. Upload all assets (fonts, images, data files) 4. Have AI act as product owner → generate PRD 5. Review PRD, add acceptance criteria 6. Build v1 prototype 7. Test thoroughly in target environment 8. Batch feedback into logical groups 9. Iterate 2-3 times max 10. Document and ship

Key Takeaways

Final Thoughts

This project demonstrates that AI-assisted development isn't about replacing human judgment—it's about amplifying it. The human provides vision, taste, and quality standards. The AI provides rapid implementation and tireless iteration.

The "vibe coding" approach works because it mirrors how humans actually think: start with a fuzzy idea, refine through conversation, prototype quickly, and polish through iteration. The key is maintaining a tight feedback loop and being specific about what needs to change.

Total development time was approximately 2 hours from initial thought to production-ready application, including documentation. Traditional development would have taken days or weeks.

← Back to Handwriting Practice Generator