Back to Portfolio
01PixelForge

Screenshot to Code AI

Next.jsTypeScriptTailwind CSSAWS AmplifyClaude AI
Added May 30, 2026
Screenshot to Code AI screenshot 1
Screenshot to Code AI screenshot 2
Screenshot to Code AI screenshot 3
View on GitHubLive Demo

About this project

Upload a screenshot of any web UI and get clean, production-ready HTML+CSS or React components in seconds. Powered by Claude AI with live streaming output — code appears character by character as it generates. New accounts get 50 free credits with no credit card required.

What I Learned

  • This was my first serious project that I actually deployed and finished. I've started plenty of projects before — but most of them never got completed, and almost none were ever shipped. With this one, I made a conscious decision early on to see it through to the end, no matter what.
  • The biggest area was AI. I learned how to take AI beyond just a chat tool and use it to produce something genuinely useful — converting a screenshot into real, working code. Understanding how to structure prompts, stream responses, and integrate Claude's API into a real product was a completely new skill that opened my eyes to how powerful this technology actually is when applied well.
  • I also learned authentication — login, signup, and session management — for the first time in a real deployed context. On top of that, building the credit system taught me how to tie user accounts to resource usage in a way that actually works in production.