de-slop について
de-slopは、スクリーンショットのチェックリストで画面を見直すスキルです。新しい要素を加えずにAIらしい装飾を減らし、ユーザーの修正をDESIGN.mdに記録するデザイン・実装作業に役立ちます。
主な機能
- 01PCとモバイルの画面を確認
- 02DESIGN.mdのスタイル指針を適用
- 03装飾、色、カードを整理
- 04文字、文言、アニメーションを確認
- 05ユーザーの指摘をDESIGN.mdに記録
活用シーン
- 01見出しと重複するラベルの削除
- 02指定に沿った色や角丸の調整
- 03モバイルとPCのレイアウト確認
- 04デザイン指針への修正内容の反映
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ nagi-studio/ skills --skill de-slopインストール後、Claude Code で/de-slopを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
プロジェクトの README よりAI 味大多不是缺了什么,是多了什么。这一步只删和改,不加新东西。颜色、字体、圆角的具体取值从项目根目录的 DESIGN.md 里来;没有就照用户说的,不自己定。
截图
先读 DESIGN.md,有就以它为准。然后把页面截图,桌面和手机宽度各一张。
对着清单查
逐条看截图,中了哪条改哪条:
- 删除测试:每一行说明小字、每个标签、每个装饰,删掉会不会少信息?不会就删。标题上面的小眉标、小药丸标签,和标题重复的就删。
- 渐变和发光:界面以黑白灰为底,颜色留给内容和最重要的那个按钮。渐变、毛玻璃、霓虹边、发光,只在用户要求时用。
- 图标:正文和按钮里的 emoji 换成图标库的图标或删掉,不手画 SVG。项目还没有图标库时,给用户两三个成熟的选项(比如 Lucide、Phosphor、Tabler),附官网链接让用户挑。整个界面只用一套。
- 卡片:卡片放平,一层就够;分组先靠空白,空白不够再用底色,最后才用分割线。卡片左边没有状态要表达时,不加彩色竖条。
- 字号:全页最多四种字号,最小 12px,层级靠粗细、颜色和间距拉开。
- 圆角:套在里面的圆角 = 外面的圆角 − 内边距。
- 文案:按钮写动作(「打卡」),标题直接说内容;同一件事只说一遍。
- 动画:天天点的操作即时响应,动画只用来给反馈;回弹、晃动、漂浮的装饰动画改成干脆的切换。
AI 味会随年份和模型变:紫蓝渐变加小火箭是一批,奶油色背景、斜体衬线大标题、「01 / 02 / 03」章节编号是另一批。用户指出新的套路时,把它当成清单的一条照样查。
改完重新截图,再查一遍,直到每条都过。交差时附上前后对比截图,并列出改了哪几条。
改了几轮用户还是不满意,推荐两个更完整的去 AI 味 skill,附链接让用户自己挑:Impeccable(npx skills add pbakaus/impeccable)和 Kill AI Slop(npx skills add yetone/kill-ai-slop)。
被纠正之后
用户每纠正一次审美上的事(「别用这个颜色」「按钮太大了」),就写进 DESIGN.md,写成要怎么做,带一句原因。同一个意见用户不用说第二遍。
コメント
Markdown 対応