Writing Effective Prompts
Learn how to write prompts that generate better apps — from basic structure to advanced techniques.
Writing Effective Prompts
The quality of your prompt directly affects the quality of the generated app. Here's how to write prompts that produce great results.
Prompt Structure
A good prompt has three parts: what you're building, what features it needs, and how it should look.
Create a [type] for [purpose] with:
- [feature 1]
- [feature 2]
- [feature 3]
Style: [description]Basic vs Good vs Great Prompts
Landing Page
| Quality | Prompt | Result |
|---|---|---|
| Basic | "Make a website" | Generic page with placeholder content |
| Good | "Create a landing page for a coffee shop with hero, menu, and contact form" | Functional page with relevant sections |
| Great | "Create a landing page for an artisan coffee shop called 'Brew & Co'. Hero with large background image and tagline 'Roasted with intention'. Menu section showing 6 drinks with prices in a grid. About section with founder story. Contact form with name, email, message. Instagram feed section. Footer with hours, address, and social links. Warm earth tones, serif headings, clean modern layout." | Polished, production-ready page |
Dashboard
| Quality | Prompt |
|---|---|
| Basic | "Build a dashboard" |
| Good | "Build an admin dashboard with stats, table, and charts" |
| Great | "Build a project management dashboard. Top row: 4 stat cards (active projects, completed, team members, overdue tasks). Main area: data table with project name, status badge, assignee, due date, priority — sortable and searchable. Right sidebar: monthly completion chart (bar) and team workload chart (donut). Dark theme with purple accents." |
What to Include in Your Prompt
Always Mention
- App type — landing page, dashboard, SaaS app, mobile app, game
- Key features — what the app should do
- Number of pages/sections — helps VULK scope the generation
Mention When Relevant
- Design style — "minimal", "bold", "corporate", "playful"
- Color scheme — "dark theme", "blue and white", "earth tones", hex codes
- Data/content — "show 10 sample products", "use realistic team member names"
- Reference — "similar to Stripe's pricing page", "like the Notion sidebar"
- Authentication — "with user login and signup"
- Backend needs — "save data to database", "user profiles with settings"
Advanced Techniques
Upload a Screenshot
Upload a screenshot of a design you like — a Dribbble shot, competitor page, or wireframe. VULK uses it as visual reference alongside your text prompt.
Import from Figma
Paste a Figma link or upload a Figma export. VULK generates matching React components.
Iterative Building
Start with a simple prompt, then refine:
- "Create a blog platform with posts and categories"
- "Add user authentication with login and signup"
- "Add a rich text editor for creating posts"
- "Add comment system under each post"
- "Add admin panel to manage users and moderate comments"
This approach often produces better results than one massive prompt.
Reference Specific Technologies
- "Use shadcn/ui components"
- "Use a sidebar layout like Notion"
- "Add GSAP scroll animations"
- "Use a masonry grid for the gallery"
Token Efficiency
Each generation consumes credits based on tokens processed. To use credits efficiently:
- Don't repeat context — VULK remembers your project. Say "add a footer" not "in the coffee shop website I built with the hero section and menu, add a footer"
- Edit surgically — "Change the button color to blue" uses fewer credits than "Redesign the entire page but keep everything the same except make the button blue"
- Use direct code editing for small tweaks — changing a color in CSS uses zero credits
Prompts That Don't Work Well
| Prompt | Problem | Better Version |
|---|---|---|
| "Make it better" | Too vague | "Improve spacing, add hover states, and increase font contrast" |
| "Copy stripe.com exactly" | Copyright concern + too broad | "Create a SaaS landing page inspired by Stripe's clean layout with gradient hero, feature grid, and pricing table" |
| "Build me an Uber clone" | Too complex for one generation | Start with one screen: "Build a ride request screen with pickup/dropoff inputs, map preview, and vehicle type selector" |
| "Add AI" | Means nothing specific | "Add a chat interface that sends messages to an API endpoint and displays responses" |
Example Prompts Library
E-Commerce
"Create an online sneaker store. Homepage with hero banner, featured products carousel, category grid. Product page with image gallery, size selector, add to cart. Cart page with quantity adjustment and checkout button. Modern streetwear aesthetic with dark background and neon accents."
SaaS
"Build a project management tool. Dashboard with Kanban board (columns: To Do, In Progress, Review, Done). Each card shows title, assignee avatar, priority tag, due date. Sidebar with project list and team members. Top bar with search, notifications bell, and user avatar. Clean design with subtle shadows."
Portfolio
"Create a developer portfolio for 'Alex Chen'. Animated hero with name, role (Full-Stack Developer), and a terminal-style typing animation. Projects grid with hover effects showing live preview screenshots. Skills section with technology icons. Blog section with latest 3 posts. Contact form. Dark theme with green accent color (#0D9373)."