How to convert design to code? (Vibecoding)
I’m Vishnu, this is the 4th episode of the video series crafted for normies like me who wants to learn to build software products (chrome extension) with "AI" without experience in coding.
In this video I'm explaining how to vibecode your design to a functional chrome extension ui using html, javascript, tailwind and react vite.
Subscribe to the channel & enable notification to be notified on next episode releases.
_________________________________
Series Playlist:
• How to vibecode chrome extensions with AI ...
_________________________________
v0 chats:
Extension Mockup on v0: https://v0.app/chat/chrome-extension-...
Landing Page Mockup on v0:
https://v0.app/chat/you-tube-learning...
Pricing Page Mockup on v0:
https://v0.app/chat/pricing-page-crea...
_________________________________
Tools used:
Design tool - https://figma.com/
Design System - https://ui.shadcn.com/ (for ui components)
Icon library - https://lucide.dev/
Main AI code editor - https://cursor.com/ (for building & managing code)
Substitute AI code editor - https://v0.app/
Ext-Framework - https://wxt.dev/ (for omni-compatible chrome extension)
Frontend Framework - https://vite.dev/
Database - https://supabase.com/ (for db hosting & management for free)
Backend - https://fastapi.tiangolo.com/ (for apis)
Cloud - https://cloud.google.com/ (for hosting backend)
Hosting - https://vercel.com/ (to host frontend for free)
Payment Gateway - https://www.paddle.com/ (best for indie developers)
_________________________________
My socials:
🔗 Discord Community: / discord
🔗 LinkedIn Newsletter: / the-product-prophet-7322954679242362880
_________________________________
#buildinpublic #indiehacker #softwareengineer #appdevelopment #startupjourney #productivityapps #aiapps #youtubeupdates #softwaretools #cursor #vibecoding #chromeextension #productmanagement