A field guide to spotting and removing AI slop一份识别并清除 AI slop 的实战手册AI slop を見分けて取り除くための実践ガイドAI slop 을 알아보고 걷어내기 위한 실전 안내서
杀死 AI slopKill AI slopAI 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, 무엇에나 달린 배지. 취향 없는 기계가 그럼에도 고급스러워 보이려 할 때 집어 드는 것들이다. 너무 흔해서 이제는 눈에 들어오지도 않는다. 이 안내서는 그것을 다시 거슬리게 만들고, 그다음 걷어내는 법을 보여준다.
AI slop is ugly in a specific way.AI slop 的难看很有辨识度。AI slop は、ある特定の醜さだ。AI slop 은 아주 특정한 방식으로 못생겼다.
It piles on every possible style and detail without settling on a focus. 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图鉴図鑑도감
32 tells, taken apart one by one32 种 AI slop，逐条拆解32 種類の AI slop を、一つずつ分解する32 가지 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고전적인 slopEvolved slop (the new default)进化型 slop（已成新默认）進化型の slop（新しいデフォルト）진화형 slop（새 기본값이 된)
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
✨ 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’.选一个有理有据的主色。要用渐变，就让它有方向和目的，而不是拿来当「高级感」的贴纸。理由を説明できるアクセントを一つ選ぶ。グラデーションを使うなら方向と目的を持たせる。「高級感」のためのステッカーにしない。정당화할 수 있는 강조색 하나를 고른다. 그라디언트를 쓴다면 방향과 이유를 부여한다 — ‘고급스러워 보이려고’ 붙인 스티커가 아니라.
The big heading done as a clipped rainbow gradient fill.把大标题做成 background-clip:text 的彩色渐变字。大見出しを background-clip:text で切り抜いた虹色グラデーションで塗る。큰 제목을 background-clip:text 로 잘라낸 무지개 그라디언트로 채운 것.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.标题用实色。层级靠字号、字重和留白来决定，而不是给文字上色。見出しは単色で。階層は文字を塗るのではなく、サイズ、ウェイト、余白でつくる。제목은 실색으로. 위계는 글자에 색을 칠해서가 아니라 크기, 굵기, 여백으로 만든다.
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
◐
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
text-gray-500 on a tinted surface (gray never toned to the bg)
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
InfoSuccessWarningErrorNew
InfoNewSuccessWarningError
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.语义色也该出自你自己那套调色板：用同一个主色的深浅加中性灰，只给少数真正需要区分的状态上色。大多数「提示」根本用不上颜色。セマンティック色も自分の一つのパレットから育てる。単一の色相の濃淡に中性色を足し、本当に区別が要る少数の状態にだけ色を付ける。ほとんどの「補足」に色は要らない。시맨틱 색도 네 팔레트 하나에서 자라 나오게 한다. 한 색조의 농담에 중립색을 더하고, 정말 구분이 필요한 소수의 상태에만 색을 준다. 대부분의 ‘노트’는 색이 전혀 필요 없다.
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.先用文字和字重说清状态：一个加粗的「错误」，比任何颜色都先被读到。真要上色，就用调色板里一个克制柔和的强调色，衬在中性底上。屏幕很少需要红黄绿三种灯同时亮。まず状態を言葉と太さで伝える。太字の「エラー」は、どんな色よりも先に読まれる。色を使うにしても、自分のパレットから抑えた控えめなアクセントを一つ、中性的な面の上に。信号の三色が同時に画面に要ることは、めったにない。먼저 상태를 글과 굵기로 말한다. 굵은 ‘오류’는 어떤 색보다 먼저 읽힌다. 색을 쓰더라도 네 팔레트에서 고른 절제되고 은은한 강조 하나를, 중립적인 면 위에. 신호등 세 색이 화면에 동시에 필요한 경우는 드물다.
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 and darker below, or each card washed in a tint of its own accent: the green card gets a green gradient, the purple card a purple one. The default ‘premium dark mode’: every surface is mood, none is a flat color.近黑的深蓝页面，顶部一团柔光，卡片背景也是渐变——要么上浅下深，要么每张卡各自罩一层自己主题色的水洗：绿卡衬绿渐变，紫卡衬紫渐变。这是「高级暗色模式」的出厂设定，每个表面都在营造气氛，没有一处是实心色。ほぼ黒に近い濃紺のページに、上部の柔らかいグロー。カードの背景そのものもグラデーションで、上が明るく下が暗いか、カードごとに自分のアクセント色を薄く敷く——緑のカードには緑のグラデーション、紫のカードには紫。「高級なダークモード」の出荷設定だ。どの面も雰囲気づくりで、平らな単色は一つもない。거의 검정에 가까운 짙은 남색 페이지에 위쪽으로 부드러운 광채. 카드 배경 자체도 그라디언트다 — 위는 밝고 아래는 어둡거나, 카드마다 제 강조색을 옅게 씻어 바른다: 초록 카드엔 초록 그라디언트, 보라 카드엔 보라. ‘고급 다크 모드’의 출고 설정이다. 모든 면이 분위기를 내고, 평평한 단색은 하나도 없다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
Overview
Last 30 days
7d30d90d
Revenue
$48.2k
▲ 12.4%
Active users
3,914
▲ 5.1%
Updated 2m ago
Overview
Last 30 days
7d30d90d
Revenue
$48.2k
▲ 12.4%
Active users
3,914
▲ 5.1%
Updated 2m ago
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
each card washed in a tint of its own accent (green card → green gradient, purple → purple)
Serif-italic on one word衬线斜体强调一个词一語だけセリフ体イタリック한 단어만 세리프 이탤릭
Swapping one word in a sans headline to serif italic for ‘emphasis’.在一句无衬线标题里，把某个词单独换成衬线斜体来「强调」。サンセリフの見出しの中で、ある一語だけをセリフ体のイタリックに差し替えて「強調」する。산세리프 제목에서 어떤 단어 하나만 세리프 이탤릭으로 바꿔 ‘강조’하는 것.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.要强调，就用字重、位置或断行，让整句话保持一种嗓音。真需要斜体时，用同一字体家族的斜体。強調はウェイト、位置、改行で。一文は一つの声に保つ。どうしてもイタリックが要るなら、同じ書体ファミリーのイタリックを使う。강조는 굵기, 위치, 줄바꿈으로 하고 목소리는 하나로 유지한다. 정말 이탤릭이 필요하면 같은 폰트 패밀리의 이탤릭을 쓴다.
Serif where sans belongs该用无衬线的地方用衬线サンセリフが適所なのにセリフ体산세리프가 맞는 자리에 세리프
A dev tool or SaaS page dressed in Playfair / Lora display serif — as body copy, or as an oversized italic-serif hero headline.给开发者工具 / SaaS 落地页用 Playfair、Lora 这类展示衬线：要么拿来排正文，要么整句斜体衬线的巨型 hero 标题。開発者ツールや SaaS のページに Playfair / Lora のようなディスプレイセリフを着せる——本文としてか、一文まるごと斜体セリフの巨大な hero 見出しとしてか。개발자 도구나 SaaS 페이지에 Playfair / Lora 같은 디스플레이 세리프를 입힌 것 — 본문으로 쓰든, 문장 하나를 통째로 이탤릭 세리프 대형 hero 헤드라인으로 쓰든.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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. The italic-serif hero reads as taste in isolation; by now it's the universal AI-startup landing page uniform.模型把「高级」等同于「衬线」。但衬线在小字号、信息密集的界面里，既难读又跑题，就像给终端穿上了燕尾服。斜体衬线 hero 单看像品味，如今已是 AI 创业公司落地页的统一制服。モデルは「高級」を「セリフ体」と同一視する。だがディスプレイセリフは UI サイズでは読みにくく、トーンもずれている。ターミナルにタキシードだ。斜体セリフの hero は単体では趣味に見えるが、いまや AI スタートアップのランディングページの制服だ。모델은 ‘고급’을 ‘세리프’와 동일시한다. 하지만 디스플레이 세리프는 UI 크기에서 읽기 어렵고 톤도 어긋난다 — 터미널에 턱시도를 입힌 꼴이다. 이탤릭 세리프 hero 는 홀로 보면 취향 같지만, 이젠 AI 스타트업 랜딩 페이지의 제복이다.
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 텍스트에는 네가 직접 고른, 잘 읽히는 산세리프 하나. 세리프는 정말 그 목소리를 원할 때만, 그것도 디스플레이가 아니라 본문용 세리프로.
Striking out a word, underlining it, or swiping a highlighter over it — not to delete or annotate, just decorative ‘emphasis’.划掉一个词、加下划线、刷高亮，不为删改，也不为标注，纯粹是当成装饰来强调。ある語に打ち消し線を引く、下線を引く、ハイライトを一筋なぞる。削除でも注釈でもなく、純粋に装飾的な「強調」として。단어에 취소선을 긋거나 밑줄을 치거나 형광펜을 쓱 긋는 것 — 삭제나 주석이 아니라 순전히 ‘강조’ 장식으로.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.重点靠字重、字号、断行和句子结构。删除线只用在真的删改上，下划线留给链接，高亮留给真的标注——每种样式只在它该出现的时候才出现。強調はウェイト、サイズ、改行、文の構造に担わせる。打ち消し線は本当の削除に、下線はリンクに、ハイライトは本当の注釈に。どれも役目があるときだけ出す。강조는 굵기, 크기, 줄바꿈, 문장 구조에 맡긴다. 취소선은 진짜 삭제에, 밑줄은 링크에, 형광펜은 진짜 주석에 — 각각 제 역할이 있을 때만 등장한다.
The kicker above every heading每个标题头上的小眉标すべての見出しに載る小さなキッカー모든 제목 위에 얹힌 작은 킥커
A tiny uppercase, letter-spaced label above the hero headline — then another above every section heading: FEATURES, HOW IT WORKS, TESTIMONIALS.hero 大标题上方一行加宽字距的全大写小标签，然后每个区块的标题上也来一个：FEATURES、HOW IT WORKS、TESTIMONIALS。hero の大見出しの上に、字間を広げた全大文字の小ラベル。そしてどのセクションの見出しの上にも一つずつ。FEATURES、HOW IT WORKS、TESTIMONIALS。hero 헤드라인 위에 자간을 벌린 대문자 소형 라벨 하나 — 그리고 모든 섹션 제목 위에도 하나씩. FEATURES, HOW IT WORKS, TESTIMONIALS.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
✦ Features
What it does
Reads your diff and drafts review comments.
✦ Testimonials
What users say
“It halved our review queue.”
✦ Pricing
What it costs
$8 per seat. Free for open source.
What it does
Reads your diff and drafts review comments.
What users say
“It halved our review queue.”
What it costs
$8 per seat. Free for open source.
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
The kicker is an editorial device: a real publication uses it to add information — a section, a date, a category. The AI page stamps it as a reflex, and the label says what the heading already says: FEATURES above a list of features carries zero information. When every heading wears the same hat, that's a template's rhythm, not anyone's decision.眉标本是编辑排版的工具：真正的出版物用它补充信息——栏目、日期、分类。AI 页面把它当反射动作，每个标题上盖一个，而标签说的就是标题已经说的：功能列表上方写 FEATURES 等于零信息。当每个标题都戴同一顶帽子，那是模板的节奏，不是谁的决定。キッカーは本来エディトリアルの道具で、本物の出版物は情報を足すために使う——欄、日付、カテゴリー。AI のページは反射でそれを押し、しかもラベルは見出しがすでに言っていることを言う。機能一覧の上の FEATURES は情報量ゼロだ。どの見出しも同じ帽子をかぶっているなら、それはテンプレートのリズムであって、誰かの決定ではない。킥커는 본래 에디토리얼 장치다. 진짜 출판물은 정보를 더하려고 쓴다 — 지면, 날짜, 분류. AI 페이지는 그걸 반사적으로 찍고, 라벨은 제목이 이미 한 말을 반복한다. 기능 목록 위의 FEATURES 는 정보량이 0이다. 모든 제목이 같은 모자를 쓰고 있다면 그건 템플릿의 리듬이지 누군가의 결정이 아니다.
The fix怎么改直し方고치는 법
Delete any kicker that restates its heading. Keep one only where it adds a real dimension — a category, a number in a genuine sequence, a date. Everywhere else, let scale and space introduce the section.凡是复述标题的眉标，删掉。只有当它补充真实的信息——分类、真实序列里的编号、日期——才保留；其余的区块，让字号和留白来开场。見出しを言い直しているだけのキッカーは削除する。本当の次元を足すときだけ残す——カテゴリー、本物の順序の中の番号、日付。それ以外のセクションは、サイズと余白に開幕させる。제목을 되풀이할 뿐인 킥커는 지운다. 진짜 차원을 더할 때만 남긴다 — 분류, 실제 순서 속의 번호, 날짜. 나머지 섹션은 크기와 여백이 열게 한다.
Code signals代码信号コード上のサイン코드 신호
text-xs uppercase tracking-widest above an h1/h2
the same eyebrow pattern on every section
✨-prefixed chip above the hero headline
kicker that restates the heading (FEATURES / features)
The full-sentence display headline一整句话的巨型标题一文まるごとのディスプレイ見出し한 문장 통째로 디스플레이 헤드라인
A whole marketing sentence set at display size — text-6xl, font-extrabold, tracking-tight — wrapping to three or four lines and eating the first viewport.把一整句营销话术排到展示字号——text-6xl、font-extrabold、tracking-tight——折成三四行，吃掉整个首屏。マーケティングの一文をまるごとディスプレイサイズで組む——text-6xl、font-extrabold、tracking-tight——三、四行に折り返し、最初のビューポートを食い尽くす。마케팅 문장 하나를 통째로 디스플레이 크기로 조판한 것 — text-6xl, font-extrabold, tracking-tight — 서너 줄로 꺾이며 첫 뷰포트를 먹어치운다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
We help modern teams resolve incidents faster than ever before
Pages the right engineer
It maps alerts to code owners and routes each incident to whoever shipped the change.
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
Display sizes are for display: the two or three words that can carry that scale. The model doesn't know which two words yours are, so it sets the whole pitch huge and crushes the tracking to look ‘designed’. The size is standing in for the decision about what matters — and fourteen words at 72px read as less sure, not more. (This very site did it: the definition section set a whole sentence at display size, until writing this entry forced the fix.)展示字号是给展示用的：两三个撑得起这个尺寸的词。模型不知道你的产品那两个词是什么，于是把整段推销词都放大，再把字距压死来装作『设计过』。字号在替『什么最重要』这个决定顶班——而 72px 的十四个字只会更难读，不会更笃定。（这个网站自己也犯过：定义区曾把一整句论述排在展示字号上，写下这一条才被迫改掉。）ディスプレイサイズはディスプレイのためにある。そのスケールを担える二、三語のためだ。モデルはあなたの製品のその二語が何か知らないので、売り文句を全部大きくし、字間を潰して「デザインされた」ふりをする。サイズが「何が重要か」という決定の代役を務めている——そして 72px の十四語は、より確信ありげにではなく、より読みにくくなるだけだ。（このサイト自身もやっていた。定義セクションは一文まるごとをディスプレイサイズで組んでいて、この項目を書いたことで直すはめになった。）디스플레이 크기는 디스플레이를 위한 것이다. 그 크기를 감당할 두세 단어를 위한 것. 모델은 네 제품의 그 두 단어가 뭔지 모르니 홍보 문구 전체를 키우고 자간을 짓눌러 ‘디자인된’ 척한다. 크기가 ‘무엇이 중요한가’라는 결정을 대신 서 있는 것이다 — 그리고 72px 의 열네 단어는 더 당당해지는 게 아니라 더 안 읽힐 뿐이다. (이 사이트도 그랬다 — 정의 섹션이 문장 하나를 통째로 디스플레이 크기로 조판하고 있었고, 이 항목을 쓰면서 고치게 됐다.)
The fix怎么改直し方고치는 법
Compress the one thing into a few words and let those be big; say the rest in a normal-size subline. Tighten tracking only as far as the face was designed to go.把最重要的那件事压成几个词，让它大；其余放回正常字号的副标题里说清楚。字距只收到字体本身设计允许的范围。最も重要な一つを数語に圧縮して、それを大きくする。残りは通常サイズのサブラインで語る。字間は書体が設計された範囲までしか詰めない。가장 중요한 한 가지를 몇 단어로 압축해 그것만 크게 한다. 나머지는 보통 크기의 부제에서 말한다. 자간은 서체가 설계된 범위까지만 좁힌다.
Code signals代码信号コード上のサイン코드 신호
text-5xl md:text-7xl on a full sentence
font-extrabold tracking-tight hero
display headline wrapping to 3+ lines
letter-spacing crushed past the face (−0.05em and tighter)
The flat type hierarchy没有层级的字号階層のない文字サイズ위계가 없는 글자 크기
Every size on the page crammed between 14 and 18px: headings barely bigger than body, labels barely smaller, hierarchy left entirely to shades of gray.整个界面的字号挤在 14 到 18px 之间：标题只比正文大一点点，标签只比正文小一点点，层级全靠灰色的深浅硬撑。ページ中の文字サイズが 14〜18px に押し込められている。見出しは本文よりわずかに大きいだけ、ラベルはわずかに小さいだけ。階層はグレーの濃淡に丸投げ。페이지의 모든 크기가 14~18px 사이에 몰려 있다. 제목은 본문보다 아주 조금 크고, 라벨은 아주 조금 작다. 위계는 회색의 농담에 통째로 떠넘겨져 있다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
Usage this month
API calls: 48,210 (+12% vs May)
Bandwidth: 1.9 TB of 4 TB used
Next invoice: $86 on Aug 1
API calls this month
48,210
+12% vs May · 1.9 TB bandwidth · next invoice $86 on Aug 1
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
It's the opposite failure of the display-size sentence, and the same absence: nobody decided what matters most. The model plays it safe — text-lg for the heading, text-sm for everything else — so a reader can't tell the page's one important thing from its footnotes. A real scale has contrast between steps (1.25× and up); timid sizing pushes the work onto shades of gray, and the whole page reads as fog.它是巨型标题的反面，却是同一种缺席：没人决定什么最重要。模型求稳——标题 text-lg，其余一律 text-sm——于是读者分不清页面上最重要的那件事和脚注。真正的字号刻度级差要够大（1.25 倍以上）；胆怯的字号把活儿全推给灰色文字，整页读起来像一团雾。ディスプレイサイズの一文の正反対の失敗で、同じ欠席だ。何が最も重要かを誰も決めていない。モデルは安全策を取る——見出しに text-lg、残りは全部 text-sm——だから読者はページで一番大事なことと脚注の区別がつかない。本物のスケールには段差がある（1.25 倍以上）。臆病なサイズは仕事をグレーの文字に押し付け、ページ全体が霧のように読める。디스플레이 크기 문장의 정반대 실패이자 같은 결석이다. 무엇이 가장 중요한지 아무도 결정하지 않았다. 모델은 안전하게 간다 — 제목엔 text-lg, 나머지는 전부 text-sm — 그래서 독자는 페이지에서 제일 중요한 것과 각주를 구분할 수 없다. 진짜 스케일엔 단 사이 대비가 있다(1.25배 이상). 소심한 크기는 일을 회색 글자에 떠넘기고, 페이지 전체가 안개처럼 읽힌다.
The fix怎么改直し方고치는 법
Pick a scale with few steps and real contrast between them: give the most important thing a size that says so, and let body be body. If two sizes are within a pixel or two, merge them.选一套级差明显、层级少的字号刻度：最重要的东西给一个配得上它的字号，正文就是正文。两个字号只差一两像素，就合并成一个。段数が少なく、段差がはっきりしたスケールを選ぶ。最も重要なものには、それにふさわしいサイズを与え、本文は本文にする。二つのサイズの差が 1〜2px なら、一つに統合する。단이 적고 대비가 뚜렷한 스케일을 고른다. 가장 중요한 것엔 그에 걸맞은 크기를 주고, 본문은 본문으로 둔다. 두 크기 차이가 1~2px 이면 하나로 합친다.
Highlighted keywords in copy介绍页里高亮关键词本文中のキーワードをハイライト소개 문구 속 형광 키워드
Coloring or bolding scattered words mid-paragraph, like a highlighter ran over it.在段落中间把一堆词染成主题色或加粗，像荧光笔扫过一样。段落の途中で、あちこちの語を主色に染めたり太字にしたりする。蛍光ペンがなぞったように。문단 중간에서 여기저기 단어에 색을 입히거나 굵게 만드는 것, 형광펜이 지나간 것처럼.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.让句子结构承担重点。一段里最多一个强调，或者干脆不要。強調は文の構造に担わせる。一段落につきアクセントは多くて一つ、あるいは無し。강조는 문장 구조가 지게 한다. 한 문단에 강조는 많아야 하나 — 아니면 아예 없이.
‘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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.写具体的东西。用真实的数字、名词、后果。一个人会怎么跟另一个人解释，就怎么写。具体的なことを書く。実際の数字、名詞、結果。人が人に説明するように書く。구체적인 걸 써라 — 실제 숫자, 명사, 결과. 한 사람이 다른 사람에게 설명하듯 써라.
An emoji stuck on every heading, button, and bullet point: 🚀 for launch, ⚡ for fast, 🔒 for secure, 🎉 for delight.🚀 提速、⚡ 极快、🔒 安全、🎉 好用。見出し、ボタン、あらゆる箇条書きの頭に emoji を一つ。ローンチに 🚀、速さに ⚡、安全に 🔒、うれしさに 🎉。제목, 버튼, 모든 항목 앞에 emoji 하나씩: 출시엔 🚀, 빠름엔 ⚡, 보안엔 🔒, 기쁨엔 🎉.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
🚀 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 는 정말 정보를 실을 때만 남긴다 — 이를테면 실제 상태 같은 것.
A status indicator (online / ready / live) drawn as a solid dot wrapped in a pale halo — usually pulsing, almost always saturated green. At its most decorative, it's glued into a hero marketing pill, playing status for a tagline with no state behind it.表示状态（在线／就绪／直播）的圆点，画成实心圆加一圈浅色光晕，通常还一直呼吸或脉冲，几乎永远是饱和绿。最装饰化的一种：直接嵌进首页营销胶囊里给口号「报状态」，背后根本没有任何状态。状態（オンライン／準備完了／ライブ）を示すドットを、淡いハローで包んだ実心円として描く。たいてい脈打ち、ほぼ必ず彩度の高い緑。最も装飾的な形では、ヒーローのマーケティング用ピルに埋め込まれ、背後に何の状態もないキャッチコピーの横で「ライブ」を演じる。상태(온라인 / 준비 / 라이브)를 나타내는 점을 실심 원 바깥에 옅은 후광을 두른 모양으로 그린 것 — 대개 맥박치듯 깜빡이고, 거의 언제나 채도 높은 초록. 가장 장식적인 형태로는, 뒤에 아무 상태도 없는 히어로 마케팅 알약 안에 붙어 슬로건 옆에서 ‘라이브’인 척한다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
Where modern teams plan work
Where modern teams plan work
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 — and if nothing is live behind it, no dot at all.一个小小的单色圆点，配一句文字就够了。不要光晕，不要脉冲。只在状态确实重要、或确实会变化时才上色；背后根本没有状态的话，连点都不要。小さく、平らで、単色のドットに一語添えれば十分だ。ハローも脈動も要らない。色は状態が本当に重要なとき、あるいは本当に変わるときだけ使う。背後に何の状態もないなら、ドットそのものが要らない。작고 납작한 단색 점 하나에 단어 하나면 충분하다. 후광도, 맥박도 없이. 색은 상태가 정말 중요하거나 정말 바뀔 때만 쓴다. 뒤에 아무 상태도 없다면 점 자체를 두지 않는다.
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
green ‘live’ dot in a hero pill / tagline with no state behind it
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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
thick accent ring (border-2) around a rounded card
Every feature gets a rounded-square chip with a line icon, tiled into a grid.每个功能配一个圆角方块背景 + 一个线性图标，整齐排成网格。機能ごとに角丸スクエアのチップとラインアイコンを付け、グリッドに並べる。기능마다 둥근 사각 칩에 라인 아이콘 하나를 넣어 격자로 깔아 놓은 것.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
◆FastLightning quick.
◇SecureSafe by design.
○SimpleEasy to use.
FastCold start in 180 ms, measured on a 2020 laptop.
SecureEncrypted at rest with a key only you hold.
SimpleOne 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.图标要么承载信息，要么删掉。宁可用清楚的标题和一句话，也不要一排装饰图标。アイコンは意味を担うか、消すか。明快なラベルと一文が、装飾グリフの一列に勝る。아이콘은 의미를 싣거나 아니면 빠져야 한다. 장식 글리프 한 줄보다 명확한 라벨과 문장 하나가 낫다.
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.圆角统一选一个值，全站保持一致，通常小而克制。靠实心面和留白来制造层次，别用模糊。角丸は一つの値を選び、サイト全体で貫く。たいていは小さめに。奥行きはぼかしではなく、実心の面と余白でつくる。라운드 값 하나를 골라 사이트 전체에 유지한다 — 대개 작게. 깊이는 흐림이 아니라 실심 면과 여백으로 만든다.
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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
hairline border + wide soft shadow on one card (pick one)
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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.算嵌套圆角：内 = 外 − 内边距。或者干脆不给内层加圆角。用一套小而克制的圆角刻度，让每个角与父级同心。入れ子の半径を計算する。内側 = 外側 − パディング。あるいは内側の要素には角丸を付けない。小さく抑えた角丸のスケールを一つ持ち、どの角も親と同心にする。중첩 반지름을 계산한다: 안쪽 = 바깥 − 패딩. 아니면 안쪽 요소엔 아예 라운드를 주지 않는다. 작고 절제된 라운드 스케일 하나를 두고, 모든 모서리가 부모와 동심이 되게 한다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
Dashboard
✨ New🔥 Popularβ BetaPRO
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.只在真正表达状态时用徽章（比如版本、库存）。营销氛围不需要药丸。バッジは本物のステータス（バージョン、在庫）にだけ使う。マーケティングの気分にピルは要らない。배지는 진짜 상태(버전, 재고 같은)에만 쓴다. 마케팅 분위기 내려고 알약이 필요하지는 않다.
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
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 도, 임시방편으로 놓은 첫 글자 하나도, 제품의 표식으론 부족하다.
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
CaptureActionsPrivate
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.让图标回归图标：继承文字颜色，不要容器。如果真需要容器（比如一个真正的按钮），就给它一个从调色板里选定的实心表面色，而不是一层跟图标同色的半透明底。アイコンはアイコンのままにする。文字色を継ぎ、コンテナは付けない。本当にコンテナが要るもの、たとえば本物のボタンには、パレットから選んだ不透明な一つの面の色を与える。中のアイコンと同じ色の半透明ではなく。아이콘은 아이콘으로 둔다. 글자색을 물려받고, 컨테이너는 붙이지 않는다. 정말 컨테이너가 필요하면 — 진짜 버튼 같은 것 — 팔레트에서 고른 불투명한 면 색 하나를 준다. 안에 든 아이콘과 같은 색의 반투명이 아니라.
Every card, button, and image wearing hover:scale-105 and transition-all: the cursor touches it and it grows, lifts, and bounces on an elastic ease.每张卡片、按钮、图片都挂着 hover:scale-105 和 transition-all：光标一碰就放大、上浮、弹一下，缓动还是 bounce 的。どのカードもボタンも画像も hover:scale-105 と transition-all を着ている。カーソルが触れると拡大し、浮き上がり、弾性イージングでバウンドする。모든 카드, 버튼, 이미지가 hover:scale-105 와 transition-all 을 걸치고 있다. 커서가 닿으면 커지고, 떠오르고, 탄성 이징으로 한 번 튄다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
Changelog
What shipped this week
hover — it jumps at you
Changelog
What shipped this week
hover — the surface answers, nothing moves
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
Motion is information: it should say what changed, where a thing went, what's interactive. Scaling a card on hover says nothing — the card isn't growing, and the user already knows the cursor is on it. transition-all is the tell inside the tell: animating every property at once is the absence of deciding which one means something. Add bounce easing to UI chrome and a tool turns into a toy asking to be liked.动效是信息：它该说明什么变了、东西去了哪、哪里可以交互。悬停放大什么都没说明——卡片并没有变大，用户也早知道光标在它上面。transition-all 是这个 tell 里的 tell：让所有属性一起动，就是没决定哪个属性有意义。再给界面套上 bounce 缓动，工具就成了讨好人的玩具。モーションは情報だ。何が変わったか、物がどこへ行ったか、どこが操作できるかを語るべきものだ。ホバーでカードを拡大しても何も語らない——カードは実際には大きくなっていないし、カーソルがその上にあることをユーザーはもう知っている。transition-all はこの tell の中の tell：すべてのプロパティを一斉に動かすのは、どのプロパティに意味があるかを決めていないということだ。UI にバウンスのイージングまで載せれば、道具は好かれたがるおもちゃになる。모션은 정보다. 무엇이 변했는지, 물건이 어디로 갔는지, 어디가 인터랙티브한지를 말해야 한다. 호버에 카드를 키우는 건 아무 말도 하지 않는다 — 카드가 실제로 커진 것도 아니고, 커서가 그 위에 있다는 건 사용자가 이미 안다. transition-all 은 이 tell 속의 tell 이다: 모든 속성을 한꺼번에 움직이는 건 어떤 속성이 의미 있는지 결정하지 않았다는 뜻이다. 거기에 바운스 이징까지 얹으면 도구는 사랑받고 싶어 하는 장난감이 된다.
The fix怎么改直し方고치는 법
Transition only the properties that carry the state change — background, border, opacity — at 120–200ms with a standard ease. Hover feedback is a surface shift, not growth; save spring physics for things that genuinely move through space.只过渡承载状态变化的属性——背景、边框、透明度——120 到 200 毫秒，标准缓动。悬停反馈是表面的变化，不是体积的变化；弹簧物理留给真正在空间里移动的东西。状態の変化を担うプロパティだけを遷移させる——背景、ボーダー、不透明度——120〜200ms、標準のイージングで。ホバーのフィードバックは面の変化であって体積の変化ではない。バネの物理は、本当に空間を移動するもののために取っておく。상태 변화를 싣는 속성만 전환한다 — 배경, 테두리, 불투명도 — 120~200ms, 표준 이징으로. 호버 피드백은 표면의 변화지 부피의 변화가 아니다. 스프링 물리는 정말 공간을 이동하는 것에 아껴 둔다.
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
◆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.先想清楚最重要的一件事，把它讲透。真要并列，就用真正的层级和对比，而不是一网格等权重的卡片。最も重要な一つを決め、それを十分に見せる。どうしても並べるなら、等ウェイトのカードのグリッドではなく、本物の階層とコントラストで。가장 중요한 한 가지를 정하고 그것을 온전히 보여준다. 굳이 나열해야 한다면, 등가 카드의 격자가 아니라 진짜 위계와 대비를 쓴다.
The invented stat row编出来的数据三连でっち上げの統計トリオ지어낸 숫자 삼종 세트
Three big numbers in a row — 10k+ developers, 99.9% uptime, 24/7 support — on a product that launched yesterday.三个大数字排成一排：10k+ 开发者、99.9% 在线率、24/7 支持。产品可能昨天才上线。大きな数字が三つ横に並ぶ——10k+ 開発者、99.9% 稼働率、24/7 サポート。製品は昨日ローンチしたばかりかもしれない。큰 숫자 세 개가 한 줄로 — 10k+ 개발자, 99.9% 가동률, 24/7 지원. 제품은 어제 출시됐을지도 모른다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
10k+Developers
99.9%Uptime
24/7Support
CI runs yesterday
1,847
median 3m 12s — from the public status page
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
The stat row is social proof turned into a layout, so the model fills the layout whether or not the proof exists. The numbers are always the same because they aren't measurements, they're set dressing: a round 10k+, two nines, a 24/7. Real numbers are odd and specific; these are what credibility looks like from a distance. And one invented figure poisons every true one beside it.数据行是把『社会证明』做成了版式，于是模型不管证明存不存在，都会把版式填满。数字永远是那几个，因为它们不是测量结果，是布景：一个整数的 10k+、两个 9、一个 24/7。真实的数字零碎而具体；这些只是远看像可信的东西。而一个编造的数字，会把旁边每个真数字都拖下水。統計の列は「社会的証明」をレイアウトにしたもので、モデルは証明が存在しようがしまいがレイアウトを埋める。数字がいつも同じなのは、それが測定値ではなく舞台装置だからだ。丸い 10k+、9 が二つ、24/7。本物の数字は半端で具体的だ。これらは遠目に信頼できそうに見えるだけのもの。そして、でっち上げた数字一つが、隣の本物の数字すべてを道連れにする。숫자 줄은 ‘사회적 증거’를 레이아웃으로 만든 것이라, 모델은 증거가 있든 없든 레이아웃을 채운다. 숫자가 늘 그 몇 개인 건 측정값이 아니라 무대 장치이기 때문이다: 동그란 10k+, 9 두 개, 24/7. 진짜 숫자는 어중간하고 구체적이다. 이것들은 멀리서 볼 때 신뢰처럼 보이는 것일 뿐이다. 그리고 지어낸 숫자 하나가 옆의 진짜 숫자 전부를 물귀신처럼 끌고 내려간다.
The fix怎么改直し方고치는 법
Show a number only if you measured it, and say where it came from — one real, checkable figure beats three round ones. No numbers yet? Say what the product does instead.只展示你真正量过的数字，并说明它从哪来；一个可查证的真数字，胜过三个整数。还没有数字，就说产品做了什么。実際に測った数字だけを見せ、どこから来たかを添える。検証できる本物の一つは、丸い三つに勝る。まだ数字がないなら、代わりに製品が何をするかを言う。정말 측정한 숫자만 보여주고 출처를 밝힌다 — 검증 가능한 진짜 하나가 동그란 셋보다 낫다. 아직 숫자가 없다면, 대신 제품이 무엇을 하는지 말한다.
A giant faint ordinal beside every marketing section — 01 Collaborate, 02 Innovate, 03 Scale — as if they were steps in a sequence.每个营销区块旁边一个巨大的浅色序号：01 协作、02 创新、03 规模化，仿佛它们是一串有顺序的步骤。マーケティングの各セクションの脇に、巨大な薄い序数——01 Collaborate、02 Innovate、03 Scale——まるで順序のあるステップであるかのように。마케팅 섹션마다 옆에 거대한 옅은 서수 하나 — 01 Collaborate, 02 Innovate, 03 Scale — 마치 순서 있는 단계인 것처럼.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
01
Collaborate
Work together in real time.
02
Innovate
Move fast, break nothing.
03
Scale
Grow without limits.
Set up in three steps
brew install relay
relay init in your repo
Push — every PR gets a preview
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
Numbering is a claim: these things happen in this order. Feature sections have no order — nobody collaborates, then innovates, then scales — so the numerals are pure costume, borrowed from editorial design where an index means something. It's the cheapest way to make a page look structured without deciding on a structure.编号是一种断言：这些事按这个顺序发生。功能区块之间没有顺序——没有人先协作、再创新、然后规模化——所以这些序号纯粹是戏服，从编号真有含义的编辑设计里借来的。这是让页面看起来有结构、又不用真正决定结构的最廉价手法。番号は主張だ。これらはこの順番で起きる、という。機能セクションに順序はない——誰もまず協業し、次に革新し、それから拡大したりしない——だからこの数字は純粋な衣装で、索引に意味があるエディトリアルデザインからの借り物だ。構造を決めずに、ページを構造化されて見せる最も安い手口だ。번호는 주장이다: 이 일들이 이 순서로 일어난다는. 기능 섹션엔 순서가 없다 — 아무도 먼저 협업하고, 다음에 혁신하고, 그다음에 확장하지 않는다 — 그러니 이 숫자들은 순전한 의상이고, 색인이 진짜 의미를 갖는 에디토리얼 디자인에서 빌려 온 것이다. 구조를 결정하지 않고 페이지를 구조 있어 보이게 하는 가장 값싼 수법이다.
The fix怎么改直し方고치는 법
Number what's genuinely ordered — install steps, a changelog, a catalogue — and delete the ornamental ordinals everywhere else. If sections need telling apart, scale and space do it.给真正有顺序的东西编号——安装步骤、更新日志、一本图鉴——其余地方的装饰序号删掉。区块要区分，交给字号和留白。本当に順序のあるものに番号を振る——インストール手順、変更履歴、図鑑——それ以外の装飾の序数は削除する。セクションを区別したいなら、サイズと余白がやってくれる。정말 순서가 있는 것에 번호를 단다 — 설치 단계, 변경 로그, 도감 — 그 외의 장식 서수는 지운다. 섹션을 구분해야 한다면 크기와 여백이 해 준다.
A bordered, rounded, shadowed card holding another card holding another — every layer with its own surface and its own padding.一张带边框、圆角、阴影的卡片，里面又是一张，再里面还有一张——每一层都有自己的底色和内边距。ボーダー、角丸、影のついたカードの中に、もう一枚のカード、その中にさらにもう一枚——どの層も自分の面と自分のパディングを持っている。테두리·라운드·그림자를 두른 카드 안에 또 카드, 그 안에 또 카드 — 층마다 제 면과 제 패딩을 갖고 있다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
Billing
Current plan
Pro — $8/mo
Renews May 3
Billing
PlanPro — $8/mo
RenewsMay 3
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
A card is a claim: what's inside is one self-contained thing. Nest them and the claim collapses — three borders deep, nothing is contained, and the padding stacks until the content is a sliver. The model boxes things because a box is the only grouping move it trusts: grouping with spacing and alignment means deciding what belongs together; wrapping everything in a surface doesn't.卡片是一个断言：里面的内容是一个自足的整体。层层嵌套之后断言就塌了：三层边框下去，什么都没被『装住』，内边距一层层叠到内容只剩一条缝。模型爱套盒子，因为盒子是它唯一信得过的分组手段——用间距和对齐来分组，得先决定什么属于什么；而给一切都包一层表面，不用。カードは主張だ。中身は自足した一つのまとまりである、という。入れ子にすればその主張は崩れる——ボーダー三枚の奥では何も「収まって」おらず、パディングは積み重なって中身は細い帯だけになる。モデルが箱を重ねるのは、箱がモデルの信じられる唯一のグルーピング手段だからだ。余白と整列でグルーピングするには、何が何に属するかをまず決めなければならない。すべてに面を巻くのに、決断は要らない。카드는 주장이다: 안에 든 것이 자족적인 하나라는. 겹겹이 중첩하면 그 주장은 무너진다 — 테두리 세 겹 아래엔 아무것도 ‘담기지’ 않았고, 패딩이 층층이 쌓여 내용은 가느다란 띠만 남는다. 모델이 상자를 겹치는 건 상자가 저가 믿는 유일한 그룹핑 수단이기 때문이다. 간격과 정렬로 묶으려면 무엇이 무엇에 속하는지 먼저 결정해야 하지만, 모든 것에 면을 두르는 데는 결정이 필요 없다.
The fix怎么改直し方고치는 법
One surface per region. Inside it, group with spacing, alignment, and hairline dividers; a child earns its own surface only when it's genuinely a separate object — a preview, an embed.一个区域一层表面。表面之内用间距、对齐和细分隔线来分组；只有当子内容真的是一个独立对象——一段预览、一个嵌入——才配自己的表面。一つの領域に面は一枚。その中では余白、整列、ヘアラインの区切りでグルーピングする。子が自分の面を持てるのは、本当に独立した対象——プレビュー、埋め込み——であるときだけだ。한 영역에 면은 한 겹. 그 안에서는 간격, 정렬, 얇은 구분선으로 묶는다. 자식이 제 면을 가질 자격은 정말 독립된 대상일 때뿐이다 — 미리보기, 임베드 같은 것.
gap-4, p-4, space-y-4 — one spacing value stamped across the page: the distance between a heading and its own body is the same as the distance between two unrelated sections.gap-4、p-4、space-y-4——同一个间距值盖满整个页面：标题和它的正文之间的距离，和两个不相干区块之间的距离，一模一样。gap-4、p-4、space-y-4——同じ間隔の値がページ全体に押される。見出しと自分の本文の距離が、無関係な二つのセクションの距離と同じだ。gap-4, p-4, space-y-4 — 같은 간격 값이 페이지 전체에 찍힌다. 제목과 제 본문 사이 거리가, 무관한 두 섹션 사이 거리와 똑같다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
Profile
Name — Sasha Ito
Email — sasha@relay.dev
Danger zone
Delete workspace — removes all data
Profile
Name — Sasha Ito
Email — sasha@relay.dev
Danger zone
Delete workspace — removes all data
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
Spacing is how a layout says what belongs together: tight inside a group, generous between groups. One value everywhere announces that nothing belongs to anything — proximity stops carrying information, and the eye has to read every line to find the structure. It's the spacing form of the same absence: grouping requires deciding what's related, and the model didn't.间距是版式表达『什么和什么是一伙』的方式：组内紧，组间松。一个值用到底，等于宣布什么都不属于什么——亲密度不再携带信息，眼睛只能逐行读字去找结构。这是间距版的同一种缺席：分组需要先决定什么相关，而模型没有决定。間隔は「何と何が仲間か」をレイアウトが語る方法だ。グループの中は詰め、グループの間は空ける。ひとつの値で全部を通すのは、何もどこにも属さないと宣言することだ——近接が情報を運ばなくなり、目は構造を探して一行ずつ読むしかない。これも同じ欠席の間隔版だ。グルーピングには何が関連するかの決定が要るのに、モデルは決めていない。간격은 레이아웃이 ‘무엇이 한패인지’를 말하는 방식이다. 그룹 안은 좁게, 그룹 사이는 넓게. 값 하나로 끝까지 가는 건 아무것도 어디에도 속하지 않는다는 선언이다 — 근접성이 정보를 싣지 못하게 되고, 눈은 구조를 찾아 한 줄씩 읽을 수밖에 없다. 이것도 같은 결석의 간격판이다. 묶으려면 무엇이 관련 있는지 먼저 결정해야 하는데, 모델은 결정하지 않았다.
The fix怎么改直し方고치는 법
Space by relationship, not by token: pull related lines close (a heading sits near its body), push unrelated groups apart. A small scale with real jumps (4 / 8 / 16 / 32 / 64), used unevenly on purpose.按关系给间距，不是按 token：相关的拉近（标题贴着它的正文），不相关的推远。用一套有真实跳跃的小刻度（4 / 8 / 16 / 32 / 64），而且故意用得不均匀。トークンではなく関係で間隔を付ける。関連する行は近づけ（見出しは自分の本文のそばに）、無関係なグループは遠ざける。本物の跳躍のある小さなスケール（4 / 8 / 16 / 32 / 64）を、わざと不均等に使う。토큰이 아니라 관계로 간격을 준다. 관련된 줄은 붙이고(제목은 제 본문 곁에), 무관한 그룹은 밀어낸다. 진짜 도약이 있는 작은 스케일(4 / 8 / 16 / 32 / 64)을 일부러 고르지 않게 쓴다.
Code signals代码信号コード上のサイン코드 신호
gap-4 / space-y-4 / p-4 everywhere
heading equidistant from its body and the previous section
Inter everywhere满世界的 Inter世界中どこでも Inter온 세상이 Inter
Space Grotesk for display, Inter for body — or Geist, Manrope, Plus Jakarta Sans. Every AI-built page draws from the same five faces.标题 Space Grotesk，正文 Inter——或者 Geist、Manrope、Plus Jakarta Sans。每个 AI 生成的页面都在同样五款字体里抽签。見出しは Space Grotesk、本文は Inter——あるいは Geist、Manrope、Plus Jakarta Sans。AI が組んだページは、みんな同じ五つの書体からくじを引く。제목은 Space Grotesk, 본문은 Inter — 아니면 Geist, Manrope, Plus Jakarta Sans. AI 가 만든 페이지는 죄다 같은 다섯 서체에서 제비를 뽑는다.
Tap to compare the two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
/* a tool should dress like the OS */
--font: ui-sans-serif, system-ui;
chosen for a reason — yours may differ
Why it's slop为什么是 slopなぜ slop なのか왜 slop 인가
They're good typefaces, which is exactly the trap: the model reaches for them because everyone did, and every product wearing them dissolves into the same page. A typeface is the loudest single signal of who made this — outsourcing it to the training-data average dodges the identity decision the same way the indigo gradient dodged the color one.它们都是好字体，这正是陷阱：模型伸手拿它们，是因为所有人都在用，于是每个穿着它们的产品都溶成同一张页面。字体是『这是谁做的』最响亮的单一信号——把它外包给训练数据的平均值，就和当年蓝紫渐变回避配色决定一样，是在回避身份决定。どれも良い書体だ。それこそが罠だ。モデルがそれに手を伸ばすのは、みんながそうしたからで、それを着た製品はみな同じページに溶けていく。書体は「これを作ったのは誰か」を語る最も大きな単一のシグナルだ——それを訓練データの平均に外注するのは、かつてインディゴのグラデーションが配色の決定を回避したのと同じやり方で、アイデンティティの決定を回避することだ。다 좋은 서체다. 바로 그게 함정이다. 모델이 손을 뻗는 건 모두가 그랬기 때문이고, 그걸 입은 제품들은 전부 같은 페이지로 녹아든다. 서체는 ‘이걸 누가 만들었나’를 말하는 가장 큰 단일 신호다 — 그걸 학습 데이터의 평균에 외주 주는 건, 옛날 인디고 그라디언트가 색 결정을 회피했던 것과 똑같이 정체성 결정을 회피하는 일이다.
The fix怎么改直し方고치는 법
Choose a face the way you'd choose a logo: try a few, set a page of your own copy in each, and be able to say why this one. Landing back on Inter after that is a choice; starting there isn't. (A system stack, picked for a reason, is a choice too.)像挑 logo 一样挑字体：多试几款，用自己的文案排一页读一读，说得出为什么是它。比较过后回到 Inter，是选择；上来就是 Inter，不是。（有理由地用系统字体栈，同样是选择。）logo を選ぶように書体を選ぶ。いくつか試し、自分のコピーを一ページ組んで読み、なぜこれなのかを言えるようにする。比較した末に Inter に戻るのは選択だ。最初から Inter なのは違う。（理由があってのシステムフォントスタックも、同じく選択だ。）logo 고르듯 서체를 고른다. 몇 개 써 보고, 네 카피 한 페이지를 각각 조판해 읽어 보고, 왜 이것인지 말할 수 있어야 한다. 비교 끝에 Inter 로 돌아오는 건 선택이다. 처음부터 Inter 인 건 아니다. (이유 있는 시스템 폰트 스택도 마찬가지로 선택이다.)
Code signals代码信号コード上のサイン코드 신호
Inter + Space Grotesk pairing
fonts.googleapis.com/css2?family=Inter
Geist / Manrope / Plus Jakarta Sans as the default
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 two treatments点按对照两种处理タップで2つの扱いを見比べる눌러서 두 가지 처리를 비교한다
SLOPSLOPSLOPSLOPCLEAN清理后CLEANCLEAN
/\_/\ ___ _ __
( 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 에 빠지지 않는 여섯 가지
01
Decide before you decorate先决定，再装饰飾る前に決める꾸미기 전에 정한다
Every visual choice should be one you can explain. If you can't, it's a default someone else set.每个视觉选择都得有理由。说不出的，就是别人替你设好的默认值。どの見た目の選択にも、説明できる理由があるはずだ。説明できないなら、それは誰かが決めたデフォルトにすぎない。모든 시각적 선택에는 설명할 수 있는 이유가 있어야 한다. 설명하지 못한다면 그건 남이 정해 둔 기본값이다.
02
One accent, one voice一个主色，一种嗓音アクセントは一つ、声も一つ강조색 하나, 목소리 하나
Use a single accent color, sparingly. Keep the whole page reading like one person talking.只用一个强调色，而且要省着用。整页文案，从头到尾是同一个人在说话。強調色は一つだけ、控えめに。ページ全体が一人の人間の声で語られるように保つ。강조색은 하나만, 아껴서 쓴다. 페이지 전체가 한 사람이 말하는 것처럼 읽히게 유지한다.
03
Hierarchy from scale and space层级来自字号与留白階層はサイズと余白でつくる위계는 크기와 여백에서 나온다
Rank things with size, weight, and spacing. Coloring words or swapping in a font is the lazy shortcut.用字号、字重和间距来区分主次。给文字上色、临时换字体，都是偷懒的取巧做法。大きさ・太さ・間隔で優先順位をつける。文字に色をつけたり書体を差し替えたりするのは、手抜きの近道だ。크기, 굵기, 간격으로 우선순위를 매긴다. 글자에 색을 입히거나 서체를 바꿔 끼우는 건 게으른 지름길이다.
04
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 은 쌓여서 생긴다. 안 못생기게 만드는 첫걸음은 덜어내는 것이다. 남은 것 하나하나가 꼭 있어야 할 때까지.
05
Specific beats loud具体胜过响亮具体は威勢よりも強い구체적인 것이 요란한 것을 이긴다
Write real numbers, nouns, and consequences. ‘40% faster’ says more than ‘blazing fast ✨’.写真实的数字、名词和后果。「快 40%」比「快如闪电 ✨」更有说服力。実際の数字・名詞・結果を書く。「40% 速い」は「爆速 ✨」よりも多くを語る。실제 숫자, 명사, 결과를 쓴다. ‘40% 빠름’이 ‘번개처럼 빠름 ✨’보다 더 많은 걸 말한다.
06
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 를 낸다. 혹은 당신이 승인한 범위 안에서 바로 적용한다. 브랜드는 남기고, 기본값은 버린다.
