Prompt Engineering with DeepSeek

Build a full-stack Next.js landing page by mastering structured AI prompts.

Introduction

30 Second Summary

You ask an AI to build you a website and get back code that looks nothing like what you imagined. The colors are wrong, the layout breaks on your phone, and the features you actually need are nowhere to be found.

In this project, you will build a professional law firm landing page entirely by prompting DeepSeek. You will learn a structured prompting framework that turns vague requests into working, mobile-responsive, full-stack code.

What You'll Build

Picture yourself opening DeepSeek, describing exactly what you want from scratch, and getting back polished, responsive code with working backend logic on the first try.

By the end of this project, you'll have:

  • A dark, mobile-responsive landing page with rotating quotes that looks polished on any screen size, designed and described entirely in your own words to DeepSeek.
  • A working contact form that accepts submissions and logs them to your server, powered by a Next.js Server Action you prompted for.
  • A structured prompting framework (Goal, Context, Output, Boundaries) and a constraint system (Must / Must Not / Prefer) you can reuse on any coding project to get working code consistently.
  • An optional Secret Mission to push your prompting skills even further.

Are there any prerequisites?

You need Node.js and a code editor (VS Code or Cursor) installed on your computer. You also need a free DeepSeek account at chat.deepseek.com.

Before We Start

Before we dive in, let's lock in what you are about to build and why it matters to you.

Naming your goal now gives every step a clear target to aim for.

Set Up Your Next.js Project

Code that lives in a chat window is just text. To find out whether DeepSeek's output actually works, you need a real project to paste it into and run.

In this step, you will create a fresh Next.js project and start its development server. Once the server is running, you can test any prompt response by pasting code and refreshing your browser.

In this step, get ready to:
  • Create a Next.js project with TypeScript, Tailwind CSS, and App Router.
  • Start the dev server and confirm the default page loads.
Create the Next.js project
  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal and press Enter to open it.
  • Move to your Desktop and scaffold a new Next.js project by running these commands:
cd ~/Desktop
npx create-next-app@latest law-firm-site
  • If your terminal displays Need to install the following packages, type y and press Enter.
  • When asked about recommended defaults, select Yes, use recommended defaults.

What does this set up?

Selecting the recommended defaults gives you TypeScript, ESLint, Tailwind CSS, App Router, and AGENTS.md. These are the exact tools your prompts will target throughout this project.

The command takes a minute or two to install dependencies. When it finishes, your terminal prompt reappears.

  • Confirm the project folder was created by running:
ls

You should see law-firm-site listed in the output.

Not seeing the folder?

Make sure you have a stable internet connection. The command downloads packages from the npm registry, so a dropped connection can cause it to fail partway through.

If you see a permission error, try running your terminal as an administrator (Windows) or prefixing the command with sudo (macOS).

Help me troubleshoot create-next-app failing to create my law-firm-site project.

Open the project and start the dev server

A dev server runs your project locally so you can see every code change by refreshing the browser. You will keep it running for the rest of this project.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type the name of your code editor (e.g. Visual Studio Code or Cursor) and press Enter to open it.
  • Click File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the law-firm-site folder, and click Open.

You should see the project files in the sidebar, including folders like app/ and public/, plus files like package.json.

  • Open the built-in terminal in your editor by clicking Terminal in the top menu bar.
  • Click New Terminal.
  • Start the development server by running this command:
npm run dev

What does this command do?

npm run dev starts a local development server that serves your Next.js project at http://localhost:3000. The server watches your files for changes, so every time you save, you can refresh the browser to see the update.

Before you open your browser, what do you think the default Next.js starter page looks like?

  • Open your browser and go to http://localhost:3000.

You should see the default Next.js starter page with the Next.js logo and links to documentation. This is the page you will replace with your own code throughout this project.

Leave the dev server running

Keep this terminal open with npm run dev running for the rest of the project. Every time you paste new code from DeepSeek, just save the file and refresh your browser to see the result.

Page not loading?

Check your terminal for error messages. If you see something about port 3000 being in use, close any other application using that port and run npm run dev again.

Make sure your terminal is inside the law-firm-site folder. If you opened the folder in your editor, the built-in terminal should already be in the right place.

