Shijiuwei/unslop

unslop은(는) 무엇을 하나요?

unslop은 Damir Sokolovsky(@heydamir)가 만들었으며, X에서 Unslopping 시리즈를 시작했습니다. CC BY 4.0 라이선스로 제공되므로, 복사하거나 수정할 때 이 크레딧을 유지하세요.

Vibecoded UI는 예측 가능한 방식으로 실패합니다. 모든 표면이 빛나고, 모든 라벨에 이모지가 있으며, 간격은 그날 모델이 입력한 대로이며, 카피는 소리칩니다. Unslopping은 공정을 수정하고 제품을 유지합니다. 기능, 콘텐츠 및 섹션의 순서는 그대로 유지됩니다. 변경되는 것은 모든 크기, 색상, 단어 및 이미지가 의도적이게 된다는 것입니다.

슬롭을 제거하는 것은 작업의 절반에 불과합니다. 깔끔하지만 어떤 제품에도 속할 수 있는 화면은 다음 템플릿입니다. 모든 실행은 오직 이 제품만이 가질 수 있는 화면으로 끝납니다.

슬롭과 공예의 차이는 풍부함이 가는 곳에 있습니다. 슬롭은 크롬, 배경, 버튼, 테두리 및 라벨에 색상과 효과를 퍼뜨립니다. 공예는 크롬을 조용하게 유지하고 풍부함을 사람들이 기억하는 한두 가지 콘텐츠 순간(예: 렌더링된 객체, 아름다운 차트 또는 제품 세계의 이미지)에 집중합니다.

전체 화면에서 한 번에 한 레이어씩, 디자이너가 하는 것처럼 레드라인 패스 작업을 수행하세요.

좋은 디자인이란

• 하나의 밝은 요소. 각 화면에는 색상과 공예를 전달하는 하나의 정제된 요소(렌더링된 객체, 그려진 장면 또는 풍부한 차트)가 있습니다. 주변의 모든 것은 조용해서 즉시 읽힙니다.
• 조용한 크롬. 내비게이션, 버튼 및 텍스트는 색조를 띤 중성색과 하나의 악센트를 사용합니다. 아무것도 빛나지 않으며, 밝은 요소와 경쟁하지 않습니다.
• 명확한 아이디어. 시각적 요소가 보여주는 것과 이것이 왜 이 제품에 속하는지 한 문장으로 말할 수 있어야 합니다.
• 평온한 공간 위의 텍스트. 헤드라인은 이미지나 레이아웃에서 비워둔 부분에 위치하며, 짧고 구체적이며, 하나의 기본 작업과 하나의 보조 작업이 있고 그 아래에 아무것도 쌓이지 않습니다.
• 실제 제품, 실제 재질. 미리보기는 실제 앱처럼 보이며 그럴듯한 데이터를 가지고 있고, 객체는 무게, 빛 및 그림자가 있는 실제 사물처럼 보입니다.

어떤 비주얼 스타일이 작동하는 경향이 있고 어떤 것이 실패하는지는 references/visuals.md에 있습니다. 학습할 완성된 예제는 references/refs.md에 있으며, 이미지를 글리프로 그리는 것과 같은 코드 처리는 references/effects.md에 있습니다.

실행 방법

1. 화면을 살펴보세요. 화면을 렌더링하는 파일을 찾으세요. 앱을 실행하거나 브라우저에서 파일을 열고 스크린샷을 찍을 수 있다면 그렇게 하세요. 그래야 코드뿐만 아니라 사람들이 보는 것을 판단할 수 있습니다.
   • 코드 없이 라이브 사이트 링크만 있는 경우? node <skill folder>/scripts/snapshot.mjs <url> unslop/original.html로 페이지를 저장하고 해당 파일의 복사본에서 작업하세요. 사용자가 보는 테마와 일치하도록 --dark 또는 --light를 추가하세요. 또한 라이브 페이지의 스크린샷인 original.live.png도 저장하므로, 저장된 복사본을 렌더링하고 시작하기 전에 둘을 비교하세요. 스크립트로 그려진 애니메이션 배경은 유지되지 않으므로, 라이브 페이지에서 감사 목록에 설명하세요.
   • 스크린샷만 있는 경우? 먼저 화면을 하나의 정적 HTML 파일로 최대한 가깝게 재구성하고 이를 원본으로 취급하세요.
   • 두 경우 모두 결과는 실제 사이트를 소유한 사람에게 전달할 수 있는 코드로 다시 디자인된 페이지이므로, 보고서에 그렇게 명시하세요.
