Lesson 02
Anatomy of a Good Prompt
Five buttons. Five prompts. See what changes when you specify more.
Prompt
버튼 만들어줘
Result
AI guessed everything. Browser default styling. Color, size, font — all arbitrary.
Prompt
primary CTA 버튼, 파란색, padding 12px 24px
Result
Better, but no hover state, no border-radius, no font control. Still guessing.
Prompt
primary CTA 버튼. 배경 #2563eb, hover시 #1d4ed8. padding 12px 24px, border-radius 6px. 0.15s ease transition.
Result
Looks good. But still missing focus state for keyboard users.
Prompt
primary CTA 버튼. 배경 #2563eb, hover #1d4ed8, active #1e40af. border-radius 6px, padding 12px 24px. focus-visible: outline 2px solid #2563eb, offset 2px. transition 0.15s ease.
Result
Production-ready. Try Tab + Space to see the focus ring.
Prompt
destructive action 버튼 (삭제용). 배경 #dc2626, hover #b91c1c, active #991b1b. border-radius 6px, padding 10px 20px. disabled state: opacity 0.4, cursor not-allowed. focus-visible ring. font-size 0.875rem.
Result
Every state specified. Left: normal. Right: disabled. Zero guessing.
The formula
Context
What kind of element? Where does it live? What design system?
Visual spec
Colors, spacing, typography, border-radius
States
hover, active, focus, disabled, loading
Constraints
No JS, no dependencies, must use existing tokens