밤티나는 AI 디자인 벗어나는 법

순서는 셋입니다. 취향을 모으고 → 도구를 붙이고 → 넓게 펼쳐서 고릅니다. 1번이 제일 지루하고 제일 중요해요.

---

0. 오늘 할 일 하나

도구부터 깔지 마세요. 오늘은 스무 장만 주우면 됩니다.

스크롤하다 눈이 멈춘 화면을 그냥 찍으세요. 판단하지 말고, 정리도 나중에. 스무 장이 모이면 그때부터 시킬 말이 생깁니다.

📌 왜 이 순서인가. 도구를 먼저 깔면 “좋게 만들어줘”밖에 못 시킵니다. 그건 지시가 아니라 기도예요. 모아 둔 게 있어야 “저 결로”라고 말할 수 있습니다.

---

1. 취향 서랍 만들기

줍는 법

어디서	무엇을
Dribbble	웹 디자인으로 검색하고 인기순 정렬
Pinterest	프롬프트로는 절대 안 나올 히어로 레이아웃
X (트위터)	디자이너들이 올리는 실제 작업 화면
그냥 웹	스크롤을 멈추게 한 사이트는 전부

캡처보다 주소가 낫습니다. 캡처는 한 장면이지만 주소는 움직임·이음새·반응까지 들어 있어요. 둘 다 있으면 제일 좋습니다.

📌 처음 시작은 핀터레스트가 제일 편합니다. 이유가 셋이에요. ① 보드가 그대로 ‘결 폴더’가 됩니다. 바로 아래에서 말하는 ‘저밀도-인쇄물’, ‘어두운-단색’ 같은 분류를 따로 만들 것 없이 보드로 바로 쌓으면 됩니다. ② 모으는 마찰이 가장 적습니다. 저장 버튼 하나라 스크롤하다가 그냥 누를 수 있습니다. 폴더 만들고 파일 이름 짓는 과정이 없어서 스무 장까지 가는 게 금방입니다. ③ 추천이 내 취향 쪽으로 기웁니다. 몇 장만 저장해도 비슷한 결을 계속 물어다 줍니다. 드리범·X 는 검색을 내가 계속 넘겨야 하는데, 핀터레스트는 모을수록 알아서 모아 줍니다.

다만 핀터레스트만 쓰면 몰개집니다. 거기 올라오는 건 ‘예쁘게 찍힌 한 장면’이지 살아 있는 사이트가 아닙니다. 마음에 드는 게 생기면 원본 사이트를 찾아 주소를 같이 적어 두세요. 그게 4조각 프롬프트의 ‘레퍼런스’ 자리에 들어갑니다.

묶는 법

프로젝트가 아니라 결로 묶습니다. “쇼핑몰 모음” 말고 “여백 많은 인쇄물 느낌” 이렇게요.

폴더 이름을 이렇게 지어 보세요. 이게 그대로 프롬프트에 들어갑니다.

취향/
  저밀도-인쇄물/      여백 넓고 활자가 주인공
  어두운-단색/        한 가지 색, 대비로만 승부
  거친-손그림/        정렬이 살짝 어긋난, 사람 손 느낌
  고전-세리프/        세리프 본문, 좁은 단

⚠️ 이름을 못 붙이면 시킬 수도 없습니다. “이거 느낌으로”는 지시가 아니에요. 이름이 곧 지시입니다. 이름이 안 떠오르면 그 폴더는 아직 결이 안 잡힌 겁니다 — 더 모으세요.

클로드에게 읽히는 법

폴더째 던지면 안 읽습니다. 각 항목에 네 줄을 붙여 주세요.

파일: 저밀도-인쇄물/01-oxide.png
출처: https://oxide.computer

결:        저밀도 인쇄물
어휘:      넓은 여백, 큰 활자, 얇은 괘선, 사진 없음
키워드:    generous whitespace, editorial, hairline rules
한 줄 요약: 기술 문서를 잡지처럼 읽히게 만든 사이트

이걸 항목마다 써 두면 나중에 키워드 줄만 복사해서 프롬프트에 넣으면 됩니다. 손으로 하기 귀찮으면 클로드에게 시키세요.

취향/ 폴더의 이미지들을 읽고 항목마다
결 / 어휘 / 키워드 / 한 줄 요약 네 줄을 붙여서
취향/INDEX.md 로 정리해줘. 결이 애매한 건 "미정"으로 두고.

---

2. 도구 붙이기

impeccable — 디자인 어휘를 쥐여 주는 스킬

