A Claude Code and Codex skill that turns vibecoded, AI-looking UI into a designed interface with its own character. It audits the screen for slop first — purple gradients, glows, emoji labels, shouty copy, uneven spacing — then sets a direction from the product itself and fixes it pass by pass, like a designer doing a redline review. It works on dashboards, apps, and landing pages in Next.js, React, Vue, Svelte, Tailwind, or plain HTML and CSS, and can even start from a live-site link.面向 Claude Code 与 Codex 的技能，把氛围编程生成的 AI 味界面改造成有自身性格的设计界面。它先审计屏幕上的 AI 味痕迹——紫色渐变、辉光、表情符号标签、夸张文案、不均匀间距，再从产品本身定方向、逐遍修复，如同设计师做红线评审。适用于 Next.js、React、Vue、Svelte、Tailwind 或原生 HTML/CSS 的仪表盘、应用与落地页，甚至可以从一个线上站点链接开始。面向 Claude Code 與 Codex 的技能，把氛圍程式設計產生的 AI 味介面改造成有自身性格的設計介面。它先稽核螢幕上的 AI 味痕跡——紫色漸層、輝光、表情符號標籤、誇張文案、不均勻間距，再從產品本身定方向、逐遍修復，如同設計師做紅線審查。適用於 Next.js、React、Vue、Svelte、Tailwind 或原生 HTML/CSS 的儀表板、應用程式與到達頁，甚至可以從一個線上網站連結開始。Claude Code と Codex 向けのスキル。バイブコーディングで生まれた AI 臭い UI を、そのプロダクトらしい性格を持つデザインされたインターフェースに変える。まず紫グラデーション、グロー、絵文字ラベル、煽り文句、不均一な間隔といった slop を監査し、プロダクト自体から方向を決めて、デザイナーの赤入れのように段階的に修正する。Next.js、React、Vue、Svelte、Tailwind、素の HTML/CSS によるダッシュボード、アプリ、ランディングページに対応し、ライブサイトのリンクから始めることもできる。
Quick start快速上手快速上手クイックスタート
What it does
Unslop is a skill for Claude Code and Codex that turns vibecoded, AI-looking UI into a designed interface with its own character. It finds the slop first, then sets a direction from your product and fixes the screen pass by pass like a designer doing a redline review.
How it works
It looks at the rendered screen, audits every sign of slop with where it lives, and writes a five-line direction: product, character, world, moments, and one signature detail. It shows the audit and direction before editing, then fixes the screen in nine passes in order: spacing, color, icons, copy, type, layout, details, visuals, and motion. If the screen is already good, it says so and suggests only small refinements.
How to use it
For Claude Code, clone the repo and copy the skill with
/unslop my landing page and make the story video so I can post it
Key points
It audits before it edits, and the direction is confirmed before any change, so steer it early.
Features, content, and section order stay; what changes is that every size, color, word, and image becomes deliberate.
Live-site snapshots and story videos need Playwright and Chromium; story videos also need ffmpeg. Hero image generation via fal, Replicate, OpenAI images, or Higgsfield is optional and paid generations are asked about first.
License is CC BY 4.0: credit Damir Sokolovsky and link back to the repository in any copy or adaptation.
它是做什么的
Unslop 是面向 Claude Code 与 Codex 的技能，把氛围编程生成的 AI 味界面改造成有自身性格的设计界面。它先找出 AI 味痕迹，再从产品本身定方向、逐遍修复，如同设计师做红线评审。
它怎么工作
它先看渲染后的屏幕，逐条审计 AI 味痕迹及其位置，再写出五行方向：产品、性格、世界、亮点时刻与一个标志性细节。先向你展示审计与方向、确认后再动手，按间距、颜色、图标、文案、字体、布局、细节、视觉、动效九遍顺序修复。如果屏幕本身已经很好，它会明说，只提少量小改进。
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则，产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則，產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。
A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集，已收录 70 多个真实品牌系统，包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目，编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch，合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集，已收錄 70 多個真實品牌系統，包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案，編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch，合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。
Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)
Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能：艺术指导、参考图和浏览器检查，而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局，而是推动智能体选定方向、用参考图 grounding，并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend，旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能：藝術指導、參考圖和瀏覽器檢查，而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面，而是推動智慧體選定方向、用參考圖 grounding，並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend，舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。