The Art of Prompting
Craftapp Prompting Guide
Master the language of Craftapp to build better applications—faster, with cleaner code, and greater creative control.
What is Prompting?​
Prompting is your primary method of communication with Craftapp. It is the mechanism through which you translate your vision into a functional application.
The quality of your prompts directly determines the quality of your output. Well-structured prompts lead to fewer iterations, fewer bugs, and a development process that feels like a seamless conversation.
Core Principles​
Effective prompting is built on three foundational pillars:
- Clarity: Say exactly what you want. Ambiguity forces the AI to guess, leading to results that miss the mark.
- Context: Explain the overarching goal, constraints, and environment. The AI cannot read your mind—you must set the stage.
- Iteration: Treat prompting as a dialogue. You don't need a perfect prompt on the first try; you need clear intent and a willingness to refine gradually.
Prompting Levels​
Level 1: The Foundation (Setup & Context)​
Always start here before diving into specific features.
| Bad Prompt | Good Prompt |
|---|---|
| "Landing page." | "Create a professional portfolio website with a hero section featuring a headline and CTA, a projects showcase, a resume section, and a contact page. The overall design should feel modern, minimal, and clean, using a muted color palette." |
| "E-commerce site." | "I need an e-commerce store for selling handmade candles. Include a product catalog, product detail page, shopping cart, and checkout flow. The target audience is premium buyers, so the design should be elegant." |
| "Make a dashboard." | "Create an analytics dashboard for a sales team. Include key metrics like total revenue, active deals, and conversion rate. Add a bar chart showing monthly performance and a table with recent transactions." |
Level 2: Execution & Iteration (Building Features)​
Break down large features into smaller, manageable steps.
| Bad Prompt | Good Prompt |
|---|---|
| "Make a social media site with login, posts, likes, and a feed." | Step 1: "Add a user registration and login page with email and password." Step 2: "Create a feed page that displays posts in neat cards, sorted from newest to oldest." Step 3: "Add a 'Like' button to each post that updates the like count without reloading the page." |
| "Build a project management tool." | Step 1: "Create a project creation form with name, description, and deadline fields." Step 2: "Display all projects in a grid view with status labels." Step 3: "Add the ability to click a project and view its detailed tasks." |
| "Add user profiles." | Step 1: "Create a profile page that displays the user's name, email, and profile picture." Step 2: "Add an edit profile form where users can update their information." Step 3: "Allow users to upload and change their profile picture." |
Level 3: Styling & Specifications (Design Precision)​
Move from vague descriptions to exact instructions using plain language.
| Bad Prompt | Good Prompt |
|---|---|
| "Make the subtitles light gray with some space." | "Set the subtitle color to a soft light gray, the text size to medium-large, and add a small gap below each subtitle. Use a clean, modern font throughout the app." |
| "Make the card look modern." | "Style the card with rounded corners, a soft shadow, and some internal spacing to give it a clean, elevated look." |
| "Add a nice button." | "Create a primary action button with a gradient color effect (from purple to blue), white text, medium padding, rounded edges, and a hover effect that makes it slightly darker when you mouse over it." |
| "Space things out better." | "Add comfortable spacing between each card in the grid. Increase the padding inside the main container so the content doesn't touch the edges." |
| "Change the colors." | "Use a dark background with light text for the entire app. Add a toggle switch in the top navigation to switch between dark and light modes." |
Level 4: Replication & Inspiration​
Leverage existing designs or concepts for faster results.
| Bad Prompt | Good Prompt |
|---|---|
| "Copy this site." | "Replicate this page exactly. Match the layout, spacing, colors, and fonts precisely. Use the same structure and ensure it works well on mobile devices too." |
| "Something like Twitter." | "Create a microblogging feed similar to Twitter's interface. Include a text box for posting, a feed of posts in chronological order, and profile pictures for each user. Adapt the color scheme to match our brand colors." |
| "Make it like Airbnb." | "Create a property listing page with a grid of cards, each showing a main image, title, price, and star rating. Include a sticky search bar at the top and a map view toggle. Adapt to our use case of vacation rentals." |
Debugging & Error Reporting​
When things go wrong, the way you report the issue determines how fast it gets fixed. You don't need to be technical—just describe what you see and what you expected to see.
| Bad Prompt | Good Prompt |
|---|---|
| "It's not working." | "When I click the 'Submit' button on the Contact form, nothing happens. I expected to see a success message or be taken to a thank you page." |
| "The date picker is wrong." | "When I select January 10, 2025, the system saves it as January 9, 2025. I think the time zone might be off. Here is a screenshot of what I selected and what was saved." |
| "The layout is broken." | "On my phone (small screen), the sidebar covers the main content instead of hiding. In a previous version (yesterday), it collapsed properly." |
| "Images don't load." | "The product images in the catalog are showing as broken icons. The image links look correct, but they're not displaying. This worked fine last week." |
| "Login is slow." | "The login process takes over 5 seconds to complete. It used to be instant. This started happening after we added the new user tracking feature." |
| "The button is missing." | "On the checkout page, the 'Place Order' button is not visible. I scrolled down and it's not there. In the previous version, it was at the bottom right of the page." |
Reference Previous Versions​
Craftapp.ai understands project history. Leverage this to track changes and restore functionality.
| Bad Prompt | Good Prompt |
|---|---|
| "Fix the image upload." | "In a previous version (from two days ago), pasting images worked perfectly. That behavior is now broken. Please restore that functionality without affecting the new crop feature." |
| "Go back to the old design." | "Revert the checkout page design to the version from last week. The current version has a confusing layout. Keep the new payment processing but restore the old visual design." |
| "Bring back the export feature." | "We removed the 'Download CSV' button in the last update. Please add it back to the dashboard, placed next to the filter options, just like it was in the March version." |
Advanced Prompting Patterns​
Once you master the basics, use these advanced strategies to manipulate the broader structure of your app.
1. Global Changes​
If you want to affect the entire structure of the app in one go.
| Bad Prompt | Good Prompt |
|---|---|
| "Change the layout." | "Create a dashboard layout that includes a top navigation bar, a collapsible sidebar on the left, and a main content area. Also, add an 'About' and 'Settings' page accessible from the sidebar." |
| "Add dark mode." | "Add a dark theme across the entire application. Use dark backgrounds with light text, and adjust all colors accordingly. Add a toggle switch in the top navigation to switch between light and dark modes." |
2. Navigation & Routing​
Be specific about how pages connect to each other.
| Bad Prompt | Good Prompt |
|---|---|
| "Fix the back button." | "On the 'About' page, ensure the back button takes users back to the 'Home' page. The 'Profile' link in the header should go to the profile page instead of the current user page." |
| "Add navigation." | "Add breadcrumb navigation showing the full path (Home > Products > Category > Product). Each part should be clickable and take users to the corresponding page." |
3. Refactoring & Optimization​
Don't just build—maintain a clean, organized app.
| Bad Prompt | Good Prompt |
|---|---|
| "Clean up the dashboard." | "Break the current Dashboard page into smaller, reusable pieces: one for stats, one for charts, and one for tables. Keep the data-fetching in the main page and pass the data to each piece." |
| "Make it faster." | "Speed up the product listing page. Load only 20 products at a time, show a loading placeholder while content loads, and remember previously loaded data to avoid reloading." |
4. Cross-Page Data Connectivity​
Connect your user interface to your data storage.
| Bad Prompt | Good Prompt |
|---|---|
| "Save the form data." | "Store the 'Create Product' form data in the database. When a user clicks on a product in the table, show a detailed view page with all the saved information." |
| "Connect the user profile." | "Save user preferences (like theme and language) when they update their profile. When the user logs in again, automatically apply their saved preferences." |
5. Reverting Changes​
Reference your project's history to restore functionality.
| Bad Prompt | Good Prompt |
|---|---|
| "Restore the old feature." | "In a previous version, pasting images worked perfectly. That behavior is now broken in the latest build. Please restore that functionality without affecting the new upload modal." |
| "Go back." | "Revert the sorting logic on the products page to the version from 3 days ago. The current sorting doesn't work well with our product codes. Keep the new filtering options intact." |
Quick Reference: Good vs. Bad Prompts​
| Category | Bad Prompt | Good Prompt |
|---|---|---|
| Setup | "Make a blog." | "Create a blog with post listing, individual post pages, author bios, and comment sections. Use a clean, typography-focused design." |
| Feature | "Add search." | "Add a search bar to the header that filters blog posts by title or tag in real-time as the user types." |
| Style | "Make it pop." | "Use a colorful gradient for the hero section. Use bold text for headings and add a subtle animation when the page loads." |
| Bug | "It's broken." | "The search bar stops working after the third character is typed. The page becomes unresponsive." |
| Navigation | "Link the pages." | "On the blog post card, the title should link to the full post. The 'Back to Blog' button should take users back to the main blog page." |
| Data | "Save this." | "Store the user's comment in the database when they click submit. Show a success message and automatically display the comment below." |
Final Tip​
The best results come from clear intent, small steps, and iteration.
Do not aim for a perfect prompt in one go. Treat prompting as a conversation. Start with a broad idea (Level 1), zoom in on specific features (Level 2), refine the details (Level 3), and fix issues as they arise (Level 4). Build continuously, refine continuously.
Remember: You're not just giving commands—you're guiding a collaborative partner. The more context, clarity, and structure you provide, the better your results will be. You don't need to be technical. Just describe what you want in plain language, and Craftapp will handle the rest.
Summary Checklist​
Before sending a prompt, quickly check:
- Clear goal: Does the prompt say what I want to achieve?
- Context provided: Have I explained the goal or any constraints?
- Specific details: Are the colors, sizes, and behaviors clearly described?
- One thing at a time: Am I focusing on a single feature or step?
- Error context: If reporting a bug, have I included screenshots or described what I see?
- History referenced: If reverting, have I mentioned a specific version?
Following this checklist will save you time, reduce frustration, and help you build better applications faster—even if you're not a technical person.