클로드가 디자인 얘기를 못 알아듣는 게 아니라, 공용 어휘가 없어서 매번 다르게 알아듣습니다. impeccable 이 그 어휘를 만들어 줍니다.

npx impeccable install

깔고 나면 이렇게 씁니다.

/impeccable init      프로젝트 성격을 물어보고 PRODUCT.md 를 씁니다
/impeccable audit     지금 화면에서 AI 티를 찾아냅니다
/impeccable bolder    안전하게 빠진 디자인을 밀어 올립니다
/impeccable           그냥 치면 전체 명령 목록이 나옵니다

명령	23개
검출 규칙	59개
라이선스	Apache-2.0
주소	github.com/pbakaus/impeccable

💡 이게 제일 좋은 점인데 원본 게시물엔 없더라고요. 검출기는 LLM 도 API 키도 없이 돕니다. CLI 와 브라우저 확장이 59개 규칙을 결정적으로 돌려요. 그래서 공짜고, 빠르고, 매번 같은 결과가 나옵니다. 보라 그라디언트, 튀는 바운스 이징, 검은 글로우, 좁은 여백, 작은 터치 영역 같은 걸 사람 판단 없이 잡아냅니다.

편집할 때마다 자동으로 돌게 하는 훅도 같이 깔립니다. 설치할 때 물어봐요.

taste-skill — 결·타입·모션·여백

npx skills add https://github.com/Leonxlnx/taste-skill

라이선스	MIT
주소	github.com/Leonxlnx/taste-skill

⚠️ v2 는 아직 실험판입니다. README 에 대놓고 experimental 이라고 적혀 있고 “v2.0.0 안정판을 향해 계속 고치는 중”이라고 합니다. 그래서 v1 을 따로 남겨 뒀어요. 뭔가 틀어지면 이걸로 돌아가면 됩니다. ` npx skills add https://github.com/Leonxlnx/taste-skill —skill “design-taste-frontend-v1” `

v1 로 돌아가는 명령은 이겁니다.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

안 다는 게 나은 것

하나만 하는 스킬. “랜딩페이지 만들어주는 스킬” 같은 거요. 처음 한 번은 그럴듯한데 두 번째부터 전부 똑같이 나옵니다. 남의 취향이 고정돼 있는 거라 내 서랍이 낄 자리가 없어요.

정해 주는 것보다 고를 수 있게 해주는 것을 고르세요. 운전대는 내가 잡아야 합니다.

---

3. 넓게 펼쳐서 고르기

한 번에 뽑고 “좀 더 예쁘게”를 반복하는 게 제일 흔한 실패입니다. 그건 복불복이에요.

5가지 결  →  3가지 변형  →  1개 선택  →  다듬기

순서

1. 다섯 갈래를 한 화면에. 서랍에서 결 다섯 개를 골라 같은 내용으로 다섯 벌 뽑습니다. 나란히 놓고 봅니다.

2. 고른 갈래로 본문 변형 셋. 히어로만 보고 고르면 본문에서 무너집니다.

3. 히어로 이미지만 따로. 이건 여러 번 굴려도 싼 편이에요.

4. 마지막에 조금씩. 폰트·색·모션은 다 정해진 뒤에 손댑니다.

시키는 말은 이렇게요.

같은 내용으로 다섯 벌 만들어줘. 각각 다른 결로.
저밀도-인쇄물 / 어두운-단색 / 거친-손그림 / 고전-세리프 / 넓은-사진
한 페이지에 다섯 개를 나란히 볼 수 있게 해줘. 아직 다듬지 마.

💡 터미널은 선택지를 숨깁니다. 글로만 오가면 “이거 어때요?” 하나씩만 보게 돼요. 나란히 놓고 눈으로 비교해야 고를 수 있습니다.

---

4. 되는 프롬프트 — 네 조각

design.md 를 만 줄 쓸 필요 없습니다. 네 조각이면 됩니다.

미감:     저밀도-인쇄물 결로. 여백 넓고 활자가 주인공.

레퍼런스: https://oxide.computer
          https://linear.app
          베끼지 말고 결만 맞춰줘. 레이아웃은 우리 것으로.

의도:     백엔드 개발자가 보고, 5분 안에 문서로 넘어가게.
          가입이 목표가 아니라 "믿을 만하네"가 목표.

금지선:   보라/파랑 그라디언트 금지.
          둥근 카드에 그림자 얹는 패턴 금지.
          히어로에 스톡 사진 금지.
          이모지 불릿 금지.

왜 이 넷인가

