Screenshot to Code — Instantly.
Upload any web UI screenshot and get pixel-accurate HTML+CSS or React components in seconds, powered by Claude AI.
PixelForge takes a screenshot of any web UI and converts it into clean, production-ready code. Drop in a screenshot of a dashboard, landing page, or component — get back structured HTML+CSS or a React component ready to use in your project.
- Two output formats — HTML+CSS (separate files) or React + Tailwind
- Streaming output — code appears character by character as it generates
- Web UI only — optimized for screenshots of websites and web apps, not photos
Click Sign In → Sign Up on the app. New accounts receive 50 free credits automatically — no credit card required. Each conversion uses roughly 5–15 credits depending on output size.
Paid plans are not available yet. Early users will get priority access when they launch.
- Click Upload Image on the main page and select a screenshot file (PNG, JPG, WebP)
- Or drag and drop an image file anywhere onto the page
- Or press
Ctrl+Vto paste a screenshot directly from your clipboard
Web UI screenshots only. PixelForge is tuned for screenshots of web apps and websites. Photos, diagrams, and non-web content will not produce useful results.
Once your image appears in the Workspace panel, select a format using the toggle in the top-left:
| Format | What you get | Best for |
|---|---|---|
| HTML + CSS | index.html + styles.css |
Static pages, quick prototypes |
| React | Component.jsx with Tailwind classes |
React projects |
Click Convert to Code. The right panel streams the generated code live. When conversion finishes:
- Use the tabs (
index.html/styles.cssorComponent.jsx) to view each file - Click Preview (HTML+CSS mode only) to see a live rendered preview inside the panel
- Click Copy to copy the current file to your clipboard
Paste the output into your codebase. The HTML+CSS output is fully self-contained — open index.html directly in a browser. The React output assumes Tailwind CSS is already configured in your project.
| Event | Credits |
|---|---|
| Sign up | +50 free |
| Each conversion | ~5–15 (varies by complexity) |
| Paid top-ups | Coming soon |
Your credit balance is shown in the navbar at all times once signed in.
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Auth | AWS Amplify Gen 2 (Cognito) |
| Database | AWS Amplify Gen 2 (DynamoDB via AppSync) |
| AI | Anthropic Claude — streaming NDJSON |
| Fonts | Syne · Outfit · JetBrains Mono |
# Install dependencies
npm install
# Start the dev server
npm run devOpen http://localhost:3000. You'll need an ANTHROPIC_API_KEY set in your environment. AWS Amplify backend resources (auth, database) are defined in amplify/.
PixelForge is 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. And I did.
Building this taught me a lot.
The biggest area was AI. I learned how to take AI beyond just a chat tool and use it to produce something genuinely useful — in this case, 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 for me, and it 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 (a token-like mechanism where each conversion costs credits) taught me how to tie user accounts to resource usage in a way that actually works in production.
Going forward, I want to keep pushing deeper into AI-powered products. PixelForge showed me what's possible, and I'm excited to keep building.
Built by Paul Jison · © 2026 PixelForge