What actually happens when you type a prompt

If you have never used an AI code builder before, the whole thing can feel like magic or nonsense, depending on your expectations. So let me demystify it.

You type a description of the app you want. VULK sends it to one of 16 AI models (you choose which one), wrapped in a carefully engineered system prompt that teaches the model how to structure a proper React project. The model streams back a plan, then generates files one by one. VULK compiles those files on a remote server and renders the running app in a preview iframe. The whole process takes 30 to 90 seconds depending on complexity.

The result is not scaffolding. It is not boilerplate. It is a complete project with routing, components, state management, Tailwind CSS styling, and realistic mock data -- ready to preview, iterate on, and deploy.

Here is how to get the most out of it.

What makes VULK's React output different

Before we get into prompts, I want to explain the technical choices I made for VULK's React generation, because they matter.

Vite, not Create React App. CRA is effectively abandoned. Vite is the modern standard -- faster builds, better tree-shaking, native ESM support, and a production build that actually optimizes your code. Every VULK-generated React project uses Vite as the build system.

Tailwind CSS by default. Utility-first CSS means the generated code is portable, customizable, and does not depend on a component library's design system. You can change any visual aspect with a follow-up prompt.

Proper project structure. VULK does not dump everything into App.tsx. You get src/pages/ for route components, src/components/ for reusable UI, src/data/ for mock data, and a tailwind.config.js with your requested color scheme. The structure scales from a simple landing page to a multi-page SaaS dashboard.

Production-grade dependencies. React Router for routing, Recharts for charts, Lucide React for icons. These are not toy libraries. They are what professional React developers actually use.

Writing a prompt that works

The quality of your prompt directly determines the quality of the output. I have seen thousands of generated projects at this point, and the pattern is clear: specific prompts produce good apps, vague prompts produce generic ones.

Bad prompt:

Build me a task manager.

This gives the model almost nothing to work with. You will get a generic to-do list with default colors.

Good prompt:

Build a task management app with a dark sidebar navigation, a Kanban board view with drag-and-drop columns (To Do, In Progress, Done), task cards showing title, assignee avatar, priority badge, and due date. Use a dark theme with purple accent colors. Include a top search bar and a "New Task" modal.

This specifies layout (sidebar + main content), the primary feature (Kanban board), data shape (title, assignee, priority, due date), interaction patterns (drag-and-drop, modal), and visual style (dark theme, purple).

Advanced prompt:

Build a personal finance tracker with three pages: Dashboard, Transactions, and Settings. The Dashboard shows total balance, income vs expenses bar chart (use Recharts), and recent transactions. The Transactions page has a filterable data table with columns for date, description, category, amount, and type. Include an "Add Transaction" modal. Settings has profile form and category management. White theme with green for income and red for expenses. Sidebar navigation with icons.

This defines page structure, chart library, data schema, and color semantics. VULK generates a multi-page React Router app with all of it wired together.

The generation process

When you submit your prompt, here is what you see:

First, a plan appears -- a numbered list of steps the AI will execute. This is not just for show. The plan keeps the generation organized and prevents the model from losing track of the architecture midway through.

Then files start generating one by one. You can watch them appear in real time in the file tree on the left side of the editor.

A typical project includes:

• index.html -- Entry point with meta tags and font imports
• src/main.tsx -- React root with StrictMode and BrowserRouter
• src/App.tsx -- Top-level component with route definitions
• src/pages/ -- One component per page
• src/components/ -- Reusable UI components
• src/data/ -- Mock data with realistic content
• tailwind.config.js -- Custom theme matching your color requests
• package.json -- Dependencies

Using the live preview

As files generate, the preview panel updates automatically. You do not need to wait for generation to finish. The preview runs on a remote server -- it is the actual compiled application in an iframe, not a screenshot or mockup.

The preview is fully interactive. Click buttons, navigate between pages, fill out forms, test responsive behavior. Use it to identify what needs changing before writing your next prompt.

Iterating with follow-up prompts

The first generation is rarely perfect, and that is by design. VULK is built for iterative refinement. After reviewing the preview, send targeted follow-up messages:

Add a dark mode toggle to the Settings page. Persist the preference in localStorage.

Replace the bar chart on the Dashboard with a line chart. Add a date range selector with 7 day, 30 day, and 90 day options.

The sidebar should collapse to icons-only on screens below 768px. Add a hamburger menu button.

Each follow-up generates only the files that need to change. VULK performs surgical edits, preserving everything else. This is important -- you are not regenerating the entire project with every message.

You can also fix bugs:

The modal does not close when I click outside it. Add an overlay click handler.

Or request new features:

Add CSV export to the Transactions page. Download all visible rows as a .csv file.

Working with the code directly

The left sidebar shows every file in your project. Click any file to view and edit its source code directly. This hybrid approach -- AI generation plus manual tweaks -- is often the fastest way to get exactly what you want.

I built VULK this way intentionally. It is not a black box. The code is standard React, standard TypeScript, standard Tailwind. If you know React, you can read, understand, and modify everything the AI produces. And if you do not know React yet, the generated code is a genuinely useful learning resource because it follows real-world patterns.

Deploying to production

Once your app looks right, deploying takes one click. Hit the Deploy button in the toolbar. VULK builds your app via Vite, uploads the static output to Cloudflare Pages, and gives you a live URL.

The deployed app runs on Cloudflare's global CDN -- 300+ edge locations. The URL format is your-project-name.pages.dev, and you can connect a custom domain later.

Redeployment works the same way. Make changes, click Deploy, new version is live within seconds.

Prompt patterns that consistently work

After watching thousands of generations, certain patterns always produce better results:

Specify the layout structure. "Sidebar navigation on the left, main content on the right" gives the model a clear framework.

Name your pages explicitly. "Three pages: Home, Products, and Cart" becomes route definitions and navigation items.

Describe the data shape. "Each product has a name, price, image URL, category, and stock count" tells the model exactly what fields to include in components and forms.

Reference specific libraries. "Use Recharts for charts" or "Use Framer Motion for page transitions" controls dependency choices.

State the color scheme. "Dark theme with cyan accents" prevents default blue themes you will want to change anyway.

What you cannot do (yet)

If your app needs a real backend with a database, you can enable Backend Mode, which generates a PostgreSQL-backed API alongside your frontend. The backend runs on VULK's infrastructure -- you cannot deploy it to your own server yet. Authentication uses VULK's built-in auth system. External auth providers (Firebase, Auth0, Supabase) are not supported in generated projects.

These are real limitations and I want to be upfront about them. We are working on self-hosted backend deployment, but it is not ready.

Getting started

The loop is simple: write a specific prompt, review the preview, iterate with follow-ups, deploy. The more specific your initial prompt, the fewer iterations you need.

Start at vulk.dev. Builder plans start at $19.99/mo, with a trial from $1.99.