Writing Effective Prompts

Prompts are how to tell Meku what to build. The clearer the prompt, the closer the output matches your intent.

This page explains how to write effective prompts for components, pages, and full applications, with examples you can copy and adapt.

Basic Structure of a Prompt

Before writing prompts, it helps to know the common elements that produce reliable results.

A good prompt usually includes:

• Component or page type (hero, navbar, dashboard, form).
• Elements inside it (headline, button, sidebar, cards).
• Design style (optional), such as Tailwind classes or layout keywords.

Defining these parts makes your prompts precise and reduces unexpected output.

Examples

Examples show how clear prompts translate directly into usable code.

1. Component Prompt

Create a hero section with a headline, subheading, and call-to-action button

Output: A React component styled with Tailwind, responsive, and ready to edit.

2. Page Prompt

Build a landing page with hero, navbar, three feature cards, pricing section, and footer

Output: A complete React page with multiple sections, production-ready.

3. Dashboard Prompt

Create a dashboard layout with a fixed sidebar, top navbar, and grid of analytics cards

Output: A responsive layout with navigation and analytics components.

4. Form Prompt

Build a login form with email and password fields, a remember me checkbox, and a submit button

Output: A styled React form with Tailwind classes, responsive, and accessible.

Tips for Writing Effective Prompts

• Be specific. "Three feature cards" is clearer than "some features."
• Use step-based instructions. Build the base first, then add details.
• Add design cues with Tailwind modifiers such as rounded-lg, shadow-md, or "dark mode."
• Include text content when needed.

Create a hero section with a headline: "Build faster with Meku", subheading: "AI-generated React apps in minutes", and a primary button

These tips keep prompts actionable and prevent vague or generic results.

Iterative Prompting

Iteration ensures complex builds stay organized and manageable.

Break large tasks into smaller steps.

Create a landing page with a hero and a navbar

Add three pricing cards with Free, Pro, and Enterprise plans

Add a testimonials section with three customer quotes

This makes the output easier to control, refine, and expand without breaking the existing structure.

Common Pitfalls

Recognizing mistakes helps avoid wasted tokens and poor results.

Too vague

Build a website

Produces unclear or incomplete output.

Better

Build a portfolio website with a hero, project grid, and contact form

Too complex in one step

Create a full SaaS app with auth, dashboard, charts, payments, and notifications

May result in unorganized code.

Better

Step 1: Build login and signup pages
Step 2: Add dashboard layout
Step 3: Add analytics cards and payment form

By avoiding these pitfalls, prompts remain structured and reliable.