Prompt Engineering for Front-End Developers

The accuracy, maintainability, and quality of AI-generated code are directly proportional to the clarity and specificity of the prompt. Vague, under-specified requests like "build a dashboard" result in generic, bloated code that rarely integrates with your existing tech stack.

In this lesson, we explore the core principles of Prompt Engineering for Software Developers: Context Provisioning, Interface-Driven Prompting, System Constraints, and Few-Shot Examples.

┌────────────────────────────────────────────────────────────┐
│              The Anatomy of an High-Quality Code Prompt    │
├────────────────────────────────────────────────────────────┤
│ 1. Role & Persona      (e.g. "Senior Vue 3 / Nuxt Engineer")│
│ 2. Task Specification  (e.g. "Build an accessible Modal")  │
│ 3. Technical Context   (e.g. Provide TypeScript Interface) │
│ 4. Hard Constraints    (e.g. "No third-party UI libs, a11y")│
│ 5. Expected Output     (e.g. SFC `<template>`, `<script>") │
└────────────────────────────────────────────────────────────┘

1. The Power of Interface-Driven Prompting

LLMs reason exceptionally well when given strict TypeScript types or API schemas before requesting an implementation.

❌ Poor Prompt (Vague & Unconstrained):

"Write a shopping cart component with buttons and total price in React."

✅ High-Quality Prompt (Interface-Driven & Precise):

*"You are a senior front-end engineer. Write a Vue 3 Single-File Component <ShoppingCart /> using the Composition API (<script setup lang="ts">) and Tailwind CSS.
Use this existing domain interface:
TypeScript
interface CartItem {
  id: string;
  name: string;
  priceCents: number;
  quantity: number;
  thumbnailUrl: string;
}
Constraints:
Emit updateQuantity(id: string, delta: number) and removeItem(id: string).
Format currency in USD using Intl.NumberFormat.
Support keyboard accessibility (aria-label on remove buttons).
Do not install any external npm dependencies."*

2. Providing Relevant Context (Few-Shot Examples)

When you need an AI to match your team's specific coding conventions, provide 1-2 concise reference examples (Few-Shot Prompting):

Here is how our team writes Custom Composables in Nuxt:

```typescript
// Example: useTheme.ts
export function useTheme() {
  const isDark = useCookie<boolean>('app-theme', { default: () => false });
  const toggle = () => { isDark.value = !isDark.value; };
  return { isDark: readonly(isDark), toggle };
}

Now, following the exact same pattern and conventions, write useUserNotifications.ts.


## 3. The Iterative Refinement Loop

Never expect perfection on the first pass for complex features. Work iteratively:
1. **Step 1**: Ask the AI to scaffold the core data types and component structure.
2. **Step 2**: Review the output, then prompt for edge-case handling (e.g., *"Now add focus trapping when the modal opens and handle the Escape key"*).
3. **Step 3**: Ask for unit tests covering empty states, network errors, and boundary limits.

## Summary

- High-quality code prompts include Persona, Task, Context, Constraints, and Expected Output.
- Interface-Driven Prompting (providing TypeScript types upfront) dramatically improves code precision.
- Few-Shot prompting anchors the AI's output in your existing codebase conventions and design patterns.
- Complex features should be constructed through iterative conversational refinement rather than single massive prompts.

## Best Practices

1. **Always Specify Your Tech Stack and Versions**: Mention Vue 3 Composition API, React 19, Tailwind CSS v4, or TypeScript strict mode explicitly.
2. **State Negative Constraints Clearly**: E.g., *"Do not use `any`"*, *"Do not use CSS-in-JS"*, *"Do not modify the database schema"*.
3. **Share Error Messages in Full**: When debugging, paste the exact stack trace, compiler error, and relevant lines of code.
4. **Request Code Explanations When Unsure**: Ask *"Explain the trade-offs of this approach versus using a web worker"* to deepen your own understanding.