평범한
인터페이스를
거부한다.
매니페스토 · 11 슬라이드
프론트엔드 디자인 스킬은
의도된 한 가지 미감 을 끝까지 밀어붙이는
도구다. 다섯 기둥과 다섯 단계 프롬프트 — 한 데크에 풀어낸다.
§ 02 — 다섯 기둥
다섯 개의 비협상 기둥.
스킬 가이드의 다섯 축. 각 줄의 따라 는 그대로 가져가고,
피해 는 의식적으로 끊어내야 결과물이 AI 가 만든 듯 미끄러지지
않는다.
-
01
타이포그래피
기본보다 개성 을.
— Inter / Roboto / Arial 회피.
-
02
색
균형보다 지배 를.
— 80 / 15 / 5 비율.
-
03
모션
한 번 의 치밀한 등장.
— hover 잔치 회피.
-
04
공간
대칭보다 비대칭 을.
— 정중앙 hero 회피.
-
05
배경
평평함보다 분위기 를.
— grain · mesh · 룰.
§ 03 — 프롬프트 방법
타이핑 전 다섯 결정.
스킬을 호출하기 전 에 다섯 가지 결정이 박혀야 결과물이
일관되게 나온다. 모호하게 던지면 AI 가 기본 자세로 돌아간다.
— 01극단의 톤
— 02청중 · 목적
— 03기억할 한 가지
— 04제약
— 05안티패턴
— 01
극단 의 톤을 정하라.
'세련된 모던' 같은 중간 어휘는 AI 한테 아무것도 말하지
않는다. 한 단어 단정 — 잔혹할 만큼 미니멀 · 맥시멀 카오스 · 편집
매거진 · 브루탈리스트 raw · 럭셔리 정제 · 플레이풀 · 파스텔 · 산업적
유틸리티 · 레트로 퓨처.
tone editorial-magazine × dark
vibe Wallpaper* · The Gentlewoman
avoid
corporate · clinical · default
— 02
청중 · 목적을 호명하라.
누가 이걸 보는가. 왜 보는가. 30 초 보고 떠나는 사람과 5 분 정독하는
사람의 인터페이스는 같을 수 없다. 청중이 명시돼야 카피·정보 밀도·CTA
자세가 정해진다.
who 친구·동료, AI 도구 호기심 있는 사람
why 이 스킬을 써볼지 30 초 안에 판단
cta "/frontend-design 한번 호출해 봐"
— 03
기억할 한 가지.
이 페이지를 본 사람이 딱 하나 기억할 게 뭐냐. 그 한 개를
정해두지 않으면 결과물이 평균에 수렴한다. 매니페스토 한 줄이거나,
커다란 이탤릭 숫자거나, 한 색의 단호한 비명이거나.
remember "AI 슬롭 거부"
visual oversized italic 숫자 마커
color electric coral 한 줄
— 04
제약 을 박아라.
기술 스택 · 폰트 · 색 hex · 길이. 모호하게 두면 AI 가 기본값으로
미끄러진다. hex 까지 박아라. 폰트는 두 가지 로 정확히
짚어라. 길이도 '적당히' 가 아니라 '5 섹션 · 한 페이지' 처럼.
tech single HTML, no framework
fonts Fraunces (display) · JetBrains Mono
palette
#0a0908 · #f5f1e8 · #ff5c4d
length 11 슬라이드 · 100vh 잠금
— 05
안티패턴 을 명시하라.
하지 말 것 을 명시하면 AI 의 기본값 회귀를 차단한다. Inter
· 보라색 그라뎬트 · 정중앙 hero — 이런 흔한 자세를 미리 끊어내야
다른 곳으로 흐른다.
no Inter / Roboto / Arial / system-ui
no purple → indigo gradient on white
no centered hero + 3-col card matrix
no evenly distributed pastel palette
§ 04 — 회피
슬롭 갤러리.
AI 가 아무 지시 없이도 도착하는 여섯 자세. 명시적으로
끊어내면 결과물이 즉시 다른 곳으로 흐른다.
— 01
Inter · Roboto · Arial · system-ui
타이포 기본값
— 02
Purple → indigo gradient on white
색 클리셰
— 03
Centered hero + 3-col cards
공간 기본값
— 04
Evenly distributed pastel palette
지배 부재
— 05
Scattered hover micro-interactions
모션 노이즈
— 06
Flat solid background, no atmosphere
배경 평평함
§ 05 — 메타
이 데크가 어떻게 프롬프트되었나.
— 끝.
복사. · 톤 &
팔레트 갈음. ·
/frontend-design 재호출.