Everything you need to know to get started with Kodlada
Sign up for free to get 50 credits and access to the AI Builder, Catalogue, and Playground.
In the AI Builder, describe the component or page you need. Be specific: "a dark mode pricing table with 3 tiers and hover effects" works better than "pricing page".
Click Generate. If it's not perfect, describe what to change in the chat. The AI remembers context and can iterate on its previous output.
Export your code to HTML or framework components. Publish to the catalogue to share with others, or keep it private in your workspace.
Generate components and full pages from natural language descriptions. Supports HTML, CSS, JavaScript, Three.js, GSAP, and more.
CodePen-style editor with split panes for HTML, CSS, and JS. Live preview updates as you type. Fork components to customize.
Generate up to 3 different design variations at once. Each variation costs +3 credits but saves time exploring options.
Enable "All Devices" mode for responsive designs that work on mobile, tablet, and desktop with proper breakpoints.
Add Supabase or Firebase integration to your generated code. Perfect for forms, auth flows, and dynamic content.
Export to HTML, React, Vue, or Svelte. Pro users get all framework exports with proper component structure.
| Action | Cost |
|---|---|
| Base AI Generation | 10 credits |
| + Mobile-First Responsive | +2 credits |
| + Database Integration | +5 credits |
| + Extra Variation (each) | +3 credits |
Example: A responsive page with 3 variations and Firebase = 10 + 2 + 5 + 6 = 23 credits
Be Specific About Design
"Dark theme with purple accents, glassmorphism cards" beats "nice looking"
Mention Interactions
"Hover effects on cards, smooth scroll to sections" gets you interactive components
Use Keywords for Advanced Effects
Words like "3D", "WebGL", "particles", "parallax" trigger advanced techniques with Three.js and GSAP
Request Full Pages When Needed
"Full landing page with hero, features, pricing, and footer" ensures you get all sections
Our support team is here to assist you
Contact Support