안티-슬롭
바이브 코딩된 UI는 예측 가능한 방식으로 실패합니다. 이 스킬은 세 가지를 하나의 워크플로우로 통합합니다: unslop의 패스-바이-패스 방식, taste-skill의 아트 디렉션 도구, 그리고 20가지 시대에 뒤처진 징후 목록과 이를 기계적으로 잡아내는 스크립트입니다.
크레딧 및 라이선스
- 이 방법은 unslop (Damir Sokolovsky, https://github.com/heydamir/unslop) 에서改编했으며, CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) 라이선스를 따릅니다. Leonxlnx의 taste-skill과 Molveau의 tells를
references/playbook.md에 병합 및 요약했습니다. 모든 복사본이나 각색본에 이 크레딧을 유지하세요. 원본은 수정 없이references/vendor/unslop/에 보관되어 있습니다. - 아트 디렉션 실행, 하우스 룰 및 인스펙터는 taste-skill (Leonxlnx, https://github.com/Leonxlnx/taste-skill) 에서 제공되며, MIT 라이선스로
references/vendor/taste/에 수정 없이 보관되어 있습니다. - 20가지 징후 목록과
scripts/detect-tells.mjs는 Molveau의 자체 저작물이며 MIT 라이선스를 따릅니다. scripts/story.mjs는 unslop의 렌더러에서改编했으며(CC BY 4.0, 변경 사항은 헤더에 명시), 로컬 서버인scripts/story-server.mjs와 마찬가지로 CC BY 4.0을 유지합니다.scripts/story-contrast.mjs는 Molveau의 자체 저작물로 MIT 라이선스입니다.
시작하기
먼저 references/playbook.md를 읽으세요. "Do this first" 블록부터 시작하고, 심층 분석이나 작업 예제가 필요할 때만 vendor 파일을 여세요. 플레이북은 통합된 교리(방향, 패스, 카피, 간격, 색상, 유형, 아이콘, 디테일, 데이터, 앱 화면, 이미지, 모션, 체크)를 소스 태그와 출처 간 의견 차이에 대한 결정과 함께 제공합니다. 아래 "무엇을 언제 읽을까" 표는 깊이 인덱스입니다.
중복 참고: 이것은 AI-룩 패스입니다. ui 스킬의 비평 행은 더 가벼운 일반 디자인 리뷰이고, design-grill은 심층 다중 렌즈 감사입니다. 징후 너머의 디자인 품질을 위해 이들을 사용하세요.
방향 게이트
새 페이지나 화면의 코드를 작성하기 전, 그리고 모든 헤비-슬롭 실행의 3단계로 이 작업을 수행하세요. 요청이 한 줄이거나 "그냥 해"라고 하더라도 말입니다. 이 스킬의 나머지 부분은 실수를 제거할 뿐, 화면에 개성을 부여하지는 않습니다. 이 단계를 건너뛰면 결과는 모든 모델이 만드는 평범한 페이지가 됩니다: 디테일은 맞지만, 누구의 것도 아닌.
- 다섯 줄. 제품: 무엇을 하는가, 누구를 위한 것인가. 성격: 두세 개의 구체적인 단어 (
차분한, 정확한, 약간 따뜻한), 절대 깔끔한, 현대적인, 세련된, 미니멀한, 프리미엄 같은 단어는 안 됩니다. 세계: 제품이 속한 장소나 재료; 중성색을 물들이고 강조색을 결정합니다. 순간: 풍부한 색상과 디테일을 받을 한두 곳. 시그니처: 이 제품만이 가지고 있는 작은 디테일 하나, 일관되게 사용됩니다. 순간은 단순히 정리되는 것이 아니라, 그것이 말해야 할 것을 위해 다시 그려집니다(부드러운 선, 대칭 비교, 실제 스케일을 가진 차트), 또는 제품 자체의 객체가 무게와 빛으로 렌더링됩니다. - 인벤토리, 그 다음 아이디어. 경쟁사가 공유하지 않는 8~12가지 항목을 나열하세요(이름, 거리, 브리프의 숫자, 재료, 도구, 의식, 그 업계에서 인쇄하는 문서). "이 화면에서, [하나의 항목]이 [장치]가 된다"라고 쓰세요. 그 장치가 순간입니다.
- 2차 기본값을 거부하세요. 브랜드가 이미 소유하지 않은 한. 이것들은 모델이 명백한 징후가 금지된 후에 손을 뻗는 것들입니다:
- 크림, 석재 또는 따뜻한 오프-화이트 페이지에 번트 오렌지, 테라코타, 세이지 또는 포레스트 강조색, 세리프 헤드라인이 있거나 없거나 ("종이와 잉크" 느낌은 방향이 아닌 새로운 기본값입니다);
- 헤드라인으로 Fraunces, Instrument Serif, Playfair 또는 Georgia를 반사적으로 사용; system-ui가 유일한 서체;
- 흰색에 Inter 또는 Geist + 인디고 또는 파랑 강조색 하나;
- 히어로, 세 가지 기능, 사용후기, 클릭 유도 문구 순서, 이에 대한 논쟁 없이; 앱 화면에서는 막대 차트 위에 네 개의 동일한 통계 카드;
- 가운데 정렬된 눈썹, 헤드라인 및 두 개의 버튼이 전체 첫 화면을 구성.
- 교체 테스트. 이름과 업계를 경쟁사의 것으로 바꾸세요. 화면이 여전히 맞다면, 주장, 순간 및 시그니처를 변경하고 다시 테스트하세요.
- 보여주고 기다리세요. 다섯 줄과 아이디어를 보여주고 소유자의 응답을 기다리세요. 물어볼 수 없다면(사용자가 그냥 만들라고 했거나, 사람 없이 실행하는 경우), 메인 파일 상단에 주석으로 작성하고 정확히 그대로 만드세요.
심층: anti-slop 플레이북 §2 (방향) 및 §12 (앱 화면); 실제 참고 자료를 위한 design-inspiration-index 스킬.
핵심 아이디어
슬롭은 색상과 효과를 크롬(배경, 버튼, 테두리, 레이블)에 퍼뜨립니다. 크래프트는 크롬을 조용하게 유지하고 사람들이 기억하는 한두 개의 콘텐츠 순간에 풍부함을 넣습니다. 슬롭을 제거하는 것은 절반의 작업일 뿐입니다. 어떤 제품에나 속할 수 있는 깔끔한 화면은 다음 템플릿입니다. 모든 실행은 오직 이 제품만이 가질 수 있는 화면으로 끝납니다.
작업 순서
- 처음부터 페이지를 만들거나 완전히 재설계? taste-skill의 실행(
references/vendor/taste/taste-skill.md)을 플레이북의 재정의와 함께 따르세요. 앱 화면: 플레이북 §12. - 화면을 보세요, 코드만이 아니라 가능하면 렌더링하여.
- 감사 징후 목록(
references/vendor/unslop/unslop/references/signs.md)과 20가지 징후(references/tells.md)를 기준으로. 징후당 한 줄, 위치 포함. - 작업 규모를 평가 (헤비, 라이트, 슬롭 없음)하고 방향을 작성한 다음, 소유자의 응답을 기다리세요 (플레이북 §1 및 §2).
- 아홉 패스로 수정, 각각 전체 화면에 걸쳐: 간격, 색상, 아이콘, 카피, 타이포그래피, 레이아웃, 디테일, 비주얼, 모션 (플레이북 §3 ~ §14).
- 확인 플레이북 체크리스트로, 감지기를 실행하고, 감사 결과와 비교 (플레이북 §15).
- 보고 방향, 패스당 몇 줄, 그리고 제거했거나 확인할 수 없는 모든 주장.
20가지 징후
전체 표와 대체 방법: references/tells.md. 요약과 스크립트가 잡아내는 것:
| # | 징후 | 스크립트 |
|---|---|---|
| 1 | 보라색/푹시아/인디고 그라데이션 | 예 |
| 2 | 그라데이션 텍스트 | 예 |
| 3 | 카피 내 이모지 | 예 |
| 4 | Inter 또는 Space Grotesk 도배 | 아니오 |
| 5 | 색상이 있는 사이드-스트라이프 테두리 | 예 |
| 6 | 장식적인 유리 모피즘 | 예 |
| 7 | 저대비 다크 모드 | 아니오 |
| 8 | 세 개의 아이콘 박스가 한 줄 | 아니오 |
| 9 | 헤드라인 위 눈썹 필 | 아니오 |
| 10 | Lucide 기본 사용 | 예 |
| 11 | 수정되지 않은 shadcn/ui | 아니오 |
| 12 | 스크롤 시 페이드인 | 예 |
| 13 | 커서 따라다니는 글로우 | 아니오 |
| 14 | 버튼 호버 페이드 | 예 |
| 15 | 일관성 없는 간격 | 아니오 |
| 16 | 카피 내 엠 대시 | 예 |
| 17 | 버즈워드 카피 | 예 |
| 18 | 세리프 이탤릭 강조 단어 | 아니오 |
| 19 | Space Grotesk와 일반적인 디스플레이 세리프 파트너 (references/tells.md의 쌍) | 예 |
| 20 | 그라데이션 위 그레인 | 아니오 |
감지기
node <스킬 폴더>/scripts/detect-tells.mjs [--json] [--include-tests] <경로...>
제로 의존성, Node 20 이상, 이 스킬 폴더 외부의 import 없음, 따라서 스킬이 단독으로 설치되어도 작동합니다. 종료 코드 0: 깨끗함, 1: 발견됨, 2: 사용법 오류. node_modules .git .next dist build .open-next coverage 및 테스트 파일은 건너<0xEB9C>니다. 경로:줄 #tell 레이블 일치 형식으로 보고합니다. 한계는 references/tells.md 끝에 나열되어 있습니다; 적중을 "이 부분을 보세요"로 취급하세요.
프로젝트에서 래칫 테스트
래칫은 오늘의 개수를 고정하고 증가하면 실패하므로, 징후는 줄어들 수만 있습니다. node:test를 위한 스케치 (경로와 기준선을 조정하세요):
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSync는 Node 22 필요; 20에서는 직접 폴더를 탐색하세요
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // tell 번호 -> 오늘 허용되는 발견 수
test('새로운 바이브 코딩 징후 없음', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((path) => ({ path, text: readFileSync(path, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `tell ${tell}: ${n}개 발견, 기준선 ${BASELINE[tell] ?? 0}`);
});
하나를 수정할 때마다 기준선을 낮추세요; 절대 올리지 마세요.
스토리 비디오
약 10초 분량의 정사각형 클립으로, 화면이 레드라인과 함께 단계별로 스스로 슬롭을 제거합니다. 요청받았을 때만 만드세요. 스토리 파일을 unslop의 "Story video" 섹션 (references/vendor/unslop/unslop.md: 하나의 story.html, 상단에 .s1 ~ .s5 CSS, data-gap, data-radius, data-slop, 스왑)에 정확히 맞게 빌드한 다음, 이 스킬의改编된 렌더러로 렌더링하세요:
node <스킬 폴더>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wide for 16:9, --play to watch
unslop의 렌더러에 추가된 것:
- 접근성 단계. 이름에 "Accessibility"가 포함된 단계는 실시간 측정값을 보여줍니다. 대비가 변하는 두세 개의 텍스트 요소에
data-contrast를 넣으세요; 각 요소는 WCAG 비율을 표시하며, 4.5:1(큰 텍스트의 경우 3:1) 미만이면 빨간색, 통과하면 흰색AA, 색상을 읽을 수 없을 때(예:lab()또는color(display-p3 ...))는 회색?를 표시합니다. 해당 요소에는 sRGB, 16진수 또는oklch()색상을 사용하세요. 한두 개의 컨트롤에data-target을 넣으세요; 각각 크기를 표시하며, 24x24 픽셀 미만이면 빨간색입니다. "이전" 상태에서 실패하는 요소를 선택하세요; "이후" 상태에서 여전히 실패하는 요소는 절대 표시하지 마세요. - 캡션,
<meta name="story-caption" content="...">, 왼쪽 하단에. 실행에 대해 사실인 것만 명시하세요(예: 모델 및 화면이 수동으로 편집되지 않았음). - 크레딧
molveau/skills · unslop method by @heydamir는 모든 프레임에 그려집니다, CC BY 4.0 라이선스 요구 사항입니다. 제거하지 마세요.
스토리는 실제 파일의 프레젠테이션입니다: 0단계는 원래의 이전 상태이고, 마지막 단계는 출시하는 깨끗한 파일과 동일합니다. 출시된 화면 이상으로 스토리를 다듬지 마세요.
무엇을 언제 읽을까
| 필요 | 읽을 것 |
|---|---|
| 병합된 규칙, 값 및 충돌 처리 | references/playbook.md |
| 대체 방법과 감지기 한계를 포함한 20가지 징후 | references/tells.md |
| unslop의 전체 방법, 방향, 아홉 패스, 체크리스트, 스토리 비디오 | references/vendor/unslop/unslop.md |
| 정확한 값 (간격, 타입 스케일, 램프, 모션 곡선) | references/vendor/unslop/unslop/references/tokens.md (모션 값은 대체됨: ui 플레이북 §10 및 motion §5가 우선하며, 플레이북 충돌 19) |
| 감사 징후 목록 | references/vendor/unslop/unslop/references/signs.md |
| 히어로 비주얼, 이미지 프롬프트, 어떤 스타일이 효과적인지 | references/vendor/unslop/unslop/references/visuals.md |
| 글리프, 하프톤, 디더 및 듀오톤 코드 | references/vendor/unslop/unslop/references/effects.md |
| 완성된 참조 화면 (이미지) | references/vendor/unslop/unslop/references/refs.md |
| 라이브 URL 스냅샷 찍어 복사본 작업 | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| 처음부터 페이지 또는 깊은 재설계: 인벤토리, 다루어진 방향, 아이디어, 하우스 룰, 게이트 | references/vendor/taste/taste-skill.md |
| 대시보드, 관리자 및 설정 화면 심층 | references/vendor/taste/taste-skill/references/app-screens.md |
| 카피 덱, 두 줄 산술, 꾸며내지 않은 증명 | references/vendor/taste/taste-skill/references/copy.md |
| 타입 스케일, 디스플레이 설정, 폰트 로딩 | references/vendor/taste/taste-skill/references/type.md |
| 팔레트 역할, 필드, 어두운 페이지, 대비 | references/vendor/taste/taste-skill/references/colour.md |
| 여백, 빈 공간, 프레임, 섹션, 모바일 | references/vendor/taste/taste-skill/references/layout.md |
| 사진 및 비디오 찾기, 크레딧, 배치 및 처리 | references/vendor/taste/taste-skill/references/imagery.md |
모션 레시피 (옵트인: motion 플레이북 §9) 및 스크롤 씬 | references/vendor/taste/taste-skill/references/motion.md, references/vendor/taste/taste-skill/references/scenes.md |
| 루브릭으로 결과 평가 | references/vendor/taste/taste-skill/references/critique.md |
| 웨이브별 시대에 뒤처진 징후 레지스트리 | references/vendor/taste/taste-skill/references/tells.md |
| taste의 숫자 뒤에 있는 연구 | references/vendor/taste/taste-skill/references/research.md |
벤더 파일은 업스트림 레이아웃을 유지하므로, 내부의 일부 상대 링크가 여기서 확인되지 않을 수 있습니다. taste-skill의 스크립트는 library/ 폴더를 읽습니다 (전체를 읽지 말고 draw.mjs를 실행하세요); 일부 스크립트는 Node 22, 브라우저, Playwright, ffmpeg 또는 네트워크 액세스가 필요합니다. 실행할 시각적 검사는 ui 플레이북 충돌 14에서 결정됩니다 (이 플레이북의 충돌 14가 이를 가리킵니다).