Kill AI Slop

A field guide to spotting and removing AI slop一份识别并清除 AI slop 的实战手册AI slop を見分けて取り除くための実践ガイドAI slop 을 알아보고 걷어내기 위한 실전 안내서

杀死 AI slop Kill AI slop AI slop を殺す AI slop 죽이기

Vibe-coded products are ugly in the same specific way: indigo gradients, glowing glass cards, emoji on every line, a badge on everything. It's what a machine reaches for when it has no taste but wants to look impressive. It's so common you've stopped seeing it. This guide makes it glaring again, then shows you how to strip it out.Vibe Coding 造出来的产品，难看得都是一个样：蓝紫渐变、发光的玻璃卡片、每行都挂 emoji、什么都要贴个徽章。这是机器没有品味、又想显得高级时抓来的东西。因为到处都是，你早就看不见它了。这份手册让它重新变得刺眼，再教你把它清掉。Vibe Coding で作られた製品は、決まって同じ醜さをしている。藍紫のグラデーション、光るガラスカード、行ごとの emoji、何にでも貼られたバッジ。センスのない機械が、それでも高級に見せたくて手を伸ばす先だ。あまりに多すぎて、もう目に入らなくなっている。このガイドはそれを再び目障りにし、そのうえで削り落とし方を示す。Vibe Coding 으로 만든 제품은 하나같이 같은 방식으로 못생겼다. 남보라 그라데이션, 빛나는 유리 카드, 줄마다 붙은 emoji, 무엇에나 달린 배지. 취향 없는 기계가 그럼에도 고급스러워 보이려 할 때 집어 드는 것들이다. 너무 흔해서 이제는 눈에 들어오지도 않는다. 이 안내서는 그것을 다시 거슬리게 만들고, 그다음 걷어내는 법을 보여준다.

See the catalogue看 slop 图鉴slop 図鑑を見るslop 도감 보기 Get the cleanup skill用 Skill 清理项目クリーンアップ Skill を入手정리 Skill 받기

Definition定义定義정의

AI slop is ugly in a specific way:
it piles on every possible style and detail without settling on a focus.AI slop 的难看很有辨识度：
它把所有能加的风格和细节都往上堆，却始终定不下一个重点。AI slop は、ある特定の醜さだ。
あらゆるスタイルとディテールを積み上げて、重点を一つも定めていない。AI slop 은 아주 특정한 방식으로 못생겼다.
온갖 스타일과 디테일을 쌓아 올리고, 정작 초점 하나를 정하지 않는다.

A model has no taste, so it grabs whatever looks impressive in a thumbnail: a gradient, a glow, a row of badges, a wall of glowing cards. Each is a cliché on its own. Stacked together with nothing edited out, they curdle into the same garish page you've seen a thousand times.模型没有品味，于是去抓那些在缩略图里显得「高级」的东西：一道渐变、一层光晕、一排徽章、一墙发光卡片。每一样单独看都是俗套；全堆在一起、什么都不删，就熬成了你见过一千遍的那种刺眼页面。モデルにはセンスがない。だからサムネイルで「高級」に見えるものを掴んでくる。グラデーション、グロー、バッジの列、光るカードの壁。どれも単体ではありふれた常套句だ。何も削らずに積み上げると、あなたが千回見たあの毒々しいページに煮詰まる。모델에는 취향이 없다. 그래서 섬네일에서 ‘고급스러워’ 보이는 것을 집어 온다. 그라데이션 하나, 광채 한 겹, 배지 한 줄, 빛나는 카드로 채운 벽. 하나하나는 그저 흔한 상투구다. 아무것도 덜어내지 않고 쌓아 올리면, 당신이 천 번은 본 그 요란한 페이지로 굳어 버린다.

The catalogue图鉴図鑑도감

23 tells, taken apart one by one23 种 AI slop，逐条拆解23 種類の AI slop を、一つずつ分解する23 가지 AI slop 을 하나씩 뜯어본다

Each tell is a before → after pair: what the slop looks like, and the clean move instead. All rebuilt in HTML, tap to switch.每一条都是一组 before → after 对照：slop 长什么样，换成什么干净做法。全部用 HTML 重建，点按即可切换。各項目は before → after の対で、slop がどう見えるか、代わりにどう整えるかを示す。すべて HTML で再構築、タップで切り替わる。각 항목은 before → after 짝으로, slop 이 어떻게 보이는지와 대신 취할 깔끔한 방식을 보여준다. 모두 HTML 로 재구성했고, 눌러서 전환한다.

Classic slop经典 slop定番の slop고전적인 slop Evolved slop (the new default)进化型 slop（已成新默认）進化型の slop（新しいデフォルト）진화형 slop（새 기본값이 된)
Color配色カラー색상

The indigo→violet gradient蓝紫渐变インディゴ→バイオレットのグラデーション인디고→바이올렛 그라디언트

That #6366f1→#a855f7 diagonal on buttons, glows, and hero backgrounds.从 #6366f1 到 #a855f7 的紫色对角渐变，按钮、光晕、hero 背景，无处不在。ボタン、グロー、hero 背景にかかる、あの #6366f1→#a855f7 の斜めグラデーション。버튼, 광채, hero 배경마다 깔리는 그 #6366f1→#a855f7 대각선.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

✨ AI-POWERED

Deploys on git push

Connect a repo; every commit to main ships.

Continuous deploy

Deploys on git push

Connect a repo; every commit to main ships.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It is the generative default. Nobody chose it; it's the factory setting of Tailwind demos and template galleries, so it reads as an absence of a decision.它本身就是生成式默认值。没人选它，只是 Tailwind 示例和无数模板的出厂配色，所以一眼看去，就是「没做选择」。これは生成の初期値そのものだ。誰も選んでいない。Tailwind のデモやテンプレート集の工場出荷設定でしかなく、だから「何も決めていない」と一目で伝わる。이건 생성형 기본값 그 자체다. 누가 고른 게 아니라 Tailwind 데모와 템플릿 갤러리의 출고 설정이라, 결국 아무 결정도 하지 않았다는 뜻으로 읽힌다.

The fix怎么改直し方고치는 법

Pick one accent you can justify. If you use a gradient, give it direction and a reason — not as a sticker for ‘premium’.选一个有理由的主色。要用渐变就让它有方向和目的，而不是拿来当「高级感」的贴纸。理由を説明できるアクセントを一つ選ぶ。グラデーションを使うなら方向と目的を持たせる。「高級感」のためのステッカーにしない。정당화할 수 있는 강조색 하나를 고른다. 그라디언트를 쓴다면 방향과 이유를 부여한다 — ‘고급스러워 보이려고’ 붙인 스티커가 아니라.

Code signals代码信号コード上のサイン코드 신호
  • from-indigo-500 to-purple-500
  • #6366f1 → #a855f7
  • bg-gradient-to-r via-purple
  • shadow-purple-500/50
Color配色カラー색상

Gradient headline text渐变文字标题グラデーションの見出し文字그라디언트 헤드라인

The big heading done as a clipped rainbow gradient fill.把大标题做成 background-clip:text 的彩色渐变字。大見出しを background-clip:text で切り抜いた虹色グラデーションで塗る。큰 제목을 background-clip:text 로 잘라낸 무지개 그라디언트로 채운 것.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Your changelog, automated

It writes release notes from merged PRs.

Your changelog, automated

It writes release notes from merged PRs.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It trades legibility and contrast for an effect — the same effect on every AI landing page. Decoration eats the message.渐变字牺牲可读性和对比度，换来的效果每个 AI 落地页都有。装饰盖过了内容。可読性とコントラストを「効果」と引き換えにしている。しかもその効果はどの AI ランディングページにもある同じものだ。装飾がメッセージを食う。가독성과 대비를 효과 하나와 맞바꾼다 — 그것도 모든 AI 랜딩 페이지에 똑같이 있는 효과와. 장식이 메시지를 잡아먹는다.

The fix怎么改直し方고치는 법

Solid color for headings. Build hierarchy with size, weight, and space — not by painting the letters.标题用实色。层级靠字号、字重和留白，而不是靠给字上色。見出しは単色で。階層は文字を塗るのではなく、サイズ、ウェイト、余白でつくる。제목은 실색으로. 위계는 글자에 색을 칠해서가 아니라 크기, 굵기, 여백으로 만든다.

Code signals代码信号コード上のサイン코드 신호
  • bg-clip-text text-transparent
  • background-clip: text
  • -webkit-text-fill-color: transparent
Color配色カラー색상

The warm ‘cozy’ palette棕色「温暖」配色茶色い「あたたかい」配色갈색 ‘따뜻한’ 팔레트

The amber / stone / orange wash on a soft beige background.amber / stone / orange 堆出来的暖棕色调，配上柔和的米色背景。柔らかいベージュの背景に、amber / stone / orange を重ねた暖色の色調。부드러운 베이지 배경 위에 amber / stone / orange 를 뿌린 색조.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
◐
Your cozy workspace

Warm, friendly, and human.

Your workspace

Opens with a hotkey, syncs in the background.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It's the model's laziest translation of ‘warm and friendly’: Tailwind's warm ramp served raw, so every ‘human’ product looks identical.这是模型对「温暖、亲和」最偷懒的翻译。它把 Tailwind 的 warm 色阶原样端上来，结果每个「有温度」的产品长得一模一样。「あたたかくて親しみやすい」をモデルが最も横着に翻訳した結果だ。Tailwind の warm 系ランプを生のまま出すので、どの「人間味のある」製品も同じ顔になる。‘따뜻하고 친근하게’를 모델이 가장 게으르게 옮긴 결과다. Tailwind 의 warm 색계를 그대로 가져다 쓰니 ‘사람 냄새 나는’ 제품이 죄다 똑같아 보인다.

