I vibe-coded a Twitter card generator in 2 hours with Google Antigravity

#webdev #javascript #showdev #buildinpublic

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 / html2canvas for 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?