AI Prompt Guide

The quality of your output depends on the quality of your input. This guide teaches you how to write prompts that produce stronger full-stack launches, not just prettier demos.

How the AI Agent Works

Kodeezly's code generation agent receives your prompt, builds a plan, then creates or edits files one at a time while you watch the live preview. It infers a domain brief, preserves the main workflow across follow-ups, and can scaffold deployable UI plus API-ready services.

The agent is conversational — you can ask follow-up questions, request changes, or undo anything with a simple message.

Writing Effective Prompts

Include the Product Brief

The most reliable prompts describe four things up front:

• Audience: who the product is for and what they are trying to accomplish.
• Workflow: the main path users must complete, such as booking, checkout, intake, or admin review.
• Trust cues: proof points, policies, roles, or status signals the UI needs to feel credible.
• Integrations and launch bar: auth, billing, storage, env vars, or any production constraint that should shape the first pass.

Be Specific

Instead of vague descriptions, tell the AI exactly what you want:

Describe Visual Design

The AI excels at visual design when you give it direction:

• Color palette: "Use a dark navy (#0f172a) background with cyan (#06b6d4) accents"
• Layout: "Two-column layout with a fixed sidebar and scrollable content area"
• Style: "Minimalist design with generous whitespace and subtle shadows"
• Effects: "Add glassmorphism cards, gradient borders, and smooth 300ms hover transitions"

Specify Functionality

Name the features you need explicitly:

• "Search bar that filters the product cards in real time"
• "Add to cart with a mini cart dropdown showing item count and total"
• "Contact form with name, email, and message fields with validation"
• "Dark/light mode toggle that persists through localStorage"
• "Auth flow, payment handoff, and deployment notes for required env vars"

Reference Real Products

Mentioning apps your audience knows helps the AI understand your vision:

• "Build a task manager like Linear with a kanban board view"
• "Create a landing page similar to Stripe's homepage"
• "Design a dashboard like Vercel's analytics page"

Follow-Up Prompts

After the initial generation, refine your project with targeted follow-ups. The AI remembers the full context of your conversation.

Quick Visual Edits

These are fast — the agent changes just 1-2 files:

• "Change the primary button color to green"
• "Make the hero text bigger"
• "Add more padding to the cards"
• "Remove the second testimonial"

Feature Additions

These take a bit longer as new components are created:

• "Add a mobile hamburger menu"
• "Create a FAQ accordion section below pricing"
• "Add a blog section with sample posts"
• "Add user authentication with login and signup pages"

Structural Changes

These involve larger refactors:

• "Convert to a multi-page app with React Router"
• "Add a backend API with auth, persistence, and env-var documentation"
• "Implement a complete shopping cart with checkout flow and order status states"

Tips & Tricks

1. One thing at a time: Ask for a single major feature per prompt. Stack multiple small requests in one prompt, but split large ones.
2. Attach images: Upload a screenshot or wireframe to show the AI exactly what you want. Click the attachment icon in the prompt box.
3. Use the plan: Before making changes, the AI explains its plan. Review it and redirect if needed before it starts coding.
4. Undo easily: Use version control to revert to any previous state. Every generation creates an automatic checkpoint.
5. Iterate quickly: The best apps come from 5-10 rounds of refinement, not one perfect prompt. Start broad, then refine.

Example Prompts

SaaS Landing Page

Create a modern SaaS landing page for a project management tool. Include a hero section with animated gradient background, feature grid with icons, pricing table with Free/Pro/Enterprise tiers, testimonials carousel, FAQ accordion, and a footer with newsletter signup. Use a dark theme with blue-purple gradients.

E-Commerce Store

Build an e-commerce product listing page with a grid of product cards showing image, title, price, and rating. Add a sidebar with category filters and price range slider. Include search functionality, add-to-cart buttons with a floating cart icon showing item count, and a responsive mobile layout.

Admin Dashboard

Create an admin dashboard with a collapsible sidebar navigation, stat cards for total users/revenue/orders, a line chart for revenue trends, a bar chart for monthly signups, a data table with pagination and search for recent orders, and a dark mode toggle. Use a dark theme with glassmorphism cards.