I vibe-coded a Twitter card generator in 2 hours with Google Antigravity
Every time I finish building a side project or boilerplate, I end up wasting 15–20 minutes in Figma setting up OpenGraph preview images, Twitter launch cards, and Product Hunt banners. I wanted an instant, single-page
Every time I finish building a side project or boilerplate, I end up wasting 15–20 minutes in Figma setting up OpenGraph preview images, Twitter launch cards, and Product Hunt banners.
I wanted an instant, single-page web utility where I could type a project title, upload a screenshot, toggle developer themes, and export a crisp 1200x630 PNG immediately.
So I vibe-coded DevPoster using HTML5, Tailwind CSS, and JavaScript canvas export (html2canvas).
🛠️ The Problem
Creating social share graphics in heavy design tools takes too long when you're in the middle of launching a project. Most indie developers just end up dropping raw screenshots on Twitter, which drops engagement significantly.
💡 The Solution
A browser-based generator that turns metadata and screenshots into pixel-perfect 1200x630px cards with developer-focused dark themes in seconds—no design background or Figma setup required.
💻 Tech Stack & Implementation Details
- Frontend: HTML5, Tailwind CSS (loaded via CDN)
- Canvas Engine: Pure JS + HTML5 Canvas API /
html2canvasfor high- res PNG downloads - Deployment: Hosted static client-side app on Vercel
- AI Tooling: Built with Google Antigravity in roughly 2 hours
Everything runs client-side right in the browser, meaning card rendering and image export happen instantly without server-side image generation latency.
✨ Key Features
- 5 Developer Themes: SaaS Dark, Cyberpunk, Apple Glass, Minimalist Code, Vaporwave
- Live Styling Controls: Custom gradient color pickers & font selection (Sans, Mono, Display)
- Mockups & Badges: Tech stack badge generator & 3D browser frame mockups
- Instant Export: High-res PNG export (1200x630px optimized for X/Twitter & OpenGraph)
🚀 Try It Out
Check out DevPoster here:
https://prayutkapa.gumroad.com/l/devposter
(Available for a $6 launch special (usually $9) until 13th August 2026) — includes full hosted web access + downloadable offline HTML source file to run locally on your machine).
💬 Feedback & Feature Requests
I'd love to hear your thoughts! What specific theme presets or component layouts would you like to see added next?
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.