Help me get the Next.js dev server running on localhost:3000.

Your project is running and ready for code. In the next step, you will send your first prompt to DeepSeek and see exactly what comes back when you give it almost nothing to work with.

Experience the Vague Prompt

Your Next.js project is running and the default starter page is live at http://localhost:3000. Before you learn any prompting techniques, you need to see what happens without them.

In this step, you will send DeepSeek the vaguest possible prompt and paste whatever code it gives you straight into your project. The gap between what you imagined and what you actually get is the motivation for every technique that follows.

In this step, get ready to:
  • Send a vague prompt to DeepSeek and get generated code.
  • Paste the generated code into your project and check the result.
  • Identify what went wrong at both desktop and mobile widths.
Open DeepSeek and start a new chat

DeepSeek's web chat gives you a free interface for generating code. For this first test, you want the model's fast, unassisted output with no extra reasoning enabled.

  • Open chat.deepseek.com in your browser.
  • Look for the DeepThink toggle above the input box. Make sure it is toggled OFF.
  • Click New Chat to start a fresh conversation.

What is DeepThink?

DeepThink is DeepSeek's chain-of-thought reasoning mode. When enabled, DeepSeek reasons step-by-step before answering, which produces more accurate responses but takes longer.

You want it off for now so you can see the model's raw, unassisted output. You will turn it on later for debugging.

Send the vague prompt

Here is the experiment: give DeepSeek as little guidance as possible and see what it produces.

  • Copy this prompt and paste it into your DeepSeek chat:
Build me a law firm website landing page using Next.js
  • Press Enter to send the prompt.
  • Read through DeepSeek's full response. It will generate code for a page component.
  • Copy the code DeepSeek gives you for the main page. If it produces code for multiple files, copy only the main page component code.
Paste the code and observe the results

Now you will put DeepSeek's output to the test in your running project.

  • Switch to your code editor and open app/page.tsx inside the law-firm-site folder.
  • Select all the existing code in the file and delete it.
  • Paste the code you copied from DeepSeek, replacing everything that was there.
  • Save app/page.tsx.

Before you check your browser, take a moment to predict. Do you think DeepSeek's code will look like the polished, dark-themed law firm page you might have in mind?

  • Switch to your browser at http://localhost:3000. The page should refresh automatically with your new code.

The page renders, but look closely. It probably looks generic: default colors, placeholder-style text, stock section headings like "About Us" or "Our Services".

  • Resize your browser window to a narrow phone width (around 375 pixels wide).

The layout likely breaks or looks off at this width. Text may overflow, sections may overlap, or spacing may collapse entirely.

  • Check your terminal for any errors or warnings.
  • Take note of everything that is wrong. Do not fix anything yet.

What should I look for?

Common issues from a vague prompt include:

  • Generic or placeholder content that does not match any specific design vision.
  • Wrong colors or styling (likely a white background, not the dark theme you might want).
  • Broken mobile layout with content overflowing, text too large, or elements misaligned.
  • Unnecessary sections you never asked for (testimonials, team bios, pricing).
  • Terminal errors from outdated patterns like next/head or Pages Router imports.
  • A "use client" directive added when it is not needed.

Why did this happen?

Your prompt told DeepSeek nothing about the framework version, the styling approach, the design you want, or how the page should look on mobile. DeepSeek had to guess every single detail.

Without a version specified, it likely defaulted to the most common patterns in its training data. For Next.js, that often means outdated Pages Router patterns instead of the modern App Router. Every issue you noted traces back to this one root cause: vague input produces vague output.

Page completely blank or showing an error?

If your page shows nothing at all, check the terminal where your dev server is running. You may see a compilation error from imports or syntax that Next.js 16 does not recognize.

This is still a valid result for this step. Note the specific error message and move on. The whole point is to see how a vague prompt fails.

Help me understand why DeepSeek's generated code is causing compilation errors in my Next.js 16 project.

Every issue you just noted traces back to one root cause: your prompt gave DeepSeek zero guidance. Next up, you will write a structured prompt that eliminates the guessing and describes the exact design you want from scratch.

Write a Structured Prompt

