Art of Prompting

The single biggest lever on Vibely’s output is the prompt. Vibely is competent but literal — vague prompts produce vague apps. The patterns below are the high-leverage habits to form early. For deeper coverage of multi-turn iteration, troubleshooting prompts, and pattern libraries, see Tips → Prompting.

​

Answer the 3–4 clarifying questions

Right after your first prompt, Vibely pauses and asks 3–4 short questions to lock down the niche, the primary user, the must-have flow, and the visual tone. These take under a minute to answer and are the highest-leverage 60 seconds in the whole session — they’re how a generic “todo app” becomes “an appointment tracker for a hairdresser with WhatsApp reminders.” Treat them as a free upgrade to the build, not as friction. Skipping or one-word-answering them is the single most common reason a first turn looks generic.

​

Be specific about the output

Naming layout, data, and components saves Vibely from guessing. Vague:

“build me a SaaS dashboard.”

Specific:

“build a SaaS analytics dashboard with a left sidebar (Home, Reports, Settings), a top bar with workspace switcher, and a Home page showing MRR, active users, and churn as line charts. Postgres-backed.”

The second prompt does work the agent would otherwise do badly.

​

Lead with the user, not the tech

Describe who is using the app and what they’re trying to do. The stack will follow.

“An ops dashboard for a fulfilment team — they need to see today’s orders, flag stuck shipments, and hand off to support.”

…produces a far better starting point than:

“A Vite + React + Tailwind app with Supabase and a CRUD orders table.”

The first focuses Vibely on the right user flow; the second only constrains the implementation.

​

Name three references

When you want a specific feel, name three brands or products as anchors. Mixing unexpected ones produces surprising-but-coherent results.

“The data density of Linear, the warmth of Notion, the playfulness of Duolingo.”

This is the single fastest way to get a non-generic look on turn one.

​

Constrain each turn to one thing

The agent does its best work when each turn is a small, well-defined diff. Good shape for a turn:

• One feature, or one fix
• One screen, or one component
• One integration

Bundling five things into one prompt slows iteration and makes failures harder to attribute. If you need five things, send five turns — they take less total time than one mega-prompt.

​

Show, don’t tell

Vibely is multimodal. Pictures, links, and code snippets steer it more efficiently than prose.

• Paste a screenshot. “Match this layout” with an image attached is the most effective prompt shape for visual work.
• Reference a real URL. “Make it look like linear.app” or “the empty state should feel like notion.so’s recently-deleted view” both work.
• Paste a JSON sample. Saves the agent from guessing your data shape.
• Drop in a reference component. When you’ve written something similar before, paste the code.

​

Common first-prompt anti-patterns

The mistakes that quietly cost you the most rebuilds.

• Asking for “everything” — “a full SaaS with auth, billing, dashboards, settings, and integrations” produces a thin shell of all of them. Pick one feature for turn one.
• Skipping the user. “A todo app” → “for a hairdresser tracking client appointments.” Same effort, much sharper result.
• Naming the framework first. “A Next.js app with…” overrides Vibely’s defaults without you understanding the trade-offs.
• Vague visuals. “Modern”, “clean”, “premium” mean almost nothing. Name a real reference instead.

​

Anchor decisions early

When you’re happy with something, pin it. Future turns won’t drift away from it.

• “Save: primary colour #0ea5e9, secondary #0f172a. Don’t change them.”
• “Save: this is B2B for finance teams — never use playful copy or emojis.”
• “Save: all forms use react-hook-form. Never controlled components.”

These pinned facts survive across turns and live in project memory.

​

Ask for a plan when you’re not sure

For anything bigger than a one-screen change, ask before writing.

“Plan how we’d add multi-tenancy across this codebase. Don’t write code yet.”

The agent enters Plan Mode — read-only, full project access, just a written approach back to you. When the plan is right, “go ahead and implement that” unlocks the full toolset. This is the single best habit for avoiding 5-turn rabbit holes.

​

Next