The Anatomy of a Good Prompt

Lesson 2

Every effective prompt has three parts: context, intent, and constraints.

Context   → What already exists? What are we working within?
Intent    → What should this element do or look like?
Constraints → What should it NOT do? What must it stay compatible with?

Bad prompt vs. Good prompt

Bad:

버튼 만들어줘

The AI will produce something — but it guesses at size, color, behavior, and purpose. You’ll spend more time correcting it than you saved.

Good:

primary CTA 버튼을 만들어줘.
- 배경 #2563eb, hover시 #1d4ed8
- padding 12px 24px, border-radius 6px
- 0.15s ease transition
- focus-visible outline 2px offset 2px
- HTML + CSS만, JS 없음

The AI now has no ambiguity. The result matches your intent on the first try.

The specificity spectrum

You don’t always need maximum specificity. Match detail level to stakes:

SituationSpecificity needed
Exploring ideasLow — let AI surprise you
Building a componentMedium — colors, layout, behavior
Production-readyHigh — states, accessibility, edge cases

Hands-on: 5 buttons from 5 prompts

Open the demo and read the five button variants. Each was generated from the prompt shown below it. Notice what changes when you specify more.

Your task: Write a prompt for a “destructive action” button (red, for delete operations) that includes hover, focus, and disabled states. Then compare it to the example shown at the end.