2. 감사. references/signs.md를 살펴보고 찾은 모든 징후를 각각 위치와 함께 한 줄씩 나열하세요.
3. 변경할 양을 결정하세요. 계획을 세우기 전에 감사 내용을 정직하게 읽으세요.
   • 심한 슬롭, 색상, 타이포그래피, 아이콘 및 카피 전반에 걸쳐 많은 징후가 있는 경우. 아래의 전체 프로세스를 실행하세요.
   • 가벼운 슬롭, 대부분 디자인되었지만 몇 가지 징후가 남아 있는 화면. 다듬기 모드. 감사에서 찾은 것만 수정하고, 새로운 브랜드를 발명하는 대신 기존 브랜드에서 방향을 잡고, 팔레트, 타이포그래피, 레이아웃 및 비주얼을 유지하세요. 누락된 순간이나 히어로를 위한 장면과 같은 더 큰 아이디어는 변경 사항이 아닌 제안으로 보고서에 포함하세요.
   • 슬롭 없음. 솔직하게 말하고 기껏해야 두세 가지의 작은 개선점을 정확한 값과 함께 제안하세요. 사용자가 동의하는 경우에만 적용하고 거기서 멈추세요. 단지 다르게 보이기 위해 좋은 화면을 절대 변경하지 마세요.
4. 방향을 설정하고 멈추세요. 아래 설명된 다섯 줄을 작성하세요. 감사 내용과 방향을 사용자에게 보여주고 편집 전에 사용자의 답변을 기다리세요. 방향을 나중에 변경하면 모든 것을 다시 해야 하기 때문입니다. 사용자에게 질문하는 도구가 있다면 그것을 통해 질문하고, 그렇지 않으면 일반 텍스트로 질문하고 멈추세요. 사용자가 이미 그냥 하라고 말한 경우에만 기다리기를 생략하세요.
5. 9단계 패스를 순서대로 수정하세요. 다음 패스를 시작하기 전에 전체 화면에 걸쳐 패스를 완료하세요. 거의 모든 줄이 변경될 때는 패스를 순서대로 계획한 다음 모든 패스가 적용되는 한 한 번에 새 화면을 작성하세요. 리듬이 맞아야 다른 모든 것이 다르게 읽히므로 간격이 먼저 옵니다. 카피는 타이포그래피와 레이아웃보다 먼저 옵니다. 헤드라인의 길이가 크기와 위치를 결정하기 때문입니다. 비주얼과 모션은 마지막에 옵니다. 그것들이 없어도 잘 작동하는 화면에 맞춰야 하기 때문입니다.
6. 확인. 이 파일 끝에 있는 체크리스트를 실행하고, 다시 렌더링하여 감사 목록과 비교하세요. 목록에 남아 있는 것은 수정하세요.
7. 보고 방향, 각 패스당 몇 줄의 변경 사항, 그리고 작성한 이미지 프롬프트를 보고하세요.
8. 요청받거나 사용자가 공유할 무언가를 원할 때 기록하세요. 스토리 파일을 만들고 스토리 비디오에 설명된 비디오를 렌더링하세요. 사용자가 처음에 요청하면 각 패스를 진행하면서 스토리 파일에 작성하세요.

실행을 빠르게 유지하세요. 화면을 확인하기 위해 최대 세 번 렌더링하세요. 이미지를 생성할 때는 방향이 확인된 직후에 시작하고, 기다리는 대신 첫 번째 패스를 계속 수행하세요.