In Step 2, you saw the cost of a vague prompt. DeepSeek gave you a generic page because it had to guess everything: the styling, the layout, the content, and the mobile behavior.

A structured prompt eliminates that guessing. You give DeepSeek four clear sections: Goal, Context, Output, and Boundaries. Each section removes a different type of ambiguity so DeepSeek spends its effort building what you actually want.

In this step, get ready to:
  • Write a structured prompt with Goal, Context, Output, and Boundaries sections.
  • Compare the vague and structured prompt results side by side.
  • Test the structured prompt's generated code in your browser at full width and phone width.
Write a structured prompt with four sections

Your vague prompt forced DeepSeek to guess the framework version, the color scheme, the layout, and the responsive behavior all at once. A structured prompt spells out each of these so there is nothing left to guess.

  • Return to DeepSeek at chat.deepseek.com.
  • Click the New conversation button at the top of the left sidebar to start a fresh chat.
  • Make sure DeepThink is toggled OFF above the input box. You want fast, unassisted mode for this step.

What is a structured prompt?

A structured prompt organizes your request into four sections, each removing a different type of guessing for the AI.

  • Goal tells the AI what you are building.
  • Context specifies your tech stack and describes your design in detail.
  • Output defines the exact format you want back (which files, which libraries).
  • Boundaries list what the AI should avoid so it does not invent wrong patterns.

Compose your prompt using these four sections. Describe the design entirely from scratch, without referencing any existing website.

  • Goal: State what you are building. For example: "Build a single-page landing page for a professional law firm."
  • Context: Specify your tech stack and describe the visual design from your own vision.
  • Output: A single complete page.tsx file using only Tailwind for styling, no external UI libraries.
  • Boundaries: List what DeepSeek should NOT do.

✔️ I'll give it a go!

Write your prompt in the DeepSeek chat box using the four sections above. Hit send when you are happy with it.

ⓧ Maybe a little help...

Here is an example prompt that covers all four sections. Feel free to adjust the wording to match your own style.

**Goal**
Build a single-page landing page for a professional law firm.

**Context**
Tech stack: Next.js 16 App Router, TypeScript, Tailwind CSS.
Design: dark background (near-black or deep navy), full-viewport hero section with centered text.
Content: 5-6 rotating quotes that auto-cycle every few seconds with a fade transition.
Footer: minimal, with a link to a privacy policy page.
Responsive: text that scales down on mobile, quotes that stack properly on small screens.

**Output**
A single complete page.tsx file.
Use only Tailwind CSS for styling.
No external UI libraries.

**Boundaries**
Do NOT use the Pages Router.
Do NOT install additional packages.
Do NOT create multiple files.
Make the design fully responsive for mobile, tablet, and desktop.

Paste this into the DeepSeek chat box and hit send.

Wait for DeepSeek to generate its response. You should see a much longer, more detailed reply than the vague prompt produced.

Why does specifying the version matter?

AI models are trained on older data. Without a version number, DeepSeek often defaults to Next.js patterns from years ago, like the Pages Router or deprecated imports like next/head.

Stating "Next.js 16 App Router" in your Context section steers the model toward modern patterns like the Metadata API and next/navigation.

Compare the vague and structured responses

You now have two DeepSeek responses: one from a vague prompt and one from a structured prompt. Comparing them side by side reveals exactly what structure buys you.

  • Scroll through both DeepSeek conversations or open them in separate browser tabs.
  • Look at the overall design choices in each response. Did the structured prompt produce the dark color scheme and rotating quotes you asked for?
  • Check whether the structured response uses Tailwind responsive classes like sm:, md:, and lg: for mobile responsiveness.
  • Write down the specific issues you still notice. Common leftover problems include extra sections you did not ask for, or patterns that do not match the App Router.

What to look for

Scan the generated code for import paths. If you see next/router instead of next/navigation, or next/head instead of the Metadata API, those are leftover wrong patterns. Write them down. You will fix these in the next step.

Test the structured prompt's code in your browser
  • Copy the code DeepSeek generated for page.tsx from the structured prompt response.
  • Switch back to your code editor and open app/page.tsx.
  • Select all the existing code and replace it by pasting the new code from DeepSeek.
  • Save app/page.tsx.

