Prompting Best Practices

Better prompts produce better results. This guide covers practical techniques organized by workflow phase.

---

Phase 1: Plan before you prompt

The most common mistake is jumping straight into "build me an app." A few minutes of planning saves hours of rework.

Map the user journey

Before writing a single prompt, sketch what your app does and who it is for. A simple list works fine:

• Who are the users?
• What are the 3 to 5 core screens?
• What actions can users take on each screen?
• What data does the app need to store?
• Are there different user roles (admin, member, visitor)?

Get design right first

Lyna is a visual editor. Use that. It is much easier to refine a layout on the canvas than to describe exact pixel placements in text.

1. Prompt the AI to scaffold the page structure.
2. Switch to the visual editor and adjust spacing, sizing, layout.
3. Go back to the AI to add interactivity and logic.

If you have a Figma design, import it first. Starting from a visual reference cuts the number of prompts needed dramatically.

---

Phase 2: Prompt by component

Think in components, not pages

Break things down instead of asking for an entire page at once:

Component by component gives you more control and better results.

Use real content

Skip placeholder text when you can. The AI generates better layouts when it knows what the actual content looks like.

One change per prompt

Each prompt should request one clear thing. If you are writing "and also" or listing unrelated tasks, split into separate messages.

"Add a search bar to the header with a magnifying glass icon."

Then:

"Make the search bar expand when clicked and show a dropdown with recent searches."

Then:

"Add keyboard shortcut support:pressing Cmd+K should focus the search bar."

---

Phase 3: Effective prompt patterns

The specification pattern

For precise output, give clear constraints:

"Create a contact form with: Name (required, text), Email (required, valid email), Subject (required, dropdown: General Inquiry, Bug Report, Feature Request), Message (required, textarea, min 20 characters). Show inline validation errors below each field. On submit, show a success toast."

The reference pattern

Point to existing work in your project:

"Look at the pricing card component on the homepage. Create a similar card style for the feature comparison section, but horizontal with the icon on the left and description on the right."

The AI sees your entire project. Referencing existing components is one of the most effective techniques.

The iteration pattern

Build in layers. Structure first, then detail:

1. "Create a blog post page with a title, author byline, publication date, featured image, and article body."
2. "Add a table of contents sidebar on the left that links to each heading."
3. "Add social share buttons (Twitter, LinkedIn, copy link) below the title."
4. "Add a 'Related Posts' section at the bottom with 3 card previews."

The constraint pattern

Tell the AI what not to do:

"Redesign the navigation bar. Keep the current logo and links, but change to centered navigation with the logo in the middle and links split evenly on either side. Do not change the color scheme or fonts."

Visual context

When working with the visual editor:

• Select an element on the canvas before prompting. The AI will know which component you mean.
• Use the block inserter to add pre-built sections, then ask the AI to customize them.
• Describe relative positions:"above the footer," "to the right of the sidebar," "inside the card component."

---

Phase 4: Iterate and ship

Use version control

Every project has Git history. Use it:

• Before major changes, note where you are so you can revert if needed.
• After successful changes, commit with a clear message for a clean restore point.
• Create branches to experiment without affecting your main work.

Pick the right mode

Build with Supabase in mind

If your app needs a backend, think about data early:

"I am building a project management app. I need a Supabase database with tables for: projects (name, description, status, owner), tasks (title, description, status, priority, assignee, project_id), and comments (body, author, task_id, created_at). Set up the relationships between them."

Enough context for the AI to create proper schemas, foreign keys, and RLS policies.

Recover from errors

Do not start over. Instead:

1. Be specific:"The navigation links overlap on mobile. The hamburger icon appears but clicking it does nothing."
2. Share error messages: Paste the full error from the console or screen into the chat.
3. Understand first: Use Ask mode to figure out what went wrong, then switch to Build to fix it.

---

Prompt examples

---

Common mistakes

---

Next steps