How to Write Effective Prompts for Web Apps
The best Div-idy prompts are specific. The more clearly you describe the layout, features, data, and behavior, the better the generated HTML, CSS, and JavaScript will be.
Quick Answer
Write effective prompts by being specific about: what you’re building, what it should look like, what features it needs, what data it uses, and how it should behave. If something matters, say it in the prompt.
What “Be Specific” Means
“Build me a task app.”
“Build a responsive task manager with add/edit/delete tasks, status (Todo/In Progress/Done), due dates, a filter bar, and localStorage persistence. Show a dashboard summary at the top and highlight overdue tasks in red.”
Prompt Checklist
- Goal: What are you building and who is it for?
- Pages: One page or multiple pages? (dashboard, admin, settings)
- Layout: Header, sidebar, cards, table, tabs, modal dialogs, etc.
- Features: CRUD, search, filters, sorting, login, roles, export, etc.
- Data: What fields exist? Provide a sample record or table.
- Storage: localStorage or database? Which tables/collections?
- Rules: validations, required fields, edge cases, empty states.
- Styling: modern, minimal, playful, dark mode, brand colors, spacing.
Copy-Paste Prompt Templates
Template: Simple App (localStorage)
Use this when you want a quick prototype without a database.
Build a responsive single-page web app called [APP NAME].
Goal:
- [What the app does in 1 sentence]
UI Layout:
- Header with title
- Main area with [cards/table/list]
- Form section with inputs: [field1, field2, field3]
- Buttons: [primary actions]
- Include empty states and loading states
Features:
- Add / edit / delete items
- Search by [field]
- Filter by [field]
- Sort by [field]
- Save all data in localStorage
Data model:
- Each item has: { id, [field1], [field2], [field3], createdAt }
Behavior rules:
- Validation: [required fields], show inline error messages
- Confirm before delete
- Show success toast after save
Style:
- Clean modern UI, responsive, accessible labels, nice spacingTemplate: Database App (CRUD)
Use this when you want real stored data and an admin UI.
Build a responsive CRUD web app using my Div-idy database.
Database:
- Table/collection name: [NAME]
- Fields:
- [field1] (type: text)
- [field2] (type: number)
- [field3] (type: date)
- [field4] (type: boolean)
Example record:
[field1]: "Example value"
[field2]: 42
[field3]: "2026-02-10"
[field4]: true
UI Layout:
- Table view of records with search + filters
- "Add New" button opens a modal form
- Edit button per row
- Delete button per row (confirm first)
Features:
- Create, read, update, delete records
- Search by [field]
- Filter by [field]
- Sort by [field]
- Show loading and error states
Style:
- Clean dashboard UI with cards, subtle shadows, responsive layoutTemplate: Add AI to an App
Use this when you want an AI assistant inside the UI.
Add an AI chatbot helper to this project.
Chat UI:
- Floating button bottom-right opens/closes panel
- Message bubbles, timestamps, typing indicator
- Clear chat button
What the AI should do:
- Answer questions about: [your topic]
- Use this context (paste it below):
[PASTE CONTEXT HERE]
Behavior:
- If the answer isn’t in the context, say "I’m not sure" and suggest 3 questions
- Keep answers short and helpful
- Provide links/buttons if relevant
Style:
- Match the app’s design, responsive, accessibleCommon Mistakes
- Too vague: “Make a website” without features or layout.
- No data model: not describing fields or example data.
- No rules: missing validation, empty states, or edge case behavior.
- One giant paragraph: use headings/bullets so the AI can follow it.