Before you check your browser, take a guess: how much better do you think the structured prompt's page will look compared to the vague one?

  • Switch to your browser at http://localhost:3000. The page should auto-refresh with the new code.
  • Check the page at full desktop width. You should see a dark background with centered text and rotating quotes that auto-cycle.
  • Resize your browser window to a narrow phone width. The layout should adapt: text scales down and elements stack vertically.

The page is dramatically better than the vague prompt's output. It will not be perfect yet, and that is expected.

Seeing errors in the terminal or a blank page?

  • Make sure you replaced ALL the content in app/page.tsx, not just part of it. Leftover code from the vague prompt can cause conflicts.
  • Check that you copied the entire code block from DeepSeek, including any import statements at the top.
  • If the dev server stopped, run npm run dev again in your terminal inside the law-firm-site folder.

Help me debug an error after pasting DeepSeek's code into my Next.js page.tsx file

Your structured prompt turned a generic page into something that looks professional. But you probably noticed details that are still off. Next up, you will add constraints and use DeepThink mode to close those remaining gaps.

Add Constraints and Debug with DeepThink

Your structured prompt from the last step made a dramatic difference. The page went from a generic template to something that actually looks like a dark, professional landing page with rotating quotes and responsive behavior.

But DeepSeek likely still made specific mistakes. Maybe it added "use client" unnecessarily, used wrong import paths, or the mobile layout breaks at certain widths. Two more techniques close these gaps: constraints to prevent mistakes upfront, and DeepThink mode to debug the ones that slip through.

In this step, get ready to:
  • Add Must / Must Not / Prefer constraints to your structured prompt.
  • Paste the improved output and check for remaining issues.
  • Use DeepThink mode to debug and fix any remaining errors.
Add Must / Must Not / Prefer constraints to your prompt

Constraints give DeepSeek explicit rules ranked by priority. Without them, every instruction in your prompt carries equal weight, which means none of them do.

The Must / Must Not / Prefer pattern forces you to separate hard requirements from nice-to-haves. This is the single most impactful technique for code prompts.

  • In DeepSeek, start a new chat. Make sure the Deep thinking toggle above the input box is OFF.
  • Copy your structured prompt from Step 3 into the new chat. Before sending, add the following constraints section at the very end of that prompt:
## Constraints

### Must:
- Use App Router file conventions (app/page.tsx)
- Use "use client" only if the component needs useState, useEffect, or onClick
- Use Tailwind CSS classes exclusively for all styling
- Use responsive Tailwind prefixes (sm:, md:, lg:) for all breakpoints

### Must Not:
- Use next/head (use the Metadata API instead)
- Use next/router (use next/navigation instead)
- Add any dependencies not already in the project
- Use CSS modules or styled-components
- Reference or copy any existing website

### Prefer:
- Named exports for components
- Semantic HTML elements (header, main, footer, section)
- Tailwind's mobile-first responsive approach

What do the three categories mean?

Must items are non-negotiable. If DeepSeek breaks one, the code is wrong. For example, using next/head is incorrect in the App Router because the Metadata API replaced it.

Must Not items are explicit bans on common AI mistakes. These prevent DeepSeek from falling back to older Next.js patterns it learned from training data.

Prefer items are soft preferences. DeepSeek should follow them when possible, but they are not hard failures if skipped.

  • Send the full prompt (your structured prompt from Step 3 with the constraints section appended).
  • Read through the response. Compare it to what DeepSeek generated in Step 3. You should notice cleaner imports, proper use of "use client", and Tailwind CSS responsive prefixes throughout.
Paste the constrained code and check the result
  • Copy the code DeepSeek generated for your main page.
  • In your code editor, open app/page.tsx and replace everything with the new code.
  • Save the file.

Before checking the browser, predict: did the constraints prevent the issues you noticed in Step 3? What do you expect the page to look like now?

  • Switch to your browser and check http://localhost:3000 at full desktop width.
  • Resize your browser window to a narrow phone width (around 375px wide).
  • Check your terminal for any error messages.

