r/promptengineering•3개월 전•41•5
AI가 만드는 웹사이트는 다 똑같아 보임: 보라색 그레이디언트, Inter 폰트, 카드 3개 나열. 이걸 한 번에 해결하는 프롬프트.
Every website AI builds looks the same: purple gradient, Inter font, three cards in a row. Here's the one-paste fix that stops it.
핵심 요약
AI가 생성하는 뻔한 웹사이트 디자인을 탈피하기 위한 구체적인 디자인 시스템 프롬프트 공유.
- 디자인 획일화 — AI가 생성하는 웹사이트가 보라색 그레이디언트와 Inter 폰트 등 동일한 패턴을 반복함
- 시스템 프롬프트 — 색상, 타이포그래피, 간격, 컴포넌트 규칙을 정의한 프롬프트를 통해 디자인을 개선함
- 디자인 테마 제공 — 기술, 다크 프리미엄, 브루탈리즘 등 10가지 테마를 문서로 정리하여 제공함
당신도 수백 번은 봤을 겁니다. AI에게 랜딩 페이지를 만들어 달라고 하면 항상 똑같은 결과가 나옵니다. 흰색 배경에 보라색 그레이디언트, Inter 폰트, 중앙 정렬된 헤드라인과 그 아래 버튼, 그리고 똑같이 생긴 카드 3개가 나란히 배치되죠. 한 번 눈에 띄기 시작하면 계속 그것만 보이고, 당신이 만드는 모든 결과물이 다른 AI 사이트와 똑같아 보이게 만듭니다.
무언가를 만들기 전에 아래와 같은 시스템을 먼저 붙여넣고, 원하는 것을 말해보세요:
Use this design system for everything you build.
Follow it precisely.
AESTHETIC: Soft, human, approachable, calm. Warm
tones, gently rounded forms, welcoming, never clinical.
COLOURS (use these exact values as CSS variables):
- Background: #FBF7F2 (warm cream, never pure white)
- Surface: #FFFFFF
- Primary text: #3A342E (warm charcoal)
- Secondary text: #8A8178
- Accent: #E07856 (warm coral)
- Secondary accent: #7BA88F (soft sage green)
- Border: #EDE6DD
TYPOGRAPHY:
- Headings: "Fraunces" (serif, from Google Fonts),
weight 600
- Body: "Source Sans 3" (from Google Fonts)
- Never use Inter, Roboto, or system fonts
- Type scale: 14 / 15 / 16 / 22 / 56px, line height 1.7
SPACING: 4px base. Scale: 8 / 16 / 22 / 34 / 56px.
Generous, never cramped.
COMPONENTS:
- Asymmetric hero: reassuring copy on one side, a
functional card on the other, not centered
- Rounded everything: cards, inputs, tags (12 to 24px
radius)
- Buttons: sage green pill for nav, solid coral for
primary actions
- Pill tags with a hairline border
AVOID: purple, gradients, pure white backgrounds,
sharp corners, cold greys, clinical blues, Inter font.
그런 다음 원하는 것을 말하세요. 예를 들어 "위 시스템을 사용하여 마사지 치료사를 위한 예약 페이지를 만들어줘"라고 하면, 평소의 뻔한 템플릿 대신 따뜻하고 의도가 담긴 결과물을 얻을 수 있습니다.
기술, 다크 프리미엄, 에디토리얼, 브루탈리즘 등 10가지 디자인 테마를 정리했습니다. 각 테마마다 정확한 색상, 폰트, 컴포넌트 규칙을 포함해 바로 붙여넣을 수 있게 만들었으니, 비즈니스 성격에 맞는 디자인을 찾으신다면 여기 문서를 확인해 보세요.
