Stop Asking for Snippets: The "Architect" Approach to AI Prompting

Dec 20, 2025

From Coder to Architect: How to Prompt AI for Systems, Not Just Snippets

In my last post, I discussed how AI can be a double-edged sword for new developers. If you use it to skip the struggle, you stop learning. But once you have the foundations down, the next hurdle is learning how to effectively communicate with these tools.

Most beginners treat AI like a magic wand: they wave it at a problem ("Write a search bar") and hope for the best.

Professional developers treat AI like a highly talented but context-blind junior developer. They don’t just ask for code; they provide the blueprint. Even if you use context-aware tools like GitHub Copilot or Cursor, the AI still doesn't know your intent.

Here is how to move from "Prompt Engineering" to "System Architecture."

The "Vague Prompt" Trap

If you ask an AI to "Write a React component for a search bar," it will give you a search bar. But without specific instructions, it defaults to generic assumptions. It doesn't know:

  • Your Styling Strategy: Are you using Tailwind, CSS Modules, or Styled Components?
  • Your Accessibility Standards: Does it need ARIA labels and keyboard navigation?
  • Your Performance Needs: Should it handle "debouncing" to prevent API spam?
  • Your Data Flow: Is this a Server Component or a Client Component?

When you give a vague prompt, the AI fills in the blanks with guesses. And every time it guesses, it introduces technical debt that you—the senior engineer in this relationship—will have to pay back later.

The Context-First Framework

To get senior-level code, you need to provide senior-level context. Before you ask for a single line of code, define these three pillars:

1. The Stack & Environment

Don't let the AI guess your tools. Be specific about versions, especially in fast-moving ecosystems.

  • Bad: "Write an API route for a user profile."
  • Better: "Write a Next.js 16 App Router API route (using NextResponse) with TypeScript and Prisma to fetch a user profile by ID."

2. The Constraints (The "Non-Negotiables")

This is where you prevent the AI from taking shortcuts or using "any" types.

  • "Ensure the component passes WCAG AA accessibility standards."
  • "Use Tailwind CSS for styling; strictly follow a mobile-first design approach."
  • "Do not use any for types; define a strict Interface for the props."

3. The "Why" (Business Logic)

AI is great at syntax, but it's bad at understanding the purpose of a feature.

  • Bad: "Make sure it's fast."
  • Better: "This search bar filters a local list of 5,000 products. We must implement debouncing on the input so we don't trigger the heavy filtering logic on every single keystroke. The input field should update immediately, but the list results should lag by 300ms."

Example: The "Lazy" Prompt vs. The "Architect" Prompt

Let’s look at the difference in results when building a Product Card component.

The Lazy Prompt:

"Make me a React product card component with an image, title, and price."

The Result: You’ll get a generic <div> with inline styles or basic CSS. It will likely use a standard <img> tag (hurting your generic Core Web Vitals) and won't match your design system.

The Architect Prompt:

"I need a React component for a 'Product Card'.

1. Tech Stack:

  • TypeScript, Tailwind CSS, Next.js 16.
  • Use lucide-react for the 'Add to Cart' icon.

2. Requirements:

  • The component must accept a strictly typed Product object as a prop.
  • Use the Next.js <Image> component. Assume images are remote URLs, so set fill to true and use a parent container with aspect-square and object-cover.

3. Behavior:

  • The 'Add to Cart' button must have a loading state to prevent double-clicks.
  • The card should be wrapped in a Link component navigating to /products/[slug].

4. Style:

  • Clean, minimal design with a subtle drop shadow on hover (use group utility in Tailwind for hover effects)."

The Result: The AI now acts as your hands, not your brain. It produces production-ready code that fits your specific architecture, optimized for Next.js, with proper typing and user experience considerations included.

Prompting for Strategy, Not Just Snippets

As you grow, stop asking for "components" and start asking for "rfc" (Request for Comments). Instead of asking for code first, ask the AI to review your plan.

Try this prompt next time:

"I am planning to build a multi-step checkout form in React. I'm thinking of using a centralized Zustand store to manage the state across steps.

Before we write any code, can you act as a Senior Tech Lead and critique this approach? specifically:

  1. Is this overkill compared to just lifting state up?
  2. How should we handle form validation persistence if the user goes back a step?"

By doing this, you remain in the driver's seat. You are deciding the logic; the AI is acting as a consultant to help you spot holes in your thinking before you pour concrete.

Final Thought: Be The Director

The most important thing to remember is this: The AI doesn't know your business goals. It only sees the text you provide.

If you want the AI to be a better assistant, you have to be a better director. Provide the context, define the constraints, and never accept a solution you couldn't explain to another human.

Be the architect. Let the AI lay the bricks.