All projects · SaaS Product Tools
AI UI Generator — Production-Ready Code & Sandboxed Live Preview Dashboard
A clean developer dashboard that treats the AI like a frontend engineer by cleanly decoupling prompt creation, code generation, and sandboxed…
A clean developer dashboard that treats the AI like a frontend engineer by cleanly decoupling prompt creation, code generation, and sandboxed preview rendering. Features multi-framework targeting (React TSX, Next.js, HTML/CSS, Tailwind), design style presets (SaaS, Dashboard, Modern, Glassmorphism, Minimal), editable code editor with line numbers, responsive viewport previews (Desktop, Tablet, Mobile), export tools, and persistent localStorage history.
- Decoupled 3-engine architecture: Prompt Creation Engine, Code Generation Engine, and Preview Rendering Engine
- Multi-framework selector supporting React (TSX), Next.js, HTML / CSS, and Tailwind CSS with dynamic file tabs
- Design style presets (SaaS, Dashboard, Modern, Glassmorphism, Minimal) and toggleable options (Tailwind, animations, responsiveness)
- Interactive code editor with line numbers, syntax tabs (Code, Tailwind Config, Notes), and live two-way preview synchronization
- Responsive live preview sandbox with Desktop (100%), Tablet (768px), and Mobile (375px) viewport modes
- Persistent localStorage history carousel with click-to-load restoration, copy code, and file download
Built with: Vanilla JavaScript, React JSX / TSX, Tailwind CSS CDN, OpenAI API, Sandboxed Iframe, localStorage, CSS Grid / Flexbox, Google Fonts (Sora, Outfit, Chivo Mono)