The latest articles on DEV Community by Payut Kapasuwan (@payut_kapasuwan_81aa627f2). https://dev.to/payut_kapasuwan_81aa627f2 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4070222%2F40014952-a7b4-4b1a-9825-730e4d9c7725.png https://dev.to/payut_kapasuwan_81aa627f2 en Payut Kapasuwan Tue, 11 Aug 2026 07:25:17 +0000 https://dev.to/payut_kapasuwan_81aa627f2/shipped-a-major-devposter-update-stop-spending-20-mins-in-figma-making-1200x630-opengraph-57na https://dev.to/payut_kapasuwan_81aa627f2/shipped-a-major-devposter-update-stop-spending-20-mins-in-figma-making-1200x630-opengraph-57na <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/payut_kapasuwan_81aa627f2/i-vibe-coded-a-twitter-card-generator-in-2-hours-with-google-antigravity-3hen" class="crayons-story__hidden-navigation-link">I vibe-coded a Twitter card generator in 2 hours with Google Antigravity</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/payut_kapasuwan_81aa627f2" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4070222%2F40014952-a7b4-4b1a-9825-730e4d9c7725.png" alt="payut_kapasuwan_81aa627f2 profile" class="crayons-avatar__image" width="96" height="96"> </a> </div> <div> <div> <a href="/payut_kapasuwan_81aa627f2" class="crayons-story__secondary fw-medium m:hidden"> Payut Kapasuwan </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Payut Kapasuwan <div id="story-author-preview-content-4355210" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/payut_kapasuwan_81aa627f2" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4070222%2F40014952-a7b4-4b1a-9825-730e4d9c7725.png" class="crayons-avatar__image" alt="" width="96" height="96"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Payut Kapasuwan</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/payut_kapasuwan_81aa627f2/i-vibe-coded-a-twitter-card-generator-in-2-hours-with-google-antigravity-3hen" class="crayons-story__tertiary fs-xs"><time>Aug 9</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/payut_kapasuwan_81aa627f2/i-vibe-coded-a-twitter-card-generator-in-2-hours-with-google-antigravity-3hen" id="article-link-4355210"> I vibe-coded a Twitter card generator in 2 hours with Google Antigravity </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " href="/t/showdev"><span class="crayons-tag__prefix">#</span>showdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/buildinpublic"><span class="crayons-tag__prefix">#</span>buildinpublic</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/payut_kapasuwan_81aa627f2/i-vibe-coded-a-twitter-card-generator-in-2-hours-with-google-antigravity-3hen#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> <span class="hidden s:inline">Add&nbsp;Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial crayons-icon c-btn__icon"> </span> <span class="bm-success crayons-icon c-btn__icon"> </span> </div> </div> </div> </div> </div> </div> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="https://dev-poster-weld.vercel.app/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">dev-poster-weld.vercel.app</span> </a> </div> </div> </div> buildinpublic showdev tools webdev Payut Kapasuwan Sun, 09 Aug 2026 20:50:04 +0000 https://dev.to/payut_kapasuwan_81aa627f2/i-vibe-coded-a-twitter-card-generator-in-2-hours-with-google-antigravity-3hen https://dev.to/payut_kapasuwan_81aa627f2/i-vibe-coded-a-twitter-card-generator-in-2-hours-with-google-antigravity-3hen <p>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. </p> <p>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.</p> <p>So I vibe-coded DevPoster using HTML5, Tailwind CSS, and JavaScript canvas export (<code>html2canvas</code>).</p> <p> <iframe src="https://www.youtube.com/embed/aRzpcVP9b7c"> </iframe> </p> <p>🛠️ The Problem</p> <p>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.</p> <p>💡 The Solution</p> <p>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.</p> <p>💻 Tech Stack &amp; Implementation Details</p> <ul> <li>Frontend: HTML5, Tailwind CSS (loaded via CDN)</li> <li>Canvas Engine: Pure JS + HTML5 Canvas API / <code>html2canvas</code> for high- res PNG downloads</li> <li>Deployment: Hosted static client-side app on Vercel</li> <li>AI Tooling: Built with Google Antigravity in roughly 2 hours</li> </ul> <p>Everything runs client-side right in the browser, meaning card rendering and image export happen instantly without server-side image generation latency.</p> <p>✨ Key Features</p> <ul> <li>5 Developer Themes: SaaS Dark, Cyberpunk, Apple Glass, Minimalist Code, Vaporwave</li> <li>Live Styling Controls: Custom gradient color pickers &amp; font selection (Sans, Mono, Display)</li> <li>Mockups &amp; Badges: Tech stack badge generator &amp; 3D browser frame mockups</li> <li>Instant Export: High-res PNG export (1200x630px optimized for X/Twitter &amp; OpenGraph)</li> </ul> <p>🚀 Try It Out</p> <p>Check out DevPoster here: <br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="https://dev-poster-weld.vercel.app/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">dev-poster-weld.vercel.app</span> </a> </div> </div> </div> <p>(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).</p> <p>💬 Feedback &amp; Feature Requests</p> <p>I'd love to hear your thoughts for further updates! What specific theme presets or component layouts would you like to see added next?</p> webdev showdev javascript buildinpublic