All notes
Vibe Coding3 min read

Prompting like a designer: briefs, not wishes

The best AI output starts with the same thing as the best design work — a clear brief with constraints.

Raisul Rafi

Raisul Rafi

UI/UX Designer & Frontend Developer

Vibe Coding

When I started vibe coding, my prompts read like wishes: "make a beautiful pricing page." The results were generic, because the request was generic. The fix was treating every prompt like a design brief.

What a good prompt brief includes

  • The user and the job they are trying to do.
  • Constraints: tokens, components and libraries to use.
  • What must not change in the existing code.
  • How I will judge whether the result is done.

Constraints are what make AI output feel like your product instead of a template. Point it to your design tokens and existing components, and it stops inventing new ones.

“A vague prompt gets you an average of the internet. A brief gets you your product.”

An example brief

Here's the kind of prompt I write now: "Build a pricing card component for a SaaS landing page. Use the existing Button and Card components and our Tailwind theme tokens. The card needs a plan name, price, short description, feature list with check icons and a primary action. Show a highlighted variant for the most popular plan. Don't change any other files."

It reads like a short design brief because that's exactly what it is. The more context I give upfront, the less I correct afterward.

Iterating with feedback

  • Describe what's wrong precisely, not just that it's wrong.
  • Reference specific tokens or components.
  • Ask for one change at a time.
  • Confirm the result before moving on.
“Feedback to an AI should be as clear as feedback to a junior designer: specific, kind and actionable.”

Building a prompt library

Over time, I've collected prompts that work well for common tasks — components, empty states, form validation, accessibility reviews. Reusing and refining them makes every session faster and more consistent.

Common prompting mistakes

The most common mistake is asking for too much at once. A prompt that requests an entire dashboard with charts, filters, tables and settings produces a large, hard-to-review result. Breaking the work into smaller pieces leads to better quality and fewer surprises.

  • Asking for too much in one prompt.
  • Leaving out constraints and existing components.
  • Not describing states like loading and error.
  • Accepting results without reviewing them.

Prompting for accessibility

AI tools don't always prioritize accessibility unless asked. I include explicit requirements in my prompts: visible focus states, labeled inputs, sufficient contrast and keyboard support. Including these from the start is much easier than fixing them later.

“If accessibility isn't in the prompt, it probably won't be in the result.”

Putting it into practice

Before your next AI-assisted task, write a mini brief: the user, the goal, the constraints, what must not change and how you'll judge success. Use it as your prompt and compare the result with a quick, vague prompt for the same task.

Save prompts that work well in a shared document organized by task type. Refine them as you learn what produces the best results.

Key takeaways

  • Treat prompts like design briefs.
  • Include constraints and existing components.
  • Ask for small, focused changes.
  • Build a reusable prompt library.

Try this

Before your next prompt, write two sentences: who this is for, and what "done" looks like. You will need fewer retries.

#AI#Prompting#Workflow
Link copied

More notes

View all notes