The page should be noticeably better than Step 3. The dark background, rotating quotes, and responsive layout should all be present. But there may still be remaining issues: a quote transition that flickers, text that does not scale quite right on tablet widths, or an error in the terminal.

  • Write down every specific issue you notice. If there is a terminal error, copy the exact error message. If a visual problem exists, describe it precisely (e.g., "the footer text overlaps on screens narrower than 400px").

Why write down specific issues?

Vague bug reports produce vague fixes. Telling DeepSeek "it looks wrong" gives it nothing to work with. Pasting the exact error message or describing the exact visual problem gives it the precision it needs to reason through a fix.

No issues at all?

If your page looks perfect at all widths and your terminal is error-free, your constraints did their job completely. You can still follow the DeepThink substep below to practice the debugging technique. Paste your working code and ask DeepSeek to review it for any subtle improvements.

Debug remaining issues with DeepThink

DeepThink is DeepSeek's chain-of-thought reasoning mode. When enabled, DeepSeek thinks through the problem step-by-step before answering instead of jumping straight to a response. This produces significantly more accurate fixes for code bugs.

  • In DeepSeek, find the Deep thinking toggle above the input box and turn it ON.
  • Start a new chat.
  • Paste the following debugging prompt, filling in your specific error or issue and the relevant code:
Here is the error I am seeing:

[[ERROR_DETAILS="paste your exact error message or describe the visual issue here"]]

Here is the relevant code:

[[RELEVANT_CODE="paste the section of your page.tsx that relates to the issue"]]

Explain step-by-step what is going wrong and provide a corrected version of the code.

Why does DeepThink produce better fixes?

Without DeepThink, DeepSeek pattern-matches your error to a common fix and responds immediately. With DeepThink ON, it reasons through your specific code: what the error means, where it originates, and why the current code triggers it.

You will see a collapsible reasoning trace above the reply. This trace shows you exactly how DeepSeek arrived at the fix, which helps you learn the debugging logic yourself.

  • Send the debugging prompt. Read the reasoning trace that appears above the response to understand what went wrong.
  • Copy the corrected code from DeepSeek's response.
  • Paste the fix into app/page.tsx in your code editor and save the file.

Before checking the browser one final time, predict: do you think the DeepThink fix resolved all the issues? Or might there be something the reasoning missed?

  • Check http://localhost:3000 in your browser at full desktop width.
  • Resize to tablet width (around 768px).
  • Resize to phone width (around 375px).
  • Check your terminal for any remaining errors.

You should see a polished dark landing page with rotating quotes that fade smoothly. The layout should adapt correctly at phone, tablet, and desktop widths. Your terminal should be free of errors.

Still seeing issues after the DeepThink fix?

If a visual issue persists, describe it more precisely in a follow-up message in the same DeepThink chat. Include the exact screen width where it breaks and what you expected to see instead.

If you see a terminal error after applying the fix, copy the new error message and paste it into the same chat. DeepThink can iterate on its own fixes when given the updated error.

If the browser console shows warnings about hydration or missing keys, paste those warnings into the chat alongside the code that triggers them.

help me debug my Next.js page after applying a DeepThink fix

Your landing page is now polished, responsive, and error-free. You have three prompt engineering techniques in your toolkit: structured prompts, constraints, and DeepThink debugging. Next up, you will prove these techniques work for backend logic too by adding a working contact form with a Server Action.

Prompt for Full-Stack Code

Your landing page is polished and responsive across every screen size. The frontend is exactly what you described. But right now it is frontend only.

A real website needs backend logic too. In this step, you will prompt DeepSeek to generate a contact form powered by a Next.js Server Action. This is the simplest way to prove your prompting covers server-side code. It also reveals a new prompting challenge: you need to tell DeepSeek about file structure, the "use server" directive, and how form data flows from client to server.

In this step, get ready to:
  • Write a structured prompt with constraints for a contact form with a Server Action.
  • Create the backend file and update the landing page with the generated code.
  • Test the form submission and verify data logs to the server console.
Write a structured prompt for the contact form

Your prompting framework from the previous steps handles frontend code well. Backend code introduces new requirements. You need to tell DeepSeek about a separate file for the server logic, the directive that marks it as server-side, and how the form element connects to that server function.

