> ## Documentation Index > Fetch the complete documentation index at: https://docs.vibely.sh/docs/llms.txt > Use this file to discover all available pages before exploring further. # Art of Prompting > The handful of patterns that consistently produce clean output on the first turn. 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](/docs/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. ## The composer "+" menu The plus button to the left of the composer opens every reference and attachment Vibely supports. Knowing what's in it saves a lot of typing. | Item | What it does | | --------------------------- | ---------------------------------------------------------------------------------------------------- | | **Attach files** | Drop in any file the agent should read — specs, configs, sample data. | | **Attach image** | Upload a screenshot or photo. Best paired with "match this layout." | | **Add Design** | Pick a design system to anchor the build's look and components. | | **Add Connectors** | Wire in a third-party service for this build — see [Connectors](/docs/connectors/overview). | | **Generate UI block** | Ask Vibely to produce a component or section on the spot, then drop it into the prompt. | | **Design system reference** | Point Vibely at an existing design system so the build inherits its tokens and components. | | **Website URL reference** | Paste a URL Vibely should match the feel of — Linear, Notion, your own product page. | | **Enhance prompt** | One-click rewrite of your draft prompt into a sharper, more specific version. Review before sending. | The menu is mode-aware — design-mode skills, mobile-mode references, and so on only appear when they make sense for the current project. ## 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](/docs/tips/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 Deeper patterns: prompt shapes, references, and what fails reliably. Staying in flow across many turns without breaking what works. Reusable instruction bundles you invoke from the composer with `/skill-name`. What to do when the agent gets stuck.