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 받기

Reference specimen: 参考样本：参考サンプル：참고 샘플: OpenClaw — a product that ships a near-complete set of contemporary AI slop; most of these tells show up in it. —— 一个几乎收齐了当代 AI slop 的产品，这份图鉴里的 tell 多半能在它身上找到。 —— 現代の AI slop をほぼひと通り揃えて出荷した製品で、この図鑑の tell の大半はここに見つかる。 —— 요즘의 AI slop 을 거의 빠짐없이 담아 내놓은 제품으로, 이 도감의 tell 대부분이 여기서 발견된다.

Definition定义定義정의

AI slop is ugly.
The loud, cluttered, trying-too-hard kind of ugly.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.模型没有品味，于是去抓那些在缩略图里显得「高级」的东西：一道渐变、一层光晕、一排徽章、一墙发光卡片。每一样单独看都是俗套；全堆在一起、什么都不删，就熬成了你见过一千遍的那种刺眼页面。モデルにはセンスがない。だからサムネイルで「高級」に見えるものを掴んでくる。グラデーション、グロー、バッジの列、光るカードの壁。どれも単体ではありふれた常套句だ。何も削らずに積み上げると、あなたが千回見たあの毒々しいページに煮詰まる。모델에는 취향이 없다. 그래서 섬네일에서 ‘고급스러워’ 보이는 것을 집어 온다. 그라데이션 하나, 광채 한 겹, 배지 한 줄, 빛나는 카드로 채운 벽. 하나하나는 그저 흔한 상투구다. 아무것도 덜어내지 않고 쌓아 올리면, 당신이 천 번은 본 그 요란한 페이지로 굳어 버린다.

Adding a nicer effect won't rescue it. Remove things instead, until each one earns its place. Plain and deliberate beats loud and default every time. Each entry below shows the slop, why it's ugly, and the quieter move.再加一个更炫的效果救不了它。反过来往下删，删到每一样都配得上留下来。朴素而克制，比又吵又默认好看得多。下面每一条都给你：它长什么样，为什么难看，换成什么更安静的做法。もっと派手な効果を足しても救えない。逆に削っていく。残るもの一つひとつがその場所にふさわしくなるまで。素朴で意図的なほうが、うるさくデフォルトなものにいつも勝つ。以下の各項目は、その slop がどう見えるか、なぜ醜いか、そしてより静かな代わりの手を示す。더 화려한 효과를 얹어도 살릴 수 없다. 반대로 덜어낸다. 남는 것 하나하나가 그 자리에 어울릴 때까지. 수수하고 의도적인 편이 요란하고 기본값인 것을 언제나 이긴다. 아래의 각 항목은 그 slop 이 어떻게 보이는지, 왜 못생겼는지, 그리고 더 조용한 대안을 보여준다.

The catalogue图鉴図鑑도감

18 tells, taken apart one by one18 种 AI slop，逐条拆解17 種類の AI slop を、一つずつ分解する17 가지 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. OpenClaw's coral sits on the edge of this family.这是模型对「温暖、亲和」最偷懒的翻译。它把 Tailwind 的 warm 色阶原样端上来，结果每个「有温度」的产品长得一模一样。OpenClaw 的珊瑚橙就在这个家族边缘。「あたたかくて親しみやすい」をモデルが最も横着に翻訳した結果だ。Tailwind の warm 系ランプを生のまま出すので、どの「人間味のある」製品も同じ顔になる。OpenClaw のコーラルもこの一族の縁にいる。‘따뜻하고 친근하게’를 모델이 가장 게으르게 옮긴 결과다. Tailwind 의 warm 색계를 그대로 가져다 쓰니 ‘사람 냄새 나는’ 제품이 죄다 똑같아 보인다. OpenClaw 의 코랄이 딱 이 계열 언저리에 있다.

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 picked it. Three or four unrelated candy colors crammed together, related to nothing — not your brand, not each other — a bowl of default rainbow candy where every box shouts 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
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 a word out, underlining it, or swiping a highlighter over it — not to delete or annotate, purely as 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: 🚀 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组件コンポーネント컴포넌트

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组件コンポーネント컴포넌트

The over-styled select过度设计的下拉框盛りすぎのセレクト과하게 꾸민 셀렉트