What is a Server Action?

A Server Action is a function that runs on the server, not in the browser. You define it by placing "use server" at the top of its file. When a form's action attribute points to a Server Action, Next.js automatically sends the form data to the server when the user clicks submit.

The Server Action receives a FormData object containing everything the user typed. You extract individual fields using formData.get('fieldName').

  • Return to DeepSeek at chat.deepseek.com. Click the new chat button to start a fresh conversation.
  • Make sure DeepThink is toggled OFF. You want fast, unassisted mode for this prompt.
  • Write a structured prompt using the same Goal, Context, Output, Boundaries format from the previous steps. Include the details below.

Your prompt should cover these four sections:

  • Goal: Add a contact section to the landing page with a form that has name, email, and message fields, plus a submit button.
  • Context: Next.js 16 App Router, TypeScript, Tailwind CSS. The form should use a Server Action defined in a separate app/actions.ts file with the "use server" directive at the top. The form should log submitted data to the server console and show a success message to the user.
  • Output: Two files. An updated app/page.tsx with the contact form integrated into the existing landing page below the hero section. A new app/actions.ts with the Server Action.
  • Boundaries: Apply the same Must / Must Not / Prefer constraints from Step 4, plus two new Must items: use the action attribute on the form element to invoke the Server Action, and make the form responsive (stacked fields on mobile, side-by-side on desktop).
  • Send the prompt and wait for DeepSeek's response.
  • Read through the response. DeepSeek should give you code for two files: app/actions.ts and an updated app/page.tsx.

Why a separate actions file?

Next.js recommends placing Server Actions in a separate file (like app/actions.ts) with "use server" at the top. This marks every exported function in that file as a Server Action. Client Components can only import Server Actions from files that use this module-level directive.

Telling DeepSeek about this convention in your prompt prevents it from mixing server and client code in a single file.

Create the Server Action file and update the page

Before pasting anything, scan DeepSeek's response to make sure the generated code follows the patterns you asked for.

What to look for in DeepSeek's response

  • app/actions.ts starts with "use server" on its own line at the top.
  • The Server Action function (it should be named something like submitContact) accepts a FormData parameter and uses formData.get() to extract field values.
  • app/page.tsx imports the Server Action and uses it in a form action attribute, like <form action={submitContact}>.
  • The form fields use responsive Tailwind classes. Look for mobile-first stacking with md: or lg: prefixes for the wider layout.
  • In your code editor, right-click the app folder inside law-firm-site in the sidebar.
  • Select New File and name it actions.ts.
  • Paste the Server Action code from DeepSeek's response into app/actions.ts.
  • Save app/actions.ts.
  • Open app/page.tsx in your editor.
  • Replace the entire contents with the updated code from DeepSeek's response.
  • Save app/page.tsx.

Switch to your browser at http://localhost:3000. The page should refresh automatically.

You should see a contact form below the hero section with name, email, and message fields. Resize the browser window to phone width. The fields should stack vertically on mobile and sit side-by-side on wider screens.

Don't see the contact form?

  • Check your terminal for errors. A missing "use server" directive in app/actions.ts is the most common cause.
  • Make sure the import path in app/page.tsx matches the file you just created. It should import from ./actions or @/app/actions.
  • Confirm both files are saved. Unsaved changes will not appear in the browser.
  • Why isn't my contact form appearing after pasting DeepSeek's code?

✔️ Awesome, I've got everything!

Great. Make sure both files are saved before moving on.

ⓧ I'd like to double check the code

Scroll through each file and confirm these patterns are present:

  • app/actions.ts: "use server" on line 1. An exported async function that accepts FormData, extracts name, email, and message using formData.get(), logs them with console.log, and returns a success response.
  • app/page.tsx: Imports the Server Action from ./actions. Has a <form> element with an action attribute pointing to the imported function. Form fields use responsive Tailwind prefixes (md: or lg:) for the side-by-side desktop layout.
  • No extra packages were added to package.json. Everything uses built-in Next.js features and Tailwind.
Test the form submission

The form looks right in the browser, but does the backend actually work? The whole point of this step is proving your prompt can generate working server-side logic, not just pretty HTML.

