Prompt Engineering for Developers

Introduction

The skills developers need are shifting.

Writing code remains essential, but a new competency is emerging: the ability to give AI precise instructions. Two developers using the same AI tool can get dramatically different results depending on how they phrase their requests. Vague instructions produce vague code. Specific instructions produce specific code.

Prompt engineering is often associated with chatbot interactions. But for developers using DevLoop Runner, it's a far more tangible and practical skill — because your GitHub Issues are your prompts.

Issues Are Prompts

DevLoop Runner takes a GitHub Issue as input and produces code as output. This is exactly the relationship between a prompt and an AI model.

Loading diagram...

The way you write an Issue determines the quality of the Dev Run output. A one-line "build login" Issue and a detailed Issue with functional requirements, technical specifications, and test criteria will produce fundamentally different code.

Writing an Issue is designing a prompt. Approaching Issue creation with this mindset is the first step to getting the most out of DevLoop Runner.

Three Principles of Effective Instructions

Effective AI instructions follow three principles.

Principle 1: Specificity

Ambiguity is AI's enemy. The more specific your instructions, the closer the output matches your expectations.

Vague instruction:

Improve the user management feature

Specific instruction:

Add a search function to the user list page. Support filtering by name and email address. Implement real-time search with 300ms debounce.

Specificity checklist:

• What: Can you identify the exact target of the change?
• How: Is the implementation approach clear?
• Where: Is the scope of impact defined?
• Why: Is the purpose of the change understandable?

Principle 2: Structure

Structured information helps AI parse content accurately. Use bullet points, headings, and sections.

Unstructured instruction:

I want a contact form with name, email, and message fields that sends an email when submitted. Add validation too.

Structured instruction:

Overview

Create a new contact form

Requirements

• Fields: Name (required), Email (required), Message (required, max 500 chars)
• Submit: Send form contents to the designated email address
• Validation: Required field checks, email format check, character limit
• After submit: Show success message and reset the form

Technical Requirements

• Use React Hook Form + zod for validation
• Use the existing /api/contact endpoint for email delivery

Principle 3: Context

AI doesn't automatically understand your project's background or codebase structure. Providing explicit context produces code that fits your project.

Context-poor instruction:

Add a chart to the dashboard

Context-rich instruction:

Add a monthly sales chart to the dashboard (src/pages/Dashboard.tsx). Reuse the existing chart component (src/components/Chart.tsx, built with Recharts). Fetch sales data from the existing useSalesData hook.

Bad vs. Good Instructions: Before and After

Let's look at real Issue improvements.

Case 1: Bug Fix

Before:

The login screen is broken. Fix it.

After:

Bug

On the login screen, after entering an email address and tabbing to the password field, an email validation error is displayed.

Steps to Reproduce

1. Navigate to /login
2. Enter "test@example.com" in the email field
3. Press Tab to move focus to the password field
4. "Invalid email address" error appears (should not display)

Expected Behavior

No validation error when focus leaves a correctly formatted email address

Related Files

src/pages/Login.tsx, src/hooks/useLoginForm.ts

Case 2: New Feature

Before:

Add dark mode

After:

Overview

Add a dark mode toggle to the entire application

Requirements

• Place a dark mode toggle button in the header
• Default to the OS setting (prefers-color-scheme)
• Persist user preference in localStorage
• Apply dark mode styles across all pages

Technical Requirements

• Manage color themes with CSS custom properties
• Use a ThemeProvider context for state management
• Leverage existing Tailwind CSS dark: prefix

Out of Scope

• Dark mode for email notification templates

Case 3: Refactoring

Before:

Clean up the code

After:

Overview

src/utils/helpers.ts has grown beyond 800 lines with mixed responsibilities. Split it into focused files.

Split Plan

• Date functions → src/utils/date.ts
• String functions → src/utils/string.ts
• Validation functions → src/utils/validation.ts
• Remaining → src/utils/misc.ts

Constraints

• Do not change function names or signatures
• Update all existing import paths
• Maintain backward compatibility via barrel export (src/utils/index.ts)

Issue Writing Techniques Optimized for Dev Run

Practical techniques for writing Issues that produce the best Dev Run results.

Technique 1: Define Acceptance Criteria

State explicitly what "done" looks like. This gives AI a clear goal and feeds into test scenario design.

## Acceptance Criteria
- [ ] Typing in the search field triggers a search after 300ms debounce
- [ ] Zero results display "No matching results found"
- [ ] A loading indicator shows during search
- [ ] All existing unit tests pass

Technique 2: Specify the Tech Stack

Including the tech stack helps AI choose appropriate libraries and conventions.

## Tech Stack
- Framework: Next.js 14 (App Router)
- State management: Zustand
- Styling: Tailwind CSS
- Testing: Vitest + Testing Library

Technique 3: Define What's Out of Scope

Stating what not to do prevents AI from making unnecessary changes and keeps the Issue focused.

## Out of Scope
- Mobile responsiveness (separate Issue)
- Modifying existing tests
- Performance optimization

Technique 4: Reference Existing Code

Point to relevant files so AI knows where to look and what patterns to follow.

## References
- Similar component: `src/components/UserList.tsx`
- API to use: `getProducts()` in `src/api/products.ts`
- Style reference: `src/components/UserList.module.css`

Designing PR Comment Prompts

When providing feedback on Dev Run-generated PRs, the same prompt engineering principles apply.

Be Specific in Revision Requests

Vague comment:

This component could be better

Specific comment:

Add loading state handling to the UserCard component. When isLoading is true, render a skeleton UI. Use the existing Skeleton component (src/components/ui/Skeleton.tsx).

Include the Reasoning

Explaining why a change is needed helps AI make more appropriate revisions.

Add rate limiting to this endpoint.
Reason: This is a public API, so protection against request flooding is required.
Use the existing `rateLimit` middleware (`src/middleware/rateLimit.ts`)
and set a limit of 60 requests per minute.

Standardizing Issue Writing Across Teams

Standardized Issue formats across a team stabilize Dev Run output quality and improve review efficiency.

Key practices for team adoption:

• Set up Issue templates in the GitHub repository
• Include sections for Overview, Requirements, Technical Requirements, Acceptance Criteria, and Out of Scope
• Cover Issue writing best practices during new member onboarding

Summary

• Issues are prompts — Issue quality determines Dev Run output quality
• The three principles of effective instructions: specificity, structure, context
• Rewriting vague instructions as specific ones dramatically improves AI output
• Include acceptance criteria, tech stack, out-of-scope items, and code references for best results
• Apply the same principles to PR feedback: be specific and explain why
• Standardize Issue formats across the team for consistent quality and efficiency

Prompt engineering isn't a specialized AI skill. It's the same fundamental communication principle: write so the reader understands exactly what you mean. The ability to write excellent Issues has always been valuable for developers — AI just makes the payoff more immediate and measurable. Sharpen that skill through every Issue you write.