The humble 重做成一个渐变胶囊：大圆角、发光的箭头、超大内边距，选项还配上 emoji、对勾和主色悬停。素っ気ない 를 그라디언트 알약으로 다시 만든 것: 큰 라운드, 빛나는 화살표, 과한 패딩, 그리고 emoji·체크·강조색 호버가 달린 옵션.

Tap to compare the same content点按对照，同一内容两种处理タップで同じ内容を見比べる눌러서 같은 내용을 비교한다
🎨 Theme: Aurora ⌄
  • ✨ Aurora ✓
  • 🌊 Ocean
  • 🌅 Sunset
Theme: Aurora
  • Aurora ✓
  • Ocean
  • Sunset

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

The native select is one of the few controls people already know cold — keyboard, mobile, screen reader, all handled for free. Re-skinning it as a glowing gradient breaks that behavior and piles chrome onto a control whose whole job is to disappear. It's makeup on plumbing.原生 select 是用户少数几个闭着眼都会用的控件——键盘、移动端、读屏软件全都现成。把它换皮成发光渐变，既破坏了这些行为，又给一个「本该隐形」的控件堆上一身装饰。这是在给水管做美颜。ネイティブの select は、ユーザーが目をつぶっても使える数少ないコントロールだ。キーボードもモバイルもスクリーンリーダーも、ぜんぶ面倒を見てくれる。それを光るグラデーションに着せ替えると、その挙動を壊し、「消えているべき」コントロールに装飾を積み上げることになる。配管に化粧をしているようなものだ。네이티브 select 는 사용자가 눈 감고도 쓸 줄 아는 몇 안 되는 컨트롤이다 — 키보드, 모바일, 스크린 리더까지 다 알아서 처리된다. 이걸 빛나는 그라디언트로 갈아입히면 그 동작을 깨뜨리고, ‘보이지 않아야 할’ 컨트롤에 장식을 쌓는 셈이다. 배관에 화장을 하는 격이다.

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

Use the native select, or style it lightly: a hairline border, a modest radius, one small chevron, a neutral hover. Let it be boring — it's plumbing, not a feature.直接用原生 select，或只做轻量样式：一条细边框、克制的圆角、一个小箭头、中性的悬停。让它平淡无奇——它是水管，不是卖点。ネイティブの select を使うか、軽く整えるだけにする。ヘアラインの罫線、控えめな角丸、小さなシェブロン一つ、中性的なホバー。退屈でいい。これは配管であって、機能ではない。네이티브 select 를 쓰거나 가볍게만 손본다: 얇은 테두리, 절제된 라운드, 작은 화살표 하나, 중립적인 호버. 지루해도 된다 — 이건 배관이지 기능이 아니다.

Code signals代码信号コード上のサイン코드 신호
  • custom <select> with gradient/accent border
  • glowing chevron icon
  • rounded-2xl / pill select control
  • options with emoji + accent-colored hover
  • re-implemented dropdown replacing native select
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’. OpenClaw's whole site is this.全站等宽字体、近黑背景、单一暖色点缀、ASCII 艺术——一种「看过 Vercel 博客的 AI」审美。OpenClaw 整站就是它。全面的な等幅、ほぼ黒の背景、暖色のアクセント一つ、ASCII アート。「Vercel のブログを一本読んだ AI」の見た目だ。OpenClaw のサイトはまるごとこれだ。전면 등폭 폰트, 거의 검은 배경, 따뜻한 강조색 하나, ASCII 아트 — ‘Vercel 블로그 글 하나 읽은 AI’ 같은 룩. OpenClaw 사이트 전체가 이거다.

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 proposes the clean fix, or applies it within a scope you approve.同一套分类，做成能直接跑在你项目里的 skill。它扫描代码，按图鉴逐条标出 slop，说明原因，再给出干净的改法，或在你确认的范围内直接改。同じ分類を、あなたのプロジェクトで直接走らせる skill にした。コードを走査し、この図鑑の tell を一つずつ指摘し、理由を説明し、そして綺麗な直し方を提案する。あるいは、あなたが認めた範囲内で直接直す。같은 분류 체계를, 당신의 프로젝트에서 바로 돌리는 skill 로 만들었다. 코드를 훑어 이 도감의 tell 을 하나씩 짚고, 이유를 설명하고, 깔끔한 수정안을 제안한다. 혹은 당신이 승인한 범위 안에서 바로 고친다.

  • Detect — from 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 를 낸다. 혹은 당신이 승인한 범위 안에서 바로 적용한다. 브랜드는 남기고, 기본값은 버린다.