Before you submit, think about what you expect to happen. Where should the form data appear? Will you see it in the browser, the terminal, or both?

  • Fill out the contact form with a test name, email, and message.
  • Click the submit button.

You should see a success message appear on the page. Now switch to the terminal where your dev server is running.

The form data you entered (name, email, and message) should be logged right there in the server console. This confirms the Server Action received and processed the submission on the server side.

Why does the data appear in the terminal?

Server Actions run on the server, not in the browser. When your Server Action calls console.log, that output goes to the server's console, which is the terminal where npm run dev is running. This is exactly how a real backend works.

Form not submitting or no data in the terminal?

  • If clicking submit does nothing, check that the <form> element has an action attribute pointing to the Server Action function. A missing action attribute means the form has no server connection.
  • If you see an error in the browser or terminal, copy the exact error message. Toggle DeepThink ON in DeepSeek, start a new chat, and paste the error along with the relevant code. Ask DeepSeek to explain step-by-step what is going wrong and provide a corrected version.
  • If the form submits but no data appears in the terminal, check that app/actions.ts has console.log statements that print the extracted form values.
  • My contact form is not working after pasting DeepSeek's code. Help me debug.

Your prompts now generate working frontend and backend code in one shot. You have used Goal, Context, Output, and Boundaries. You have added Must / Must Not / Prefer constraints. You have debugged with DeepThink. Next up, you will combine everything into a reusable prompt factory you can use for any project.

Secret mission

Build Your Next.js Prompt Factory

You have used four prompting techniques across this project: structured prompts, constraints, DeepThink debugging, and full-stack Server Action prompting. Now combine them into a single reusable template that produces working, mobile-responsive, full-stack Next.js code for any task you feed it.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on your computer using free tools, so there are no ongoing costs or cloud resources to worry about.

Resources you used:

  • The law-firm-site project folder on your Desktop.
  • The Next.js dev server running in your terminal.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep experimenting with your prompts.

  • Your dev server stays running at http://localhost:3000 and your project files remain on your Desktop.
  • Your prompt factory template is the most valuable takeaway from this project. Make sure it is saved somewhere easy to find for future projects.
  • Your DeepSeek chat history contains all the prompts and responses you created. You can revisit those chats anytime at chat.deepseek.com.

Pause - I'll come back to this later

Stop the dev server to free up your terminal. Your project files stay on disk so you can pick up where you left off.

  • Switch to the terminal where the dev server is running and press Ctrl+C to stop it.
  • Your law-firm-site folder and all its files remain on your Desktop.
  • To pick up later, open your terminal, navigate to the project folder, and start the dev server again:
cd ~/Desktop/law-firm-site
npm run dev

Delete - I don't want to use this again

Remove all project files from your computer. Make sure your prompt factory template is saved somewhere outside the project folder before you delete it.

  • Switch to the terminal where the dev server is running and press Ctrl+C to stop it.
  • Delete the project folder by running the command for your operating system:

macOS

rm -rf ~/Desktop/law-firm-site
  • Confirm the folder is gone by running:
ls ~/Desktop

You should no longer see law-firm-site in the output.

Windows

Remove-Item -Recurse -Force ~\Desktop\law-firm-site
  • Confirm the folder is gone by running:
ls ~\Desktop

You should no longer see law-firm-site in the output.

Nice Work!

Nice Work!

Nice work! You went from typing vague prompts that produced broken, desktop-only code to writing structured, constrained prompts that consistently generate mobile-responsive, full-stack Next.js pages.

You built a real law firm website along the way, complete with a dark landing page, rotating quotes, and a working contact form with real backend logic.

You've learned how to:

  • Write structured prompts using Goal, Context, Output, and Boundaries to describe a complete design from scratch and get working code from DeepSeek on the first try.
  • Add Must / Must Not / Prefer constraints that prevent AI from inventing wrong patterns like outdated Pages Router code or unnecessary dependencies.
  • Prompt for full-stack code covering both frontend and backend, including a working contact form powered by a Next.js Server Action.
  • Completed an optional Secret Mission to push your prompting skills further.

Ready to quiz yourself?