각 패스의 정확한 값은 references/tokens.md에 있습니다.

방향

아무것도 건드리기 전에 다섯 줄을 짧게 작성하세요. 페이지가 제품이 하는 일과 대상을 말하는 것에서 유도하세요. 절대 유행하는 것에서 유도하지 마세요.

• 제품. 무엇을 하고 누구를 위한 것인지, 평범한 한 문장으로.
• 성격. 차분하고, 정확하며, 약간 따뜻한 또는 빠르고, 기술적이며, 장난기 있는과 같은 구체적인 단어 두세 개. 깔끔한, 현대적인, 매끄러운, 미니멀한, 프리미엄과 같은 단어는 모든 템플릿을 설명하기 때문에 허용되지 않습니다.
• 세계. 제품이 자연스럽게 속하는 장소 또는 재질. 메모 앱은 종이와 잉크 근처에, 모니터링 도구는 계기와 야간 교대 근무 근처에, 여행 앱은 지도와 창문 빛 근처에 있습니다. 이 세계는 중성색의 색조, 악센트 및 비주얼을 설정합니다.
• 순간. 화면이 풍부한 색상, 재질 및 디테일을 얻는 한두 곳. 미리보기 내부의 렌더링된 카드나 장치, 각각이 시리즈를 의미하는 색상의 차트, 콘텐츠 옆에 배치된 세계의 객체. 그것들이 무엇인지 작성하세요.
• 시그니처. 이 제품만이 가질 수 있는 하나의 작은 디테일로, 일관되게 사용됩니다. 모니터링 도구의 라이브 상태 점, 개발자 도구의 키캡, 교육 앱의 손으로 그린 밑줄, 배달 앱의 경로 선. 하나의 디테일, 다섯 개가 아닙니다.

여기 있는 예제는 답의 형태만 보여줍니다. 예제가 우연히 맞더라도 앞에 있는 제품에서 유도하세요.

제품에 실제 브랜드(예: 로고 파일, 슬롭이 아닌 색상 또는 서체)가 이미 있다면 유지하고 그 주변에서 방향을 구축하세요. 보라색에서 파란색으로의 그라데이션, 반짝임 및 광채는 로고에 있어도 슬롭이므로, 사용자가 그렇다고 말하지 않는 한 브랜드로 간주하지 않습니다.

1. 간격

• 모든 것은 4px 그리드 위에 있습니다. 여백, 패딩, 간격 및 고정 높이는 4의 배수이므로 28이나 104는 토큰 목록에 없어도 괜찮습니다. 작은 컨트롤 내부의 미세 조정에는 2px 단계가 괜찮으며, 무언가를 정확히 중앙에 배치하는 홀수 값은 유지됩니다.
• 같은 것은 같은 크기로. 목록의 모든 행은 하나의 높이와 하나의 간격을 공유하고, 행의 모든 카드는 하나의 패딩을 공유합니다.
• 공간은 그룹화를 보여줍니다. 그룹 내부의 공간은 그룹 간의 공간보다 작아서 목록이 하나의 블록으로 읽히고 섹션은 별개의 것으로 읽힙니다.
• 것들은 정렬됩니다. 아이콘은 하나의 열에 있고, 라벨은 하나의 선에서 시작하며, 숫자는 하나의 열에서 오른쪽 정렬됩니다. 잘못된 translate나 이상한 여백으로 선에서 밀려난 것은 없습니다.
• 패딩은 밀도를 따릅니다. 컴팩트한 패널과 사이드바는 약 16, 카드는 2024, 페이지 가장자리는 2432입니다.
• 내비게이션은 앱에서 가장 밀도가 높은 부분입니다. 행은 3236 높이에 24 사이 간격, 아이콘은 하나의 열, 라벨은 한 줄에 있습니다. 섹션 라벨은 위 섹션보다 자체 항목에 더 가깝게 위치합니다(예: 위 24, 아래 8). 패스 후에 사이드바를 측정하세요. 간격이 가장 자주 깨지는 곳입니다.
• 리듬을 깨는 일회성 값(예: mt-[13px] 또는 py-[11px])을 제거하고 스케일의 단계로 대체하세요.

