Prompt Engineering

The quality of AI output depends on the quality of your prompt — not the tool.

Most developers jump straight into typing. That's the mistake. Before you write a single prompt, you need clarity on what you're building, why it matters, and how it should behave within your project.

A clear prompt produces clean, maintainable, extensible code.
A vague prompt produces something that looks impressive for an hour and falls apart by the end of the week.

The Golden Rule

Vague prompts produce vague results.

// ❌ Too vague
Build me a pricing section.

// ✅ Clear and actionable
Read the files inside ai/.
 
Create a pricing section using existing project patterns.
 
Requirements:
- Use the Button component
- Use Motion animations
- Follow the design system
- Support monthly and yearly billing
- Make it mobile responsive

The more relevant context you provide, the better the output.

Prompt Structure

Every strong prompt contains five parts:

1. Context      — What project/environment is this?
2. Goal         — What needs to be built or changed?
3. Requirements — What must it do?
4. Constraints  — What must it NOT do?
5. Expected Output — What should the response include?

1. Context

Start by grounding the AI in your project. Reference existing files, design systems, or patterns so the AI understands the environment before generating anything.

Read the files inside ai/.
 
Follow the project's design system, component rules,
file structure, and SEO architecture.

2. Goal

State clearly what you want to build or change. Avoid vague verbs like "improve" or "fix."

// ❌ Vague
Improve this page.
 
// ✅ Clear
Create a pricing comparison section
between Starter, Pro, and Enterprise plans.

3. Requirements

List what the feature must do. Requirements reduce ambiguity and prevent the AI from making assumptions.

Requirements:
- Monthly and yearly billing toggle
- Animated price transitions
- Mobile responsive
- Reuse existing Button component
- Support feature tooltips

4. Constraints

Tell the AI what to avoid. Constraints often improve output quality more than requirements do — they prevent the AI from introducing patterns, components, or libraries that don't fit your project.

Constraints:
- Do not create new button components
- Do not use Framer Motion
- Do not hardcode content
- Reuse existing project patterns

5. Expected Output

Specify what the response should include. This makes the output more useful and prevents incomplete answers.

Return:
- Full component code
- Any new interfaces or types
- Required content structure
- Changelog entry

Full Example

Read the files inside ai/.
 
Create a new testimonial section.
 
Requirements:
- Responsive layout
- Support customer avatar
- Support company logo
- Use Motion animations
- Use existing Button component
 
Constraints:
- Do not create duplicate card components
- Do not hardcode content
 
Return:
- Full component code
- Required content structure
- Changelog entry

This will consistently outperform a prompt like "Create a testimonial section." in both quality and accuracy.

Additional Tips

Include Relevant Files

When modifying existing code, always paste the file. The AI can't assume what it hasn't seen.

Update this Hero component.
 
Requirements:
- Add an image column
- Preserve existing animations
- Keep mobile layout unchanged
 
[paste component here]

Explain the Why

Context about why something is changing often leads to better design decisions.

// ❌ No context
Add a second CTA button.
 
// ✅ With context
Add a secondary CTA button so users
can view a product demo before signing up.

Reference Existing Patterns

Point to patterns in your codebase to keep output consistent.

Create this section using the same layout pattern
used by the Features section.

Match the styling of the PricingTable component.

Ask for Tradeoffs Before Implementation

When you're unsure about approach, ask the AI to evaluate options before jumping to code. This produces better architectural decisions.

I need a pricing table.
 
Should I use:
- Tabs
- A toggle
- A comparison table
 
Recommend the best option and explain why.

Prompt Templates

New Component

Read the files inside ai/.
 
Create a new [Component Name].
 
Requirements:
- [Requirement]
- [Requirement]
 
Constraints:
- Reuse existing components
- Follow the design system
- Follow the file structure
- Use Motion animations
 
Return:
- Full component code
- Types/interfaces
- Content structure

Update Existing Component

Read the files inside ai/.
 
Update the following component.
 
Goals:
- [Goal]
- [Goal]
 
Requirements:
- Preserve existing functionality
- Preserve responsiveness
- Follow project patterns
 
[Paste component here]

New Page

Read the files inside ai/.
 
Create a new page.
 
Requirements:
- SEO support
- Mobile responsive
- Content-driven architecture
- Reuse existing components
 
Return:
- Page file
- Content file
- Metadata implementation

Common Mistakes

| Mistake | Why It Fails |
|---|---|
| `"Make this better."` | No goal, no context — the AI guesses |
| `"Build a pricing section."` | No requirements — output won't match your needs |
| `"Create a hero section."` | No constraints — AI may introduce conflicting patterns |
| `"Build my entire dashboard."` | Too broad — break large tasks into focused prompts |

Rule of thumb: if your prompt fits in one sentence, it's probably missing something.

Launchpad Next Formula

For most tasks, this structure works reliably across Claude, Cursor, ChatGPT, and GitHub Copilot:

Read the files inside ai/.
 
Goal:
[What needs to be built]
 
Requirements:
[List requirements]
 
Constraints:
[List restrictions]
 
Return:
[Expected output]

Summary

Context → Goal → Requirements → Constraints → Expected Output

This structure helps the AI understand:

What you're building
Why you're building it
How it should behave
What project standards must be followed

Better prompts mean better code, fewer revisions, and a faster development workflow.