Intro

Crafting great prompts is the secret sauce that turns a generic LLM into your personal full-stack engineer. Creating structured instructions are the difference between a disjointed mess and a functional app. In this tutorial, we’ll build a basic storefront app with Spring Boot + Maven on the backend and React + TypeScript on the fronted all through the lens of prompt engineering! You’ll see how to chunk your asks, set roles and constraints, and iterate for polish.

tldr; Learn the core prompt-design patterns (role, scope, format, iteration) and apply them step by step to generate a cohesive application.

Prompting Steps

1. Establish the LLM’s Role & Scope

PATTERN: Start by telling the model who it is and what you need.

This sets the tone and context for the entire interaction. It'll help the model understand the framework, language, and libraries you want to use and avoid unnecessary follow-up questions. This first prompt will be for the backend. Once the backend is scaffolded, we can switch to the frontend.

You are StorefrontBot, a backend engineer. Generate a Maven `pom.xml` for a Spring Boot 3.2 project that exposes a REST API for products. Use Java 21 and include dependencies for Spring Web, Spring Data JPA, and H2 database.

Assigning a persona (“StorefrontBot”) sets tone and specifying exact framework versions and dependencies avoids follow-up drift.

2. Specify Exact Format & Style

PATTERN: Instruct the model on code style, output format, and packaging.

Let the model know how you want the code structured, what annotations to use, and how to format the output. This reduces the need for manual cleanup later.

– Use Lombok for getters/setters (`@Data`).
– Package structure: `com.example.storefront`.
– Wrap all code in Markdown triple backticks with language tags.
– Omit explanations—only the code.

This prevents commentary bloat and ensures the snippet drops in without manual cleanup.

3. Chunk Tasks into Numbered Steps

PATTERN: Break complex requests into a numbered list so the LLM can tackle each part predictably.

Specifying subtasks helps the model focus on one piece at a time, reducing the chance of hallucinations or missing details. A lot of this is about guiding the model to produce a coherent output without overwhelming it with too much at once.

Please perform the following steps:

1. Return only the `pom.xml` content with the dependencies mentioned.
2. Create a `Product` JPA entity (fields: id, name, description, price).
3. Generate a `ProductRepository` interface.
4. Write a `ProductController` with a `/api/products` GET endpoint.

Numbered subtasks reduce hallucinations and give you bite-sized review points.

4. Prompt Example & Few-Shot (Optional)

PATTERN: Provide a tiny example of desired output for edge-cases or complex blocks.

This could go before the numbered steps as an additional style, but I usually like to do this afterwards to avoid overwhelming the model with too much context at once. You can also include this as a subtask in the list if you prefer.

Example output for the controller method:

@GetMapping("/api/products")
public List<Product> listProducts() {
    return repository.findAll();
}

5. Frontend Scaffold via Prompt

PATTERN: Switch personas and repeat the pattern for your React UI.

You are FrontendBot, a React/TypeScript developer. Scaffold a Vite + React project that fetches `/api/products` and displays them in a table. Use `react-query` for data fetching, type definitions via Zod, and Tailwind CSS for basic styling.

6. Iterate & Refine

PATTERN: When the first pass misses something, ask for targeted adjustments.

The controller lacks exception handling. Please add a `@ControllerAdvice` global handler that returns `404` for missing products and `500` for other errors, with JSON error payload `{ "error": "..."}`

This keeps the context tight and focuses the model on one concern at a time.

Warning: I personally avoid asking the model to just "fix the code" or "improve the app" without specifics. It often leads to hallucinations or irrelevant changes. Always be explicit about what you want fixed and how it should be fixed.

Tips & Tricks

Here are some pro moves to nail your prompts and dodge hallucinations:

• Explicit “I don’t know” fallback: Include If you’re unsure, respond with “I don’t know” in your prompt to force honesty on unknowns.
• Schema-driven outputs: Ask for JSON that matches a Zod or JSON Schema. It's easier to validate and parse.
• Step-by-step verification: Request the model to List the steps you’ll take, then wait for my approval before generating code.
• Few-shot anchoring: Provide 1–2 examples of correct code blocks or API responses to lock in style.

Not sure where to start?

Not sure where to start with an app? Try asking the model to generate a prompt based around what you'd like to be built:

You are PromptMaster, an expert in generating prompts for AI-driven web apps. Create a prompt that will generate a full-stack storefront web application.

Then review the prompt and tweak it to your liking. This can help you get a solid foundation to build on.

Outro

And there you have it! By layering clear roles, numbered tasks, strict formatting rules, and iterative refinements, you can have any modern LLM boss-mode your web app stack into place. Give it a spin, tweak your own prompts, and let AI handle the boilerplate so you can focus on features that actually matter. If this guide lit up your workflow, share it around or drop your go-to prompt patterns in the comments! Let’s keep the convo going!