2. 색상

• 방향의 세계를 향해 색조를 띤 하나의 중성 램프에서 구축하세요. 토큰에서 흑연, 따뜻함 또는 잉크를 선택하거나 같은 방식으로 직접 색조를 입히세요. 배경, 올려진 표면, 테두리 및 텍스트는 모두 해당 램프에서 가져옵니다.
• 앱과 대시보드에서 배경, 표면, 테두리 및 텍스트는 중립을 유지합니다(흑연 램프 또는 이와 비슷한 회색). 사람들은 몇 시간 동안 그것들을 보며 콘텐츠가 색상을 전달해야 합니다. 배경이 주황색, 갈색, 파란색 또는 녹색으로 읽히는 화면은 너무 과한 것입니다. 세계는 악센트, 차트 및 순간에 나타나며, 표면에는 나타나지 않습니다. 랜딩 페이지는 표면을 세계 쪽으로 더 색조를 입힐 수 있습니다.
• 세 가지 텍스트 역할: 기본, 보조 및 음소거. 약간 다른 라벤더 열 가지가 아닙니다.
• 크롬에서는 하나의 악센트를 드물게 사용하세요. 기본 작업, 선택 또는 중요한 하나의 숫자를 표시합니다.
• 방향의 순간은 예외입니다. 그 안에서 색상은 풍부할 수 있습니다. 차트의 여러 색조, 실제 재질의 렌더링된 객체, 자체 조명이 있는 이미지. 세계 안에 있고 각 색상이 의미를 갖는 한 괜찮습니다.
• 브랜드에 실제 색상이 있다면 그것이 악센트가 되고 표면에서 사라집니다. 실제 브랜드 색상이 없다면 세계에서 악센트를 가져오세요.
• 텍스트 위의 악센트는 4.5:1 대비에 도달해야 합니다. 그렇지 않으면 어둡게 하거나 그 위에 어두운 텍스트를 넣으세요. 밝은 표면에서 텍스트 또는 잉크로 사용되는 악센트는 동일한 대비가 필요하므로, 거기서 더 어두운 음영을 사용하세요.
• 어두운 테마에서는 기본 버튼이 램프의 오프 화이트에 어두운 텍스트일 수 있으며, 악센트는 선택 또는 주요 수치와 같은 더 작은 위치에 있을 수 있습니다. 이는 종종 컬러 버튼보다 더 의도적으로 보입니다.
• 의미론적 색상은 의미(예: 좋은 변화에 대한 녹색, 오류에 대한 빨간색)만 전달하며, 팔레트 안에 앉도록 톤 다운됩니다.
• 표면의 색조 그라데이션, 그라데이션 텍스트, 유색 광채 및 유색 그림자, 콘텐츠 뒤의 방사형 색상 워시 및 네온 테두리를 제거하세요.
• 테두리는 조용한 가는 선으로, 램프의 텍스트 색상을 6~10% 불투명도로 사용합니다.
• 어두운 테마에서는 깊이가 그림자가 아닌 표면 단계와 가는 선에서 비롯됩니다. 이미지 위에 떠 있는 창이나 객체는 부드러운 중성 그림자를 유지할 수 있습니다. 밝은 테마에서는 그림자가 중립적이고 부드러우며 작습니다.
• 그라데이션은 하나의 중성색 내에서 작은 톤 이동(예: 활성 행이 #2b2b2b에서 #1f1f1f로 가는 것)으로만 허용됩니다. 절대 한 색조에서 다른 색조로의 전환은 허용되지 않습니다.

3. 아이콘

• 아이콘이나 라벨의 장식으로 사용되는 모든 이모지는 하나의 세트에서 나온 라인 아이콘으로 대체됩니다. 프로젝트에 이미 있는 세트를 사용하고, 그렇지 않으면 lucide를 사용하세요.
• 모든 곳에서 하나의 크기와 하나의 선 굵기: 16 또는 18px, 1.5 선 굵기.
• 아이콘은 텍스트 역할의 색상을 가져옵니다(보통 보조 또는 음소거). 절대 고유의 색상을 얻지 않습니다.
• 아이콘 상자는 모든 행에서 동일한 너비를 가지며 라벨까지의 간격은 고정(8 또는 10)되어 라벨이 정렬됩니다.
• 아무것도 추가하지 않는 아이콘(예: 모든 카드 제목이나 모든 섹션 라벨 앞의 이모지)은 제거하세요. 색상이 필요한 카테고리는 작은 상태 점을 얻습니다.

4. 카피

• 헤드라인은 제품이 누구를 위해 무엇을 하는지 평범한 단어로 말하므로 다른 제품에 맞지 않습니다. 이미 페이지에 있는 사실을 사용하고 새로운 것을 발명하지 마세요.
• 인터페이스 텍스트에는 느낌표가 없으며, 절대 !!도 없습니다.
• 환영합니다, Damir님! 👋와 같은 인사말 헤드라인은 없습니다. 제목은 컨텍스트(예: 페이지 이름이나 기간)를 지정합니다. 예를 들어 2026년 10월.
• 짧은 라벨. Search anything...가 아닌 Search.
• 변경 사항은 비교 대상을 말합니다. 예: 전월 대비 +12% 또는 전월 대비 3 감소.
• 헤드라인, 부제목, 라벨, 버튼 및 캡션은 마침표 없이 끝납니다. 여러 문장으로 된 단락만 마침표를 유지합니다.
• supercharge, seamless, unlock, magic, revolutionize, game-changing과 같은 과장된 단어는 없으며, 모든 것에 AI-powered도 없습니다.
• 10,000+ 팀이 사랑합니다 또는 10배 더 빠름과 같이 확인할 수 없는 주장은 사용자가 실제임을 확인하면 조용하고 구체적으로 바뀌고, 그렇지 않으면 제거됩니다. 질문하고 보고서에 나열하세요.
• 모의 데이터는 실제처럼 보이며, 그럴듯한 숫자와 이름을 사용하고 절대 [X] 또는 123,456을 사용하지 않습니다.
• PRO, New ✨ 또는 Beta 🚀와 같은 배지는 제품이 실제로 필요하지 않은 한 사라지고, 필요하다면 조용한 텍스트가 됩니다.

5. 타이포그래피

• 방향의 성격에 맞는 서체를 토큰의 패밀리에서 선택하세요. 프로젝트의 서체가 실제 브랜드의 일부일 때는 유지하세요. 아무도 선택하지 않은 Inter와 같은 기본 서체는 다른 패밀리가 성격에 더 잘 맞을 때 교체될 수 있습니다. 인터페이스용 하나의 패밀리와 토큰의 모든 행에서 최대 하나의 파트너(숫자 및 메타용 모노 또는 큰 헤드라인용 디스플레이 서체)를 사용하세요.
• 스케일에서 몇 가지 크기와 두 가지 두께(400 및 500, 드문 강조를 위해 최대 600)를 사용하세요. 700~900 제목, 그라데이션 텍스트는 없습니다.
• 계층 구조는 크기와 색상에서 비롯되며, 두께에서 비롯되지 않습니다.
• 모든 곳에서 문장 케이스. 넓은 자간의 NAVIGATION 또는 PAID THIS MONTH와 같은 라벨은 Navigation 및 Paid this month가 됩니다.
• 작은 텍스트는 절대 음수 자간을 얻지 않습니다. 작은 텍스트의 가독성은 더 크거나, 약간 더 굵거나, 약간 느슨하게 함을 의미합니다. 좁은 자간은 큰 디스플레이 텍스트에만 사용됩니다.
• 숫자는 tabular-nums를 사용하고 화면 전체에서 하나의 형식을 사용합니다. 하나의 수치가...