AI Vibe Coding Tools
A one-stop visual directory from idea and design to code, payments, deployment and DNS.
Collection guide
From prompt to production
Vibe coding is no longer limited to generating a component. A modern AI-assisted workflow can move from product framing and interface design through image generation, application code, data, payments and a live domain without leaving the browser for long.
This collection maps that end-to-end toolchain. It is organized by the job each product performs, so you can use it as a visual landscape, a stack-planning checklist or a source of accurate logos for an article about AI-native product development.
A typical workflow
- Shape the interface in Figma, Canva or Webflow.
- Produce visual assets with Midjourney, Ideogram, DALL·E, Flux or Adobe Firefly.
- Generate and refine the application with Cursor, Windsurf, Claude, GitHub Copilot, Lovable, v0 or Replit.
- Connect automation, authentication and data through n8n, Supabase, Neon, PlanetScale or Firebase.
- Add commerce with Stripe, PayPal or Shopify.
- Deploy on Vercel, Netlify or Railway, then manage edge delivery and DNS with Cloudflare.
Choosing tools responsibly
The presence of a product here is not a ranking or endorsement. Capabilities, pricing and data policies change quickly, so verify current terms before committing production data or customer workflows. The collection focuses on recognizable products with useful visual identities and will be revised as the ecosystem changes.