조각	없으면
미감	평균값이 나옵니다. AI 티의 정체가 그겁니다
레퍼런스	말로만 하면 서로 다른 걸 상상합니다
의도	예쁘지만 아무 일도 안 시키는 화면이 나옵니다
금지선	방금 지운 걸 다음 판에 또 합니다

📌 넷 중 제일 자주 빠지는 게 금지선입니다. 그리고 제일 효과가 좋아요. 싫은 걸 아는 게 좋은 걸 아는 것보다 쉽고, 그래서 더 정확합니다. 한 번 만들어 두면 계속 씁니다 — 프로젝트마다 복사하세요.

---

5. 내 것이 될 때까지

“더 프리미엄하게”는 안 통합니다. 손잡이를 만들고 돌리세요.

순서	무엇을
먼저	히어로. 몇 개 뽑아 고르고 색을 맞춥니다
다음	이음새. 히어로와 본문이 뚝 끊기지 않게
그다음	움직임. 무겁게 눌러 앉는 느낌으로
그리고	조절 막대를 만들어 달라고 시킵니다
늘	내 것 같아질 때까지 레퍼런스를 더 먹입니다

네 번째가 핵심입니다.

화면 위에 개발용 조절 막대를 하나 붙여줘.
본문 폰트 크기, 제목 크기, 강조색, 여백 배율, 모션 속도를
슬라이더로 바로 돌려볼 수 있게. 배포할 땐 빠지게 해줘.

이걸 만들어 두면 “한 단계만 크게”를 말로 부탁할 필요가 없어집니다. 직접 돌려 보고 마음에 드는 값을 알려 주면 돼요.

---

6. 확인한 것 / 못 한 것

확인한 것 (2026년 8월 7일 직접 조회)

• pbakaus/impeccable — ★56,531 · Apache-2.0 · 당일에도 푸시됨 · 아카이브 아님
• impeccable README 원문: “1 skill, 23 commands, live browser iteration, and 59 deterministic detector rules”
• impeccable README 원문: 검출기는 “no LLM and no API key” 로 돈다
• Leonxlnx/taste-skill — ★73,588 · MIT
• taste-skill README: v2 는 experimental, v1 은 design-taste-frontend-v1 로 보존
• higgsfield.ai · 21st.dev — 둘 다 살아 있음

원본 게시물에서 고친 것

소재가 된 게시물의 숫자를 대조했는데, 올린 지 3일 만에 이미 몇 개가 안 맞았습니다.

원본	실제
impeccable “almost 50K stars”	★56,531
impeccable “46 slop patterns”	59개
impeccable “7 DIMENSIONS”	README 에 그런 구분 없음
taste-skill “66K stars”	★73,588

별 개수는 원래 빨리 오릅니다. 그래서 이 문서에도 잰 날짜를 같이 적어 뒀어요. 지금 보시는 시점엔 또 다를 겁니다.

못 한 것

• 이 워크플로우로 사이트를 처음부터 끝까지 만들어 보지는 않았습니다. 위 프롬프트들은 형식을 보여 주려고 쓴 것이지, 그 결과물을 여기 옮긴 게 아니에요
• impeccable 의 59개 규칙이 실제로 뭘 잡는지 전수로 확인하지 않았습니다. README 가 예로 든 것(side-tab borders, purple gradients, bounce easing, dark glows, line length, cramped padding, small touch targets, skipped headings)까지만 봤습니다
• taste-skill v2 를 깔아서 v1 과 결과를 비교해 보지 않았습니다. 실험판이라고 적혀 있다는 사실만 전합니다
• Higgsfield 는 유료 서비스입니다. 얼마인지, 무료 구간이 있는지는 확인 안 했어요. 그래서 이 문서에서 필수로 넣지 않았습니다

---

7. 처음이면 이렇게

1. 오늘 — 스무 장 줍기. 도구는 깔지 마세요. 폴더 하나 만들고 눈에 걸리는 걸 다 넣습니다

2. 내일 — 이름 붙이기. 결로 묶고 폴더 이름을 답니다. 여기까지가 진짜 일이에요

3. 그다음 — impeccable 하나만. audit 을 이미 만든 화면에 대고 돌려 보세요. 뭐가 걸리는지 보면 감이 옵니다

4. 마지막 — 넓게 펼치기. 다섯 갈래를 나란히 뽑아 보는 걸 한 번만 해 보면 다시는 한 방으로 안 갑니다

1번과 2번이 지루해서 다들 건너뜁니다. 근데 3·4번의 효과가 전부 거기서 나와요.

---

궁금한 게 있으시면 인스타 DM 주세요. — 낭만빌더 김스듴