The fix怎么改直し方고치는 법

Warmth comes from words and content, not from dipping everything in caramel. Use a neutral base with one restrained warm accent.温度来自内容和文字，不是来自把所有东西刷成焦糖色。用中性底 + 一个克制的暖点缀。あたたかさは言葉と中身から来る。すべてをキャラメルに浸すことからではない。中性的なベースに、控えめな暖色のアクセントを一つ。따뜻함은 글과 내용에서 나오지, 모든 걸 캐러멜에 담가서 나오지 않는다. 중립 베이스에 절제된 따뜻한 강조 하나만.

Code signals代码信号コード上のサイン코드 신호
  • amber-50 / stone-100 / orange-400
  • bg-[#fdf6ec] text-amber-900
  • border-amber-200
Color配色カラー색상

The default semantic palette默认语义配色（蓝·黄·绿·红）デフォルトのセマンティック配色（青・黄・緑・赤）기본 시맨틱 팔레트(파랑·노랑·초록·빨강)

Info in blue/indigo, tip in amber, success in green, error in red — always the framework's stock -50 backgrounds with -600 text.info 用蓝/靛、tip 用琥珀黄、success 用绿、error 用红——永远是框架自带那套 50 号浅底配 600 号文字。info は青／インディゴ、tip はアンバー、success は緑、error は赤。いつもフレームワーク既定の -50 の背景に -600 の文字。info 는 파랑/인디고, tip 은 amber, success 는 초록, error 는 빨강 — 언제나 프레임워크 기본인 -50 배경에 -600 텍스트.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Info Success Warning Error New
Info Warning New Success Error

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

This ‘semantic’ set is the Tailwind / Bootstrap factory default; nobody actually picked it. Three or four unrelated candy colors crammed together, unrelated to your brand or to each other — a bowl of default rainbow candy with every box shouting a different hue.这套「语义色」是 Tailwind / Bootstrap 的出厂设定，没人真去挑过。几种毫不相干的糖果色挤在一起，和品牌无关，彼此也不搭，一盘默认的彩虹糖，每个提示框各喊各的调。この「セマンティック」一式は Tailwind / Bootstrap の工場出荷設定で、誰も選んでいない。互いに無関係なキャンディカラーが三つ四つ押し込まれ、ブランドとも互いとも何の関係もない。既定のレインボーキャンディの盛り合わせで、どのボックスも別々の色で叫んでいる。이 ‘시맨틱’ 세트는 Tailwind / Bootstrap 의 출고 기본값이고 아무도 고른 적이 없다. 서로 무관한 캔디 색 서너 개를 우겨넣은, 브랜드와도 서로와도 아무 관계 없는 기본 무지개 사탕 한 접시 — 알림 박스마다 제각기 다른 색으로 소리친다.

The fix怎么改直し方고치는 법

Grow semantic colors out of your one palette: tints of a single hue plus neutrals, and color only the few states that truly differ. Most ‘notes’ need no color at all.语义色也要从你自己那一个调色板里长出来：用同一主色的深浅加中性灰，只给少数真需要区分的状态上色。大多数「提示」根本不用颜色。セマンティック色も自分の一つのパレットから育てる。単一の色相の濃淡に中性色を足し、本当に区別が要る少数の状態にだけ色を付ける。ほとんどの「補足」に色は要らない。시맨틱 색도 네 팔레트 하나에서 자라 나오게 한다. 한 색조의 농담에 중립색을 더하고, 정말 구분이 필요한 소수의 상태에만 색을 준다. 대부분의 ‘노트’는 색이 전혀 필요 없다.

Code signals代码信号コード上のサイン코드 신호
  • bg-blue-50 / bg-amber-50 / bg-green-50 together
  • -50 bg + -600 text semantic set
  • default info/warn/success/error hues
Color配色カラー색상

The one-hue status box同色系状态框同系色だけの状態ボックス같은 색 계열뿐인 상태 박스

A status or alert where the border, the text, and the background are all one hue — and the background is just a see-through version of it. Error is red on red, warning is yellow on yellow, success is green on green, every time.一个状态或提示，边框、文字、背景都是同一个色系，背景就是这个色系的半透明版。错误永远红字红底，警告永远黄字黄底，成功永远绿字绿底。状態や通知の枠線・文字・背景がすべて同じ色系で、背景はその半透明版。エラーは赤地に赤字、警告は黄地に黄字、成功は緑地に緑字。毎回そう。상태나 알림의 테두리·글자·배경이 모두 같은 색 계열이고, 배경은 그 반투명 버전이다. 오류는 빨강 위에 빨강, 경고는 노랑 위에 노랑, 성공은 초록 위에 초록. 매번 그렇다.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Relay connection closed (4401)
Relay needs a valid account token
✓ Installed
Error. Relay connection closed (4401)
Warning. Relay needs a valid account token
Installed

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It's the framework reflex: border-red-500, text-red-500, bg-red-500/10, stamped on every state. Nothing was toned to sit next to your actual UI; the whole box is one loud hue at three opacities. And red/yellow/green is a traffic light, not a palette — leaning on it lets color do the work your layout and words should do.这是框架的条件反射：border-red-500、text-red-500、bg-red-500/10，盖到每一个状态上。没有一处是为配合你真正的界面调过的，整个框就是同一个刺眼的色，只是换了三种透明度。红黄绿是红绿灯，不是调色板；靠它，就是让颜色去干本该由布局和文字干的活。フレームワークの反射だ。border-red-500、text-red-500、bg-red-500/10 を、どの状態にも押す。実際の UI に合わせて調整された色は一つもなく、ボックス全体が同じ派手な色の三段階の透明度でしかない。そして赤・黄・緑は信号であって、パレットではない。それに頼るのは、レイアウトと言葉がやるべき仕事を色にやらせることだ。프레임워크의 반사다. border-red-500, text-red-500, bg-red-500/10 을 모든 상태에 찍는다. 실제 UI 에 맞춰 조정된 색은 하나도 없고, 박스 전체가 같은 요란한 색을 투명도만 세 단계로 바꾼 것이다. 그리고 빨강·노랑·초록은 신호등이지 팔레트가 아니다. 거기에 기대는 건 레이아웃과 글이 할 일을 색에 떠넘기는 것이다.

The fix怎么改直し方고치는 법

Carry the state in words and weight first: a bold ‘Error’ reads before any color does. If you color at all, use one muted, restrained accent from your own palette on a neutral surface — you rarely need three traffic-light hues on screen at once.先用文字和字重把状态说清楚：一个加粗的「错误」，比任何颜色都先被读到。真要上色，就只用你自己调色板里一个克制柔和的强调色，衬在中性底上。屏幕上很少真的需要红黄绿三盏灯同时亮着。まず状態を言葉と太さで伝える。太字の「エラー」は、どんな色よりも先に読まれる。色を使うにしても、自分のパレットから抑えた控えめなアクセントを一つ、中性的な面の上に。信号の三色が同時に画面に要ることは、めったにない。먼저 상태를 글과 굵기로 말한다. 굵은 ‘오류’는 어떤 색보다 먼저 읽힌다. 색을 쓰더라도 네 팔레트에서 고른 절제되고 은은한 강조 하나를, 중립적인 면 위에. 신호등 세 색이 화면에 동시에 필요한 경우는 드물다.

Code signals代码信号コード上のサイン코드 신호
  • border-{c} text-{c} bg-{c}/10 status box
  • red/yellow/green fixed to error/warn/success
  • same-hue border, text, and tint background
  • alert that's one hue at three opacities
Color配色カラー색상

Gradients as atmosphere拿渐变当氛围雰囲気づくりのグラデーション분위기 내는 그라디언트

A near-black blue page with a soft glow up top, and cards whose surface is itself a gradient — lighter at the top, darker below. The default ‘premium dark mode’: every surface is mood, none is a flat color.近黑的深蓝页面，顶部一团柔光，卡片的背景本身也是渐变，上浅下深。这是「高级暗色模式」的出厂设定，每个表面都在营造气氛，没有一处是实心色。ほぼ黒に近い濃紺のページに、上部の柔らかいグロー。カードの背景そのものもグラデーションで、上が明るく下が暗い。「高級なダークモード」の出荷設定だ。どの面も雰囲気づくりで、平らな単色は一つもない。거의 검정에 가까운 짙은 남색 페이지에 위쪽으로 부드러운 광채. 카드 배경 자체도 그라디언트라 위는 밝고 아래는 어둡다. ‘고급 다크 모드’의 출고 설정이다. 모든 면이 분위기를 내고, 평평한 단색은 하나도 없다.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

Panel

deep-blue glow, gradient card

Hangzhou ⌄

Panel

flat background, flat card

Hangzhou ⌄

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

The glow and the surface gradients carry no information and answer no design question. It's the move a model makes to look premium in the dark — the same midnight blue with a spotlight behind a thousand AI landing pages. A flat background you chose reads as more sure of itself than a gradient reaching for atmosphere.光晕和表面渐变都不带信息，也回答不了任何设计问题。这是模型让暗色界面显得高级时的固定动作，和一千个 AI 落地页背后那团带聚光灯的午夜蓝一样。一个你选定的实心背景，比一层想撑气氛的渐变更有底气。グローも面のグラデーションも情報を運ばず、どんなデザインの問いにも答えない。ダークで高級に見せたいときにモデルが取る手で、千の AI ランディングページの背後にある、あのスポットライト付きミッドナイトブルーと同じだ。自分で選んだ平らな背景のほうが、雰囲気を狙ったグラデーションより自信がある。광채도 면의 그라디언트도 정보를 싣지 않고 어떤 디자인 물음에도 답하지 않는다. 다크에서 고급스러워 보이려 할 때 모델이 쓰는 수로, 천 개의 AI 랜딩 페이지 뒤에 깔린 그 스포트라이트 달린 미드나잇 블루와 같다. 네가 고른 평평한 배경이 분위기를 노린 그라디언트보다 더 당당하게 읽힌다.

The fix怎么改直し方고치는 법

Pick one flat background and hold it. Build depth on surfaces with a hairline and a restrained shadow, not a gradient. If a glow has to exist, let it point at something instead of filling the void behind everything.选一个实心背景色，一以贯之。表面的层次用一条细边框加克制的阴影，而不是渐变。真要有光晕，就让它指向某样东西，而不是把一切背后的空白填满。平らな背景を一つ選び、貫く。面の奥行きはグラデーションではなく、ヘアラインと控えめな影でつくる。どうしてもグローが要るなら、すべての背後の空白を埋めるのではなく、何かを指し示させる。평평한 배경 하나를 골라 끝까지 밀고 간다. 면의 깊이는 그라디언트가 아니라 얇은 테두리와 절제된 그림자로 만든다. 광채가 꼭 필요하면 모든 것 뒤의 빈 공간을 채우지 말고 무언가를 가리키게 한다.

Code signals代码信号コード上のサイン코드 신호
  • radial-gradient page background
  • dark navy + top spotlight glow
  • linear-gradient on card/surface fill
  • ‘premium’ ambient glow behind everything
  • gradient where a flat bg color would do
Type字体書体타이포

Serif-italic on one word衬线斜体强调一个词一語だけセリフ体イタリック한 단어만 세리프 이탤릭

Swapping one word in a sans headline to serif italic for ‘emphasis’.在一句无衬线标题里，把某个词单独换成衬线斜体来「强调」。サンセリフの見出しの中で、ある一語だけをセリフ体のイタリックに差し替えて「強調」する。산세리프 제목에서 어떤 단어 하나만 세리프 이탤릭으로 바꿔 ‘강조’하는 것.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Opens in 200ms, not 2 seconds.
Opens in 200ms, not 2 seconds.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

The font-swap is cheap drama. It cosplays ‘editorial’ while actually staging a fight between two voices in one sentence. It's the most viral AI headline tic right now.字体切换是一种廉价的戏剧感——它模仿「编辑感」，实际上只是在一句话里制造了两种声音的打架。这是当下最泛滥的 AI 标题套路。書体の差し替えは安っぽい芝居だ。「エディトリアル感」のコスプレをしつつ、実際には一文の中で二つの声を喧嘩させている。いま最も蔓延している AI 見出しの手癖だ。폰트 스와프는 값싼 드라마다. ‘에디토리얼한’ 척을 하지만 실은 한 문장 안에 목소리 둘을 붙여 싸움을 붙이는 짓이다. 지금 가장 빠르게 번지는 AI 제목 버릇이다.

The fix怎么改直し方고치는 법

Emphasise with weight, position, or a line break, and keep one voice. If you truly need italic, use the same family's italic.要强调就靠字重、位置或断行，让整句保持一种嗓音。真需要斜体时，用同一字体家族的斜体。強調はウェイト、位置、改行で。一文は一つの声に保つ。どうしてもイタリックが要るなら、同じ書体ファミリーのイタリックを使う。강조는 굵기, 위치, 줄바꿈으로 하고 목소리는 하나로 유지한다. 정말 이탤릭이 필요하면 같은 폰트 패밀리의 이탤릭을 쓴다.

Code signals代码信号コード上のサイン코드 신호
  • font-serif italic inside a sans <h1>
  • style="font-family: Georgia"
  • <em> with a display serif
Type字体書体타이포

Serif where sans belongs该用无衬线的地方用衬线サンセリフが適所なのにセリフ体산세리프가 맞는 자리에 세리프

A dev tool or SaaS page dressed in Playfair / Lora display serif for body copy.给一个开发者工具/SaaS 落地页套上 Playfair、Lora 这类展示衬线做正文。開発者ツールや SaaS のページに、本文用として Playfair / Lora のようなディスプレイセリフを着せる。개발자 도구나 SaaS 페이지에 Playfair / Lora 같은 디스플레이 세리프를 본문으로 입힌 것.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Monthly revenue$48,210
Active users1,204
Churn2.1%
Monthly revenue$48,210
Active users1,204
Churn2.1%

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

The model equates ‘premium’ with ‘serif’. Display serifs are hard to read at UI sizes and tonally off — a tuxedo on a terminal.模型把「高级」等同于「衬线」。但展示衬线在小字号、密信息的界面里既难读又跑题，像给终端穿了燕尾服。モデルは「高級」を「セリフ体」と同一視する。だがディスプレイセリフは UI サイズでは読みにくく、トーンもずれている。ターミナルにタキシードだ。모델은 ‘고급’을 ‘세리프’와 동일시한다. 하지만 디스플레이 세리프는 UI 크기에서 읽기 어렵고 톤도 어긋난다 — 터미널에 턱시도를 입힌 꼴이다.

The fix怎么改直し方고치는 법

One legible sans you actually chose for UI text. Reach for serif only when you want that voice — and use a text serif, not a display one.界面正文用一款你选定的、好读的无衬线。衬线只在你真的想要那种嗓音时、且是正文衬线时才用。UI テキストには、自分で選んだ読みやすいサンセリフを一つ。セリフはその声が欲しいときだけ手を伸ばす。しかもディスプレイ体ではなくテキスト用セリフを。UI 텍스트에는 네가 직접 고른, 잘 읽히는 산세리프 하나. 세리프는 정말 그 목소리를 원할 때만, 그것도 디스플레이가 아니라 본문용 세리프로.

Code signals代码信号コード上のサイン코드 신호
  • font-family: 'Playfair Display'
  • Lora / Cormorant on body
  • serif on a dashboard
Type字体書体타이포

Decorative strikes & highlights给文字划线、高亮当装饰装飾としての打ち消し線・ハイライト취소선·밑줄·형광펜을 장식으로

Striking out a word, underlining it, or swiping a highlighter over it — not to delete or annotate, just decorative ‘emphasis’.划掉一个词、加下划线、刷高亮，不为删改，不为标注，纯粹是当成强调的装饰。ある語に打ち消し線を引く、下線を引く、ハイライトを一筋なぞる。削除でも注釈でもなく、純粋に装飾的な「強調」として。단어에 취소선을 긋거나 밑줄을 치거나 형광펜을 쓱 긋는 것 — 삭제나 주석이 아니라 순전히 ‘강조’ 장식으로.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
The last editor you'll ever need.
A fast, keyboard-first editor.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

The same disease as serif-emphasis and highlighted keywords: the model doesn't trust the words to carry weight, so it draws on them. A strike through a word that isn't being deleted is ‘edgy’; an underline is fake emphasis; a highlighter is highlighter abuse. (An early version of this very site did it, the hero was struck through and highlighted.)和衬线强调、高亮关键词是同一个病：模型不信任文字本身能承载重点，于是往上画记号。划掉一个并没被删的词是在「耍酷」，下划线是假重点，高亮是荧光笔滥用。（这份网站的早期版本自己就犯了，首页标题上划了线、词上刷了高亮）セリフ体強調やキーワードのハイライトと同じ病だ。モデルは言葉そのものが重みを担えると信じないので、上から書き込む。削除されていない語への打ち消し線は「尖っている」つもり、下線は偽の強調、ハイライトは蛍光ペンの乱用。（このサイト自体の初期版もやっていた。hero に打ち消し線が入り、ハイライトがかかっていた。）세리프 강조나 형광 키워드와 같은 병이다. 모델은 글 자체가 무게를 실을 수 있다고 믿지 못해 그 위에 표시를 그린다. 삭제도 아닌 단어에 그은 취소선은 ‘있어 보이려는’ 짓이고, 밑줄은 가짜 강조, 형광펜은 형광펜 남용이다. (이 사이트의 초기 버전도 이 짓을 했다 — hero 에 취소선을 긋고 형광펜을 칠했다.)

The fix怎么改直し方고치는 법

Let weight, size, line breaks, and sentence structure carry emphasis. Keep strike-through for real edits, underline for links, highlight for real annotation; each only when it does a job.重点靠字重、字号、断行和句子结构。删除线留给真的删改，下划线留给链接，高亮留给真的标注，每一样都只在它有职责时才出现。強調はウェイト、サイズ、改行、文の構造に担わせる。打ち消し線は本当の削除に、下線はリンクに、ハイライトは本当の注釈に。どれも役目があるときだけ出す。강조는 굵기, 크기, 줄바꿈, 문장 구조에 맡긴다. 취소선은 진짜 삭제에, 밑줄은 링크에, 형광펜은 진짜 주석에 — 각각 제 역할이 있을 때만 등장한다.

Code signals代码信号コード上のサイン코드 신호
  • text-decoration: line-through on non-deleted text
  • <mark>/<u>/<s> for emphasis
  • gradient/box-shadow ‘highlight’ under a heading
Copy文案コピー카피

Highlighted keywords in copy介绍页里高亮关键词本文中のキーワードをハイライト소개 문구 속 형광 키워드

Coloring or bolding scattered words mid-paragraph, like a highlighter ran over it.在段落中间把一堆词染成主题色或加粗，像荧光笔扫过一样。段落の途中で、あちこちの語を主色に染めたり太字にしたりする。蛍光ペンがなぞったように。문단 중간에서 여기저기 단어에 색을 입히거나 굵게 만드는 것, 형광펜이 지나간 것처럼.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

Our revolutionary platform helps ambitious teams move faster with AI-native workflows built for scale.

A project tracker for engineering teams. It syncs with GitHub and updates issues from your commits — no manual status changes.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

When every word is emphasised, none is. It's the visual signature of a model that doesn't know the point, so it marks everything.当每个词都被强调，就没有词被强调。这是模型「不知道重点是什么，所以全标上」的视觉表现。すべての語を強調すれば、どの語も強調されない。要点が分からないので全部に印を付ける、というモデルの視覚的な署名だ。모든 단어를 강조하면 강조되는 단어는 없다. 무엇이 요점인지 모르니 전부 표시해 두는 모델의 시각적 서명이다.

The fix怎么改直し方고치는 법

Let sentence structure carry emphasis. At most one accent per paragraph, or none.让句子结构承担重点。一段里最多一个强调，或者干脆不要。強調は文の構造に担わせる。一段落につきアクセントは多くて一つ、あるいは無し。강조는 문장 구조가 지게 한다. 한 문단에 강조는 많아야 하나 — 아니면 아예 없이.

Code signals代码信号コード上のサイン코드 신호
  • <span class='text-primary'> mid-sentence
  • multiple <mark> per paragraph
  • font-semibold sprinkled in prose
Copy文案コピー카피

The AI copywriting voiceAI 文案腔AI コピーの口調AI 카피 말투

‘It's not just X — it's Y’, ‘Say goodbye to X’, punchy triads, and an em-dash habit.「不只是 X——更是 Y」「告别 X」，还有那种三连短句排比、破折号成瘾。「単なる X ではない、Y だ」「X にさよなら」、歯切れのいい三連句、そして em-dash 依存症。‘단순한 X 가 아니라 — Y 다’, ‘X 여 안녕’, 딱딱 떨어지는 삼단 배열, 그리고 em-dash 중독.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

It's not just an editor — it's a movement.

Say goodbye to friction. Hello to flow.

Fast. Beautiful. Yours.

A code editor. It opens in under a second and uses about half the memory of Electron-based editors.

Written in Rust, free while in beta.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It's the rhythmic fingerprint of generated copy: forever symmetrical, one notch too excited, and specifics-free. It scans well and says nothing.这是生成文案的节奏指纹：结构永远对称、情绪永远高一度、信息永远含糊。读起来顺，但什么都没说。生成されたコピーのリズムの指紋だ。構造は常に対称、テンションは常に一段階高く、具体は常に無い。読み心地はいいが、何も言っていない。생성 카피의 리듬 지문이다. 언제나 대칭이고, 언제나 한 단계 더 들떠 있고, 언제나 구체성이 없다. 읽기엔 매끄럽지만 아무 말도 안 한다.

The fix怎么改直し方고치는 법

Write something specific: real numbers, nouns, consequences. Say it the way one person explains it to another.写具体的东西。用真实的数字、名词、后果。一个人会怎么跟另一个人解释，就怎么写。具体的なことを書く。実際の数字、名詞、結果。人が人に説明するように書く。구체적인 걸 써라 — 실제 숫자, 명사, 결과. 한 사람이 다른 사람에게 설명하듯 써라.

Code signals代码信号コード上のサイン코드 신호
  • “not just … it's …”
  • “Say goodbye to …”
  • three-word triads
  • em-dash triplets
Copy文案コピー카피

Emoji everywhereemoji 泛滥emoji の氾濫emoji 범람

An emoji stuck on every heading, button, and bullet point: 🚀 for launch, ⚡ for fast, 🔒 for secure, 🎉 for delight.标题、按钮、每个要点前都挂着 emoji：🚀 提速、⚡ 极快、🔒 安全、🎉 好用。見出し、ボタン、あらゆる箇条書きの頭に emoji を一つ。ローンチに 🚀、速さに ⚡、安全に 🔒、うれしさに 🎉。제목, 버튼, 모든 항목 앞에 emoji 하나씩: 출시엔 🚀, 빠름엔 ⚡, 보안엔 🔒, 기쁨엔 🎉.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

🚀 Why you'll love it

  • ⚡ Blazing fast performance
  • 🔒 Secure by default
  • 🎉 Delightful to use

Why teams pick it

  • Cold start under 200 ms
  • Encrypted at rest, no config
  • Keyboard-first, no mouse needed

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

Emoji are borrowed warmth. They stand in for tone that copy and design should carry, and make a product that reads your email and runs your shell feel like it's performing friendliness. A glyph before every point doesn't make it clearer, only louder.emoji 是廉价的亲和力。它替代了本该由文字和设计传达的语气，让一个能读你邮件、跑你 shell 的产品显得像在讨好你。每个要点前面加一个图标并不会让它更清楚，只会更吵。emoji は借り物のあたたかさだ。コピーとデザインが担うべきトーンの代わりになり、あなたのメールを読みシェルを走らせる製品を、親しみを演じているように見せる。要点ごとにグリフを付けても明確にはならない、うるさくなるだけだ。emoji 는 빌려 온 온기다. 카피와 디자인이 실어야 할 톤을 대신하고, 네 메일을 읽고 네 shell 을 돌리는 제품을 친근한 척 연기하게 만든다. 항목마다 글리프 하나 붙인다고 더 명확해지지 않는다, 더 시끄러워질 뿐이다.

The fix怎么改直し方고치는 법

Cut decorative emoji from the UI; let the words and layout set the tone. Keep an emoji only where it genuinely carries information — a real status, say.删掉产品界面里的装饰性 emoji；语气交给文字和布局。只在 emoji 确实携带信息时才保留（比如一个真实的状态）。UI から装飾的な emoji を削り、トーンは言葉とレイアウトに任せる。emoji は本当に情報を担うところ、たとえば実際のステータスにだけ残す。UI 에서 장식용 emoji 는 잘라내고, 톤은 글과 레이아웃이 잡게 한다. emoji 는 정말 정보를 실을 때만 남긴다 — 이를테면 실제 상태 같은 것.

Code signals代码信号コード上のサイン코드 신호
  • emoji in headings / buttons
  • 🚀 / ✨ / ⚡ / 🎉 in product copy
  • one emoji per bullet or feature
Components组件コンポーネント컴포넌트

The glowing status dot发光的状态圆点光るステータスドット빛나는 상태 점

A status indicator (online / ready / live) drawn as a solid dot wrapped in a pale halo — usually pulsing, almost always saturated green.一个表示状态（在线／就绪／直播）的圆点，画成实心圆外面套一圈浅色光晕，通常还一直呼吸／脉冲，几乎永远是饱和绿。状態（オンライン／準備完了／ライブ）を示すドットを、淡いハローで包んだ実心円として描く。たいてい脈打ち、ほぼ必ず彩度の高い緑。상태(온라인 / 준비 / 라이브)를 나타내는 점을 실심 원 바깥에 옅은 후광을 두른 모양으로 그린 것 — 대개 맥박치듯 깜빡이고, 거의 언제나 채도 높은 초록.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Online
Online

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

A status is a tiny signal — the halo, the pulse, the breathing glow carry no information, they're pure decoration. Every AI product blinks ‘● Ready’ at you. Inflating a binary state into a glowing gem is textbook overdesign.状态本身只是个极小的信号，而光晕、脉冲、呼吸都是纯装饰，不带任何信息。每个 AI 产品都朝你「● 就绪」地闪。把一个二元状态放大成一颗发光宝石，是典型的过度设计。状態はごく小さな信号だ。ハロー、脈動、呼吸するグローは情報を何も運ばない、純粋な装飾だ。どの AI 製品も「● 準備完了」とあなたに向けて点滅する。二値の状態を光る宝石に膨らませるのは、教科書どおりの過剰設計だ。상태는 아주 작은 신호일 뿐이다 — 후광, 맥박, 숨 쉬는 광채는 아무 정보도 싣지 않는 순수 장식이다. AI 제품마다 ‘● 준비됨’ 하고 네게 깜빡인다. 이진 상태 하나를 빛나는 보석으로 부풀리는 건 교과서적 과잉 설계다.

The fix怎么改直し方고치는 법

A small, flat, single-color dot plus a word is enough. No halo, no pulse. Use color only when the state actually matters or actually changes.一个小小的、扁平的、单色圆点加一句文字就够了。不要光晕，不要脉冲。只在状态真的重要、或真的会变时才上色。小さく、平らで、単色のドットに一語添えれば十分だ。ハローも脈動も要らない。色は状態が本当に重要なとき、あるいは本当に変わるときだけ使う。작고 납작한 단색 점 하나에 단어 하나면 충분하다. 후광도, 맥박도 없이. 색은 상태가 정말 중요하거나 정말 바뀔 때만 쓴다.

Code signals代码信号コード上のサイン코드 신호
  • glowing / pulsing status dot
  • pale halo ring around a solid dot
  • animate-ping or box-shadow glow on a ‘live’ dot
  • saturated-green ‘● Ready / Online’ indicator
Components组件コンポーネント컴포넌트

Rounded card, colored left border圆角 + 彩色左边框卡片角丸カード＋色付き左ボーダー둥근 카드 + 컬러 좌측 테두리

Wrapping any list item in a pale rounded box with a 4px colored bar down the left. Not just a ‘Tip/Note’, but feature points, changelog rows, any list at all.任何一条列表项都套一个浅色圆角方块，左边一条 4px 彩色竖条。不只是「提示/注意」，功能点、更新日志、任何列表都这么包。どんなリスト項目も、左端に 4px の色付き縦棒が入った淡い角丸ボックスで包む。「Tip/Note」だけでなく、機能の項目、変更履歴の行、あらゆるリストまで。아무 목록 항목이나 옅은 둥근 박스로 감싸고 왼쪽에 4px 컬러 막대를 세운 것 — ‘Tip/Note’ 뿐 아니라 기능 항목, 변경 로그 줄, 온갖 목록에까지.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Fast Cold start in 200 ms.
Secure Encrypted at rest.
Flexible Works with your stack.
Open MIT-licensed.
  • Fast. Cold start in 200 ms.
  • Secure. Encrypted at rest.
  • Flexible. Works with your stack.
  • Open. MIT-licensed.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

The rounded box with a left accent bar is a docs admonition — a real aside — turned into universal decoration and wrapped around every list item. Now every row looks like an ‘important note’, so none is; and the combo itself is just the docs-template default.圆角 + 左侧彩条本来是文档 admonition（旁注）的语义组件，却被当成万能装饰，套在一切列表项上。于是每一条都长得像「重点提示」，真正的重点反而没了。这套组合本身就是文档模板的默认长相。角丸ボックスに左のアクセントバーは、本来ドキュメントの admonition、つまり本物の傍注だ。それが万能の装飾に変えられ、すべてのリスト項目に巻きつけられている。今やどの行も「重要な注記」に見え、だからどれも重要でなくなる。そしてこの組み合わせ自体がドキュメントテンプレートの既定の顔でしかない。왼쪽 강조 막대를 두른 둥근 박스는 원래 문서의 admonition, 즉 진짜 곁주였는데, 만능 장식으로 둔갑해 모든 목록 항목에 둘러진다. 이제 모든 줄이 ‘중요 노트’처럼 보이니 진짜 중요한 건 사라진다 — 게다가 이 조합 자체가 문서 템플릿의 기본 얼굴이다.

The fix怎么改直し方고치는 법

Let a list be a list — carried by alignment, spacing, and hierarchy. A callout is scarce: one or two a page, and only when it's genuinely an aside.列表就让它是列表：靠对齐、间距和层级。旁注是稀缺资源，一页最多一两个，且只在真的是旁注时才用。リストはリストのままにする。整列、間隔、階層で担わせる。callout は希少だ。1 ページに一つか二つ、本当に傍注であるときだけ。목록은 목록답게 둔다 — 정렬, 간격, 위계로. 콜아웃은 희소 자원이다. 한 페이지에 한둘, 그것도 정말 곁주일 때만.

Code signals代码信号コード上のサイン코드 신호
  • border-l-4 rounded-lg bg-*-50 on list items
  • every row/card wearing a left accent bar
  • admonition styling on plain lists
Components组件コンポーネント컴포넌트

Rounded-square icon tiles圆角方块图标砖角丸スクエアのアイコンタイル둥근 사각 아이콘 타일

Every feature gets a rounded-square chip with a line icon, tiled into a grid.每个功能配一个圆角方块背景 + 一个线性图标，整齐排成网格。機能ごとに角丸スクエアのチップとラインアイコンを付け、グリッドに並べる。기능마다 둥근 사각 칩에 라인 아이콘 하나를 넣어 격자로 깔아 놓은 것.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
◆FastLightning quick.
◇SecureSafe by design.
○SimpleEasy to use.
  • Fast — cold start in 180 ms, measured on a 2020 laptop.
  • Secure — data encrypted at rest with a key only you hold.
  • Simple — one binary, no config file, no account.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

Icon tiles are the shortest path to ‘looks designed’. The icons rarely relate to the content — a gear, a bolt, a globe — they just fill the grid.图标砖是「看起来做了设计」的最短路径。图标往往和内容无关（一个齿轮、一个闪电、一个地球），纯粹为了填满格子。アイコンタイルは「デザインされて見える」への最短ルートだ。アイコンは中身とほぼ無関係で、歯車、稲妻、地球儀、ただグリッドを埋めるためにある。아이콘 타일은 ‘디자인한 것처럼 보이는’ 지름길이다. 아이콘은 대개 내용과 상관없다 — 톱니바퀴, 번개, 지구본 — 그냥 격자를 채울 뿐이다.

The fix怎么改直し方고치는 법

An icon should carry meaning or go. A clear label and one sentence beat a row of decorative glyphs.图标要么承载信息，要么删掉。宁可用清楚的标题和一句话，也不要一排装饰图标。アイコンは意味を担うか、消すか。明快なラベルと一文が、装飾グリフの一列に勝る。아이콘은 의미를 싣거나 아니면 빠져야 한다. 장식 글리프 한 줄보다 명확한 라벨과 문장 하나가 낫다.

Code signals代码信号コード上のサイン코드 신호
  • grid of rounded-xl bg-*-100 icon chips
  • lucide/heroicons one-per-feature
  • icon square + h3 + one line ×6
Components组件コンポーネント컴포넌트

Max radius + glassmorphism过度圆角 + 毛玻璃過剰な角丸＋グラスモーフィズム과한 라운드 + 글래스모피즘

Everything is a max-radius pill; every card is a translucent backdrop-blur pane.所有东西都是大圆角胶囊，卡片全上 backdrop-blur 半透明毛玻璃。何もかもが最大角丸のピル。どのカードも半透明の backdrop-blur のパネル。모든 것이 최대 라운드 알약 모양이고, 카드마다 backdrop-blur 반투명 유리판.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Pro plan

Everything, unlocked.

Pro plan

Unlimited projects and history.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

A frozen slice of 2021 Dribbble. Glass and full-round are effect presets you switch on, unrelated to what the product is trying to say.这是 2021 年 Dribbble 的冷冻切片。毛玻璃和满圆角是「效果预设」，套上就完事，和产品要表达什么无关。2021 年の Dribbble の冷凍切片だ。ガラスと全角丸は、スイッチを入れるだけのエフェクトプリセットで、製品が何を言おうとしているかとは無関係だ。2021년 Dribbble 을 냉동해 잘라 낸 조각이다. 유리와 완전 라운드는 켜기만 하면 되는 효과 프리셋이라, 제품이 뭘 말하려는지와는 무관하다.

The fix怎么改直し方고치는 법

Pick one radius and hold it site-wide — usually small. Build depth with solid surfaces and space, not blur.圆角选一个值，全站一致，通常小而克制。用实心面和留白造层次，而不是模糊。角丸は一つの値を選び、サイト全体で貫く。たいていは小さめに。奥行きはぼかしではなく、実心の面と余白でつくる。라운드 값 하나를 골라 사이트 전체에 유지한다 — 대개 작게. 깊이는 흐림이 아니라 실심 면과 여백으로 만든다.

Code signals代码信号コード上のサイン코드 신호
  • rounded-full on cards
  • backdrop-blur bg-white/10 border-white/20
  • radius mixed 4/12/24/9999px
Components组件コンポーネント컴포넌트

The oversized drop shadow巨大的弥散阴影過大なドロップシャドウ과도한 드롭 섀도

A small card or icon casting a huge, soft shadow that bleeds far past it on every side — big blur, low opacity, almost no offset, like it's floating in fog.一个小卡片或图标，投出一大团柔软的阴影，四面漫开、远超它本身：大模糊、低透明度、几乎不带偏移，像悬在一团雾里。小さなカードやアイコンが、自分をはるかに超えて四方に滲む、大きく柔らかい影を落とす。大きなぼかし、低い不透明度、ほとんどオフセットなし。霧の中に浮いているようだ。작은 카드나 아이콘이 자기 크기를 훨씬 넘어 사방으로 번지는, 크고 부드러운 그림자를 드리운다 — 큰 블러, 낮은 불투명도, 거의 없는 오프셋. 안개 속에 떠 있는 것 같다.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

Panel

a room-sized shadow, floating in fog

Panel

a hairline and a tight contact shadow

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

A shadow says how high a surface floats above the one under it: real light drops a tight contact shadow plus a soft ambient one, and the blur tracks the height. This shadow tracks nothing — the fog around a button is the same fog around a hero card. The model reaches for it because a big soft blur reads as ‘depth’ and ‘premium’ in a thumbnail, but it maps to no real height and carries no information: atmosphere standing in for elevation. So every element floats in its own uncanny cloud.阴影表达的是一个表面浮在下层之上有多高：真实的光会落下一小片贴地的接触阴影，再加一层柔和的环境阴影，模糊随高度变化。而这团阴影什么都不表达——罩在按钮外面的和罩在 hero 卡片外面的是同一团雾。模型抓它，是因为一大片柔软的模糊在缩略图里像「有层次」「高级」，可它对应不上任何真实高度，也不带任何信息，是拿氛围冒充高度。于是每个元素都悬在自己那团诡异的云里。影は、ある面が下の面からどれだけ浮いているかを語る。実際の光は、地に接する小さなコンタクトシャドウと柔らかいアンビエントシャドウを落とし、ぼかしは高さに従う。だがこの影は何にも従わない——ボタンを包む霧と hero カードを包む霧が同じだ。モデルがこれに手を伸ばすのは、大きく柔らかいぼかしがサムネイルで「奥行き」「高級」に見えるからだが、実際の高さには対応せず、情報も持たない。高さの代わりに雰囲気を置いているだけだ。こうして、どの要素も自分だけの不気味な雲に浮かぶ。그림자는 어떤 면이 아래 면 위로 얼마나 떠 있는지를 말한다. 실제 빛은 바닥에 붙는 작은 접촉 그림자와 부드러운 앰비언트 그림자를 떨어뜨리고, 블러는 높이를 따라간다. 그런데 이 그림자는 아무것도 따라가지 않는다 — 버튼을 감싼 안개와 hero 카드를 감싼 안개가 같다. 모델이 이걸 집는 건 크고 부드러운 블러가 섬네일에서 ‘깊이’와 ‘고급’으로 읽히기 때문이지만, 실제 높이에 대응하지 않고 아무 정보도 담지 않는다 — 높이 대신 분위기를 놓은 것이다. 그래서 모든 요소가 저마다의 기이한 구름 속에 떠 있다.

The fix怎么改直し方고치는 법

A shadow models elevation, so give it a small elevation scale and hold it: tight blur, small offset, low opacity, and never a shadow bigger than the thing casting it. Often a hairline border does the separating and you need no shadow at all. If you do, layer a 1px contact shadow under one restrained ambient shadow — and keep it colorless; a tinted glow is not depth.阴影是在模拟高度，就给它一套克制的高度刻度并守住：模糊要紧、偏移要小、透明度要低，绝不让阴影比投出它的东西还大。很多时候一条细边框就把层次分好了，根本不需要阴影。真要用，就拿一层贴地的接触阴影垫一层克制的环境阴影，而且别上色——带色的光晕不是层次。影は高さを模している。だから控えめな高さのスケールを与えて守る。ぼかしは締め、オフセットは小さく、不透明度は低く、投げる本体より大きな影は決して作らない。多くの場合、細い境界線一本で階層は分かれ、影はまったく要らない。使うなら、地に接する 1px のコンタクトシャドウの上に、抑えたアンビエントシャドウを一枚。そして無彩色に保つ——色のついたグローは奥行きではない。그림자는 높이를 흉내 내는 것이니, 절제된 높이 스케일을 주고 지킨다: 블러는 좁게, 오프셋은 작게, 불투명도는 낮게, 그리고 그림자를 드리우는 것보다 큰 그림자는 절대 만들지 않는다. 많은 경우 얇은 경계선 하나가 분리를 해내고 그림자는 아예 필요 없다. 쓴다면 바닥에 붙는 1px 접촉 그림자 위에 절제된 앰비언트 그림자 한 겹만 — 그리고 무채색으로 둔다. 색을 띤 광채는 깊이가 아니다.

Code signals代码信号コード上のサイン코드 신호
  • box-shadow blur ≥ 40px on a small element
  • 0 30px 80px / 0 40px 120px soft drop
  • filter: drop-shadow(0 0 60px …)
  • big-blur, low-opacity shadow as ‘depth’
  • shadow larger than the element casting it
Components组件コンポーネント컴포넌트

Corners that don't nest对不齐的嵌套圆角入れ子にならない角丸겹쳐지지 않는 라운드

The same radius on every layer: a big-radius outer box with an inner box at the same big radius, so the corners don't sit concentrically; the inner arc fights the outer one at every corner.把同一个圆角值套在每一层：外框是大圆角，里面的框也是同样的大圆角，所以嵌套的角对不齐，内圈的弧和外圈的弧在每个角上都别扭地打架。同じ角丸の値をすべての階層に使い回す。外側の箱が大きな角丸、内側の箱も同じ大きな角丸だから、入れ子の角が同心にならず、内側の弧が角ごとに外側の弧とぶつかる。같은 라운드 값을 모든 층에 돌려쓴다. 바깥 상자가 큰 라운드, 안쪽 상자도 똑같은 큰 라운드라, 중첩된 모서리가 동심이 되지 않고 안쪽 호가 모서리마다 바깥 호와 부딪힌다.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
nested block

inner 18px inside outer 18px — corners fight

nested block

inner 7px = 18px − 11px gap — concentric

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

Nested corners have a rule: the inner radius should equal the outer radius minus the gap between them, so the two arcs stay parallel. AI-generated UIs skip the math and stamp one radius token on everything, so nested corners never line up. It's the fingerprint of a radius that was defaulted, not measured.嵌套圆角是有规则的：内圈半径 = 外圈半径 − 两者之间的间距，这样两条弧才会平行。AI 生成的界面跳过这步计算，给所有东西套上同一个圆角 token，于是嵌套的角永远对不上。这是「圆角是默认来的、不是量出来的」的指纹。入れ子の角丸には規則がある。内側の半径は「外側の半径 − 両者の間隔」にすると、二つの弧が平行に保たれる。AI 生成の UI はこの計算を飛ばし、すべてに同じ角丸トークンを押すので、入れ子の角が決してそろわない。半径を測らずデフォルトで済ませた指紋だ。중첩 라운드에는 규칙이 있다. 안쪽 반지름 = 바깥 반지름 − 둘 사이 간격으로 맞춰야 두 호가 평행해진다. AI 가 만든 UI 는 이 계산을 건너뛰고 모든 것에 같은 라운드 토큰을 찍으니 중첩 모서리가 절대 맞지 않는다. 반지름을 재지 않고 기본값으로 때운 지문이다.

The fix怎么改直し方고치는 법

Compute the nested radius: inner = outer − padding. Or don't round the inner element at all. Keep a small, deliberate radius scale and let every corner sit concentric with its parent.算一下嵌套半径：内 = 外 − 内边距。或者干脆别给内层加圆角。用一套小而克制的圆角刻度，让每个角都和它的父级同心。入れ子の半径を計算する。内側 = 外側 − パディング。あるいは内側の要素には角丸を付けない。小さく抑えた角丸のスケールを一つ持ち、どの角も親と同心にする。중첩 반지름을 계산한다: 안쪽 = 바깥 − 패딩. 아니면 안쪽 요소엔 아예 라운드를 주지 않는다. 작고 절제된 라운드 스케일 하나를 두고, 모든 모서리가 부모와 동심이 되게 한다.

Code signals代码信号コード上のサイン코드 신호
  • same rounded-* on nested containers
  • inner radius ≥ outer radius
  • border-radius not adjusted for padding
  • concentric radius mismatch
Components组件コンポーネント컴포넌트

Badge and pill spam徽章 / 药丸标签泛滥バッジ／ピルの氾濫배지·알약 라벨 범람

‘✨ New’, ‘β Beta’, ‘🔥 Popular’ — decorative little pills everywhere.「✨ New」「β Beta」「🔥 Popular」，到处是装饰性的小圆角标签。「✨ New」「β Beta」「🔥 Popular」。装飾的な小さなピルがそこら中に。‘✨ New’, ‘β Beta’, ‘🔥 Popular’ — 장식용 작은 알약이 사방에.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
Dashboard
✨ New 🔥 Popular β Beta PRO
Dashboard
v2.1

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

Badges should mark status; here they manufacture a fake sense of buzz and credibility. In bulk, each one stops meaning anything.徽章本该标记状态，现在被用来制造「热闹」和「可信」的假象。数量一多，每一个都失去了信号价值。バッジは本来ステータスを示すもの。ここでは偽の賑わいと信頼感を製造している。数が増えれば、どれも何も意味しなくなる。배지는 상태를 표시해야 하는데, 여기선 가짜 화제성과 신뢰감을 지어낸다. 무더기로 붙으면 하나하나가 아무 의미도 못 갖는다.

The fix怎么改直し方고치는 법

Use a badge only for real status (a version, stock). Marketing mood doesn't need pills.只在真正表达状态时用徽章（比如版本、库存）。营销氛围不需要药丸。バッジは本物のステータス（バージョン、在庫）にだけ使う。マーケティングの気分にピルは要らない。배지는 진짜 상태(버전, 재고 같은)에만 쓴다. 마케팅 분위기 내려고 알약이 필요하지는 않다.

Code signals代码信号コード上のサイン코드 신호
  • rounded-full bg-*-100 text-*-700 badge
  • emoji + label pills
  • ‘Beta/New/Hot’ tags in chrome
Components组件コンポーネント컴포넌트

AI-drawn SVG iconsAI 生成的 SVG 图标AI が描いた SVG アイコンAI 가 그린 SVG 아이콘

Asking a model to ‘draw an icon’ and shipping whatever comes back: a round blob with two dot eyes, a mascot built from primitive shapes, a logo that's a rounded square with a face. Vector art the machine can't really draw, used as the product's mark.让模型「画个图标」，再把它给的东西直接用上：一个圆滚滚的色块加两颗点眼睛，一个用基本图形拼出来的小怪物，一个只是圆角方块加张脸的 logo。这是机器画不好、却被当成产品标识的矢量图。モデルに「アイコンを描いて」と頼み、返ってきたものをそのまま使う。丸い塊に点目が二つ、基本図形で組んだマスコット、角丸の四角に顔をつけただけの logo。機械にはうまく描けないベクター画を、製品の標識にしている。모델에게 ‘아이콘 하나 그려줘’ 하고 나온 걸 그대로 쓴다. 동그란 덩어리에 점 눈 두 개, 기본 도형으로 짜맞춘 마스코트, 둥근 사각형에 얼굴만 붙인 logo. 기계가 제대로 못 그리는 벡터 그림을 제품 표식으로 쓴 것이다.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

generated blob mascot

designed, or generated with care

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

A model has no hand and no idea what your product is, so its SVG is a guess at ‘cute icon’: off proportions, wobbly paths, a generic creature that could belong to anything. It looks like placeholder art that never got replaced. The icon is a product's first impression; it shouldn't be this.模型没有手，也不知道你的产品是什么，它画出的 SVG 只是对「可爱图标」的一次猜测：比例失衡、路径歪扭，一个放在哪儿都行的通用小怪物。它看起来就像一直没换掉的占位图。图标是产品给人的第一印象，不该是这么一张。モデルには手がなく、あなたの製品が何かも知らない。だからその SVG は「かわいいアイコン」への当てずっぽうだ。比率は崩れ、パスは歪み、どこにでも置けそうな汎用の小さな怪物。差し替えられずに残ったプレースホルダーにしか見えない。アイコンは製品の第一印象で、こんな一枚であってはならない。모델에겐 손이 없고, 네 제품이 뭔지도 모른다. 그래서 그 SVG 는 ‘귀여운 아이콘’에 대한 어림짐작이다. 비율은 어긋나고 패스는 삐뚤고, 아무 데나 놔도 될 범용 꼬마 괴물. 교체되지 않고 남은 플레이스홀더로만 보인다. 아이콘은 제품의 첫인상인데, 이런 한 장이어선 안 된다.

The fix怎么改直し方고치는 법

Get a real, high-quality icon. Commission a designer, or generate one with the best image model and refine it until it's crisp and on brand. A crude SVG the model sketched, or a bare fallback letter, isn't a mark worth shipping.用一个真正的、高质量的图标：找设计师做，或者用最好的生图模型生成一个，再打磨到干净、贴合品牌为止。让模型随手画的粗糙 SVG，或者退而求其次摆一个首字母，都配不上产品的标识。本物の、質の高いアイコンを用意する。デザイナーに頼むか、最良の画像生成モデルで作り、くっきりとブランドに合うまで磨く。モデルが雑に描いた SVG も、間に合わせの頭文字一つも、製品の標識には値しない。진짜 고품질 아이콘을 마련한다. 디자이너에게 맡기거나, 가장 좋은 이미지 생성 모델로 만들어 선명하고 브랜드에 맞을 때까지 다듬는다. 모델이 대충 그린 SVG 도, 임시방편으로 놓은 첫 글자 하나도, 제품의 표식으론 부족하다.

Code signals代码信号コード上のサイン코드 신호
  • hand-generated <svg> blob/mascot
  • primitive shapes + dot eyes as a logo
  • generic cartoon-creature app icon
  • AI-drawn vector art shipped as the mark
Components组件コンポーネント컴포넌트

Icon in a tint of itself图标套一层同色半透明底アイコンと同系色の半透明タイル아이콘과 같은 색의 반투명 타일

Every icon gets wrapped in a rounded square filled with a see-through tint of the icon's own color — a blue icon on faint blue, a green one on faint green. The default ‘icon container’: bg-{color}/10 behind text-{color}.每个图标都套进一个圆角方块，方块底色是这个图标颜色的半透明版：蓝图标配淡蓝、绿图标配淡绿。这是默认的「图标容器」：text-{color} 图标加一层 bg-{color}/10。どのアイコンも角丸の四角で包み、その下地はアイコン自身の色の半透明版にする。青いアイコンには淡い青、緑には淡い緑。既定の「アイコンコンテナ」だ。text-{color} のアイコンに bg-{color}/10 を一枚。모든 아이콘을 둥근 사각형으로 감싸고, 그 배경을 아이콘 자기 색의 반투명 버전으로 채운다. 파란 아이콘엔 옅은 파랑, 초록엔 옅은 초록. 기본 ‘아이콘 컨테이너’다. text-{color} 아이콘에 bg-{color}/10 한 겹.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It's a one-line reflex, not a decision: pad it, round it, wash it in 10% of the icon's hue. The tile and the tint carry no information — the icon was already an icon. Wrap every glyph this way and the page becomes a grid of soft colored squares. The transparency is there to look ‘soft and modern’ without committing to a real surface color.这是随手一行的条件反射，不是决定：加内边距、加圆角、刷上图标颜色的 10%。方块和这层色都不带信息，图标本来就已经是图标了。每个字形都这么包一层，一页就变成一格格柔和的彩色方块。半透明是为了显得「柔和、现代」，又不必真的定下一个表面色。決定ではなく、一行の反射だ。余白をつけ、角を丸め、アイコンの色を 10% 敷く。タイルもその色も情報を運ばない。アイコンはもともとアイコンなのだから。どのグリフもこう包めば、ページは柔らかな色の四角の格子になる。半透明は「柔らかく今風」に見せるためで、実際の面の色を決めずに済ませている。결정이 아니라 한 줄짜리 반사다. 패딩 주고, 모서리 굴리고, 아이콘 색을 10% 깐다. 타일도 그 색도 정보를 싣지 않는다. 아이콘은 이미 아이콘이었으니까. 모든 글리프를 이렇게 감싸면 페이지는 부드러운 색 사각형의 격자가 된다. 반투명은 ‘부드럽고 요즘 느낌’으로 보이려는 것이고, 정작 면의 색은 정하지 않고 넘어간다.

The fix怎么改直し方고치는 법

Let an icon just be an icon: inherit the text color, no container. If something genuinely needs a container — a real button — give it one deliberate, opaque surface from your palette, not a see-through tint of the icon it holds.让图标就当图标：继承文字颜色，不要容器。真需要容器时（比如一个真正的按钮），给它一个从调色板里选定的实心表面色，而不是一层跟图标同色的半透明底。アイコンはアイコンのままにする。文字色を継ぎ、コンテナは付けない。本当にコンテナが要るもの、たとえば本物のボタンには、パレットから選んだ不透明な一つの面の色を与える。中のアイコンと同じ色の半透明ではなく。아이콘은 아이콘으로 둔다. 글자색을 물려받고, 컨테이너는 붙이지 않는다. 정말 컨테이너가 필요하면 — 진짜 버튼 같은 것 — 팔레트에서 고른 불투명한 면 색 하나를 준다. 안에 든 아이콘과 같은 색의 반투명이 아니라.

Code signals代码信号コード上のサイン코드 신호
  • bg-{color}-500/10 behind text-{color}-500 icon
  • rounded tile tinted to match the icon
  • translucent same-hue icon container
  • every glyph wrapped in a soft colored square
Layout版式レイアウト레이아웃

The all-caps card grid全大写卡片网格全大文字のカードグリッド대문자 카드 격자

An ALL-CAPS label plus a number or icon, copied into rows of interchangeable cards: feature grids and dashboard stat-cards alike.全大写标签加一个数字/图标，复制成一排排等质的卡片：功能网格、仪表盘指标卡都是它。全大文字のラベルに数字かアイコンを添え、互換可能なカードの列に複製する。機能グリッドもダッシュボードの数値カードも同じだ。대문자 라벨에 숫자나 아이콘 하나를 붙여, 교체 가능한 카드를 여러 줄로 복제한 것 — 기능 격자든 대시보드 지표 카드든.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
◆FASTVery fast.
◇SECUREVery safe.
○SIMPLEVery easy.
△SCALABLEGrows with you.
□FLEXIBLEYour way.
▽SMARTAI inside.

It replaces your standups.

Every morning it reads yesterday's commits and PRs and writes the team a three-line summary. No meeting, no form to fill.

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It fakes structure while stuffing unrelated things into identical boxes to fill the screen. The ALL-CAPS micro-label is the default costume for ‘looks designed’.它假装信息有结构，其实只是把一堆不相关的东西塞进同样的盒子凑满一屏。全大写小标签是「看起来做过设计」的默认套路。無関係なものを同じ箱に詰めて画面を埋めながら、構造があるふりをしている。全大文字の小ラベルは「デザインされて見える」の既定の衣装だ。구조가 있는 척하면서 무관한 것들을 똑같은 상자에 쑤셔 넣어 화면을 채운다. 대문자 마이크로 라벨은 ‘디자인한 것처럼 보이는’ 기본 의상이다.

The fix怎么改直し方고치는 법

Decide the single most important thing and show it fully. If you must list, use real hierarchy and contrast, not a grid of equal-weight cards.先想清楚最重要的一件事，把它讲透。真要并列，用真正的层级和对比，而不是一网格等权重的卡片。最も重要な一つを決め、それを十分に見せる。どうしても並べるなら、等ウェイトのカードのグリッドではなく、本物の階層とコントラストで。가장 중요한 한 가지를 정하고 그것을 온전히 보여준다. 굳이 나열해야 한다면, 등가 카드의 격자가 아니라 진짜 위계와 대비를 쓴다.

Code signals代码信号コード上のサイン코드 신호
  • grid-cols-3 gap-8 cards
  • UPPERCASE label + number ×6
  • dashboard stat-card grid
Evolved slop进化型 slop進化型 slop진화형 slop

The ‘tasteful terminal’「优雅终端」新型 slop「上品なターミナル」という新型 slop‘우아한 터미널’ 신종 slop

Mono everywhere, a near-black background, one warm accent, ASCII art: the look of ‘an AI that read one Vercel blog post’.全站等宽字体、近黑背景、单一暖色点缀、ASCII 艺术，一种「看过 Vercel 博客的 AI」审美。全面的な等幅、ほぼ黒の背景、暖色のアクセント一つ、ASCII アート。「Vercel のブログを一本読んだ AI」の見た目だ。전면 등폭 폰트, 거의 검은 배경, 따뜻한 강조색 하나, ASCII 아트 — ‘Vercel 블로그 글 하나 읽은 AI’ 같은 룩.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다 
  /\_/\    ___ _ __
 ( o.o )   $ open source

$ OPEN · SOURCE · RUNS LOCAL

A_local-first_task_runner

$ get started$ read docs

Open source · runs locally

A local-first task runner

No account, works offline. Your data never leaves the machine.

brew install runner

Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가

It isn't ugly, that's the trap; it's polished enough to have become the new default. Once ‘hacker terminal’ is a one-click template, it dodges the design decision exactly like the indigo gradient did, just in cooler clothing.它不难看，恰恰因为它好看到成了新的默认。当「黑客感终端风」变成一键套用的模板，它就和当年的蓝紫渐变一样，是在回避设计决策，只是换了件更潮的外套。醜くはない。そこが罠だ。新しい既定になれるほど洗練されている。「ハッカー風ターミナル」がワンクリックのテンプレートになった時点で、それは当時のインディゴのグラデーションとまったく同じくデザインの決断を回避している。ただ服が今どきなだけだ。못생기지 않았다 — 그게 함정이다. 새로운 기본값이 될 만큼 세련됐다. ‘해커 터미널’이 원클릭 템플릿이 된 순간, 이것도 옛날 인디고 그라디언트와 똑같이 디자인 결정을 회피한다, 그저 더 멋진 옷을 걸쳤을 뿐이다.

The fix怎么改直し方고치는 법

Keep monospace for code, not as UI chrome. Use ASCII art and terminal metaphors only where they serve the product. Real taste is a choice you can explain, not reaching for this season's safest template.等宽字体留给代码，别拿来当界面外壳。ASCII 艺术、终端隐喻要为产品服务才用。真正的品味是你的选择能被解释，而不是套了当下最安全的模板。等幅はコードのために取っておく。UI の外装にしない。ASCII アートやターミナルの比喩は、製品に役立つところだけで使う。本物の品位とは、説明できる選択のことだ。今シーズン最も安全なテンプレートに手を伸ばすことではない。등폭 폰트는 코드에 두고 UI 외피로 쓰지 않는다. ASCII 아트와 터미널 은유는 제품에 복무할 때만 쓴다. 진짜 품위는 설명할 수 있는 선택이지, 이번 시즌 가장 안전한 템플릿에 손대는 게 아니다.

Code signals代码信号コード上のサイン코드 신호
  • mono font on all UI chrome
  • ASCII-art hero banner
  • near-black + single warm accent
  • everything looks like a CLI

Principles原则原則원칙

Six ways to stay out of slop避免 slop 的六条slop に陥らないための六か条slop 에 빠지지 않는 여섯 가지

  1. Decide before you decorate先决定，再装饰飾る前に決める꾸미기 전에 정한다

    Every visual choice should be one you can explain. If you can't, it's a default someone else set.每一个视觉选择都要能说出理由。说不出来的，就是别人替你设好的默认值。どの見た目の選択にも、説明できる理由があるはずだ。説明できないなら、それは誰かが決めたデフォルトにすぎない。모든 시각적 선택에는 설명할 수 있는 이유가 있어야 한다. 설명하지 못한다면 그건 남이 정해 둔 기본값이다.

  2. One accent, one voice一个主色，一种嗓音アクセントは一つ、声も一つ강조색 하나, 목소리 하나

    Use a single accent color, sparingly. Keep the whole page reading like one person talking.只用一个强调色，而且要省着用。整页文案，从头到尾是同一个人在说话。強調色は一つだけ、控えめに。ページ全体が一人の人間の声で語られるように保つ。강조색은 하나만, 아껴서 쓴다. 페이지 전체가 한 사람이 말하는 것처럼 읽히게 유지한다.

  3. Hierarchy from scale and space层级来自字号与留白階層はサイズと余白でつくる위계는 크기와 여백에서 나온다

    Rank things with size, weight, and spacing. Coloring words or swapping in a font is the lazy shortcut.用字号、字重、间距分出主次。给字上色、临时换个字体，都是偷懒的捷径。大きさ・太さ・間隔で優先順位をつける。文字に色をつけたり書体を差し替えたりするのは、手抜きの近道だ。크기, 굵기, 간격으로 우선순위를 매긴다. 글자에 색을 입히거나 서체를 바꿔 끼우는 건 게으른 지름길이다.

  4. Subtract first先做减法まず引く먼저 덜어낸다

    Slop is what piles up. The first move toward not-ugly is to take things away, until everything left has to be there.slop 是一样样堆出来的。想不难看，第一步是往下删——删到留下的每一样都非在不可。slop は積み重なってできる。醜さから抜け出す第一歩は、削ることだ。残ったものすべてが必要になるまで削る。slop 은 쌓여서 생긴다. 안 못생기게 만드는 첫걸음은 덜어내는 것이다. 남은 것 하나하나가 꼭 있어야 할 때까지.

  5. Specific beats loud具体胜过响亮具体は威勢よりも強い구체적인 것이 요란한 것을 이긴다

    Write real numbers, nouns, and consequences. ‘40% faster’ says more than ‘blazing fast ✨’.写真实的数字、名词和后果。「快 40%」比「快如闪电 ✨」说得更多。実際の数字・名詞・結果を書く。「40% 速い」は「爆速 ✨」よりも多くを語る。실제 숫자, 명사, 결과를 쓴다. ‘40% 빠름’이 ‘번개처럼 빠름 ✨’보다 더 많은 걸 말한다.

  6. Decoration must mean something装饰必须有语义装飾には意味がなければならない장식에는 의미가 있어야 한다

    Icons, badges, and callouts are signals. Spread everywhere, they signal nothing.图标、徽章、callout 都是信号。一旦无差别地铺满，就什么都不再表示。アイコン、バッジ、callout はどれも信号だ。見境なく敷き詰めれば、何も伝えなくなる。아이콘, 배지, callout 은 모두 신호다. 아무 데나 깔면 아무것도 알리지 못한다.

The cleanup skill清理 Skillクリーンアップ Skill정리 Skill

kill-ai-slop, the Agent Skill that runs this catalogue on your codekill-ai-slop：把这份图鉴跑在你代码上的 Agent Skillkill-ai-slop、この図鑑をあなたのコードに走らせる Agent Skillkill-ai-slop, 이 도감을 당신의 코드에 돌리는 Agent Skill

The same taxonomy, as a skill you run on your own project. It scans the code, flags each tell from this catalogue, explains why, and gives the clean fix, or applies it in a scope you approve.同一套分类，做成能直接在你项目里跑的 skill。它扫描代码，对照图鉴逐条标出 slop，解释原因，再给出干净的改法，或者在你划定的范围里直接改。同じ分類を、あなたのプロジェクトで直接走らせる skill にした。コードを走査し、この図鑑の tell を一つずつ指摘し、理由を説明し、そして綺麗な直し方を提案する。あるいは、あなたが認めた範囲内で直接直す。같은 분류 체계를, 당신의 프로젝트에서 바로 돌리는 skill 로 만들었다. 코드를 훑어 이 도감의 tell 을 하나씩 짚고, 이유를 설명하고, 깔끔한 수정안을 제안한다. 혹은 당신이 승인한 범위 안에서 바로 고친다.

  • Detect code signals: indigo-gradient classes, bg-clip-text, border-l-4 callouts, stacked emoji and badges, mono chrome, AI copy tics.检测：从代码信号入手，蓝紫渐变类名、bg-clip-text、border-l-4 callout、堆叠的 emoji 与徽章、等宽外壳、AI 文案腔。検出：コードの信号から入る。indigo-gradient のクラス名、bg-clip-text、border-l-4 の callout、積み重なった emoji とバッジ、mono の外殻、AI 文案の癖。탐지: 코드 신호에서 출발한다. indigo-gradient 클래스명, bg-clip-text, border-l-4 callout, 쌓인 emoji 와 배지, mono 껍데기, AI 문구 특유의 버릇.
  • Explain: each hit says why it reads as machine-made, no ‘just trust me’ black box.解释：每一处都说明为什么它读起来像机器做的，不留「照做就行」的黑盒。説明：ヒットごとに、なぜ機械が作ったように読めるかを言う。「黙って従え」のブラックボックスは残さない。설명: 걸린 곳마다 왜 기계가 만든 것처럼 읽히는지 말한다. ‘그냥 믿어라’식 블랙박스는 남기지 않는다.
  • Fix: a minimal diff, or applied directly within a scope you approve. Keep your brand, drop the defaults.修复：给出最小改动，或在你确认的范围直接改。留下你的品牌，去掉默认值。修復：最小の diff を出す。あるいは、あなたが認めた範囲内で直接あてる。ブランドは残し、デフォルトは捨てる。수정: 최소한의 diff 를 낸다. 혹은 당신이 승인한 범위 안에서 바로 적용한다. 브랜드는 남기고, 기본값은 버린다.