🎨 Gradecraft – A 16x16 Pixel Art Creator Built with Gemini
This is a submission for the Built with Google Gemini: Writing Challenge
What I Built with Google Gemini
I built Gradecraft, a clean and simple 16x16 pixel art creator that runs directly in the browser.
The goal was simple:
- Create a smooth pixel drawing experience
- Keep the UI minimal
- Allow exporting without gaps or visual glitches
- Make it beginner-friendly but still polished
Google Gemini wasn’t just generating code — it acted like a thinking partner.
I used Gemini to:
- Debug CSS grid behavior
- Refine canvas export logic
- Optimize UI interactions
- Improve project structure
Demo
🔗 Live Demo: https://rohan-shridhar.github.io/gridcraft/
Gradecraft allows you to:
- Draw on a 16×16 grid
- Change colors instantly
- Erase pixels
- Download your artwork cleanly in .png(no grid borders, no spacing issues)
The downloaded image renders exactly as drawn — no weird gaps between cells.
That detail took real problem-solving.
What I Learned
1. AI Is a Thinking Accelerator
When I asked vague questions, I got vague results.
When I asked precise technical questions, I got precise solutions.
2. UI Details Matter More Than You Think
Tiny things like:
- Grid spacing
- Cursor size
- Border radius
- Export rendering
These make or break the feel of a creative tool.
3. Iteration > Perfection
Instead of trying to build everything perfectly at once, I built → tested → refined.
That workflow worked far better.
Google Gemini Feedback
What worked well:
- Fast debugging help
- Clear explanation of CSS and grid behavior
- Helpful suggestions for structuring logic
- Great for restructuring messy thoughts
Where I needed more effort:
- I had to refine prompts multiple times
- Some UI suggestions needed manual adjustment
Overall, it felt less like “generate everything” and more like “co-build and refine.”
That’s the right way to use AI.
Final Thoughts
Gradecraft started as a small idea.
Now it’s a working creative tool — deployed, usable, and something I’m proud to ship.
If you try it, I’d love feedback.
And yes — it’s open on GitHub.
Top comments (1)
Great job on Gradecraft, Rohan 😀 I completely agree with your takeaway that Gemini works best as a 'co-build and refine' partner for UI details rather than just a blind code generator