Building a Browser-Based Pixel Art Tool with Gemini

Source: Dev.to

Overview

This is a submission for the Built with Google Gemini: Writing Challenge. I built Gradecraft, a clean and simple 16×16 pixel art creator that runs directly in the browser.

Goals

• Create a smooth pixel‑drawing experience
• Keep the UI minimal
• Allow exporting without gaps or visual glitches
• Make it beginner‑friendly but still polished

How Gemini Helped

Google Gemini acted like a thinking partner rather than just a code generator. I used Gemini to:

• Debug CSS grid behavior
• Refine canvas export logic
• Optimize UI interactions
• Improve project structure

Live Demo

https://rohan-shridhar.github.io/gridcraft/

Features

• Draw on a 16×16 grid
• Change colors instantly
• Erase pixels
• Download artwork as a clean .png (no grid borders, no spacing issues)

The downloaded image renders exactly as drawn—no gaps between cells. Solving this required careful problem‑solving around:

• Grid spacing
• Cursor size
• Border radius
• Export rendering

Development Process

Instead of trying to build everything perfectly at once, I followed an iterate → test → refine workflow, which proved far more effective.

What Worked Well

• Fast debugging assistance
• Clear explanations of CSS and grid behavior
• Helpful suggestions for structuring logic
• Great for reorganizing messy thoughts

Areas Requiring More Effort

• Needed to refine prompts multiple times
• Some UI suggestions required manual adjustment

Overall, Gemini felt less like “generate everything” and more like a co‑builder that helped refine the project.

Conclusion

Gradecraft started as a small idea and is now a working creative tool—deployed, usable, and something I’m proud to ship. If you try it, I’d love your feedback. The project is open source on GitHub.