Unslop

資料確認日：2026年11月6日。発表元の主張と第三者の体験を区別し、AIDreamHubの実測とはしていません。

サイト生成ではなく、既存UIの判断を整える

Damir SokolovskyのUnslopは、コーディングエージェントを通じて既存の画面を改善するスキルです。別のホスティングサービスへ移すのではなく、現在のフロントエンドで編集します。紫のグラデーションを消すだけでなく、情報の優先順位を説明でき、動作を保ち、製品固有の表現にできるかが評価点です。

動く管理画面やランディングページがあり、コード差分も確認できる開発者に向きます。ユーザー調査、デザインシステム、アクセシビリティ検査や回帰テストの代用ではありません。既存のブランド規則は、変更の制約として先に渡してください。

AIDreamHubが撮影した公式ページ。製品をローカル実行した画面ではありません。

診断、方向決め、編集を分ける理由

公式の流れは、問題と場所の診断、製品から導く方向の合意、その後の編集です。余白、色、アイコン、文言、文字組み、レイアウト、細部、ビジュアル、動きの順に扱います。文言の長さが改行を変えるため、全部を同時に触るより原因を追いやすい構成です。

READMEには10秒未満の正方形の改版動画もあります。公開サイトの撮影や動画にはPlaywrightとChromium、動画にはさらにFFmpegが必要です。画像生成は任意で別料金になり得ます。変化を見せる動画は、成約率やタスク達成率の改善を証明しません。

日本語の体験記事から分かること

2026年11月2日の「まさお」の体験記事では、通常のClaudeによる修正とUnslopを比較しています。管理画面では色の置き方や文言に差を感じた一方、ランディングページの差は小さく、静的な数字が変更されたとも報告しています。一人の作例であり、統制された性能比較でも当サイトの実測でもありません。

ここから導ける実務上の対策は、価格、集計値、顧客名、業務上の主張を変更禁止として明記することです。挨拶を期間の見出しに直すことと、売上の数字を変えることは別問題です。見た目と事実の検査を分離してください。

使い方：戻せる一画面から試す

リポジトリの内容を確認し、使うエージェントのプロジェクト単位のスキルフォルダに配置します。下の例はClaude Code用の公式ディレクトリ構成です。先にブランチ等で戻せる状態を用意してください。掲載したのは手順の整理であり、本稿でスキルを実行したという意味ではありません。

対象のルート、利用者、主な操作、維持するデザイントークン、変更禁止の値を指定し、診断と方向を確認してから編集へ進みます。最後はスクリーンショットだけでなく差分も確認します。撮影・動画用の依存関係は、その機能を使う場合に追加すれば十分です。

git clone https://github.com/heydamir/unslop.git
mkdir -p .claude/skills
cp -r unslop/skills/unslop .claude/skills/

# Claude Code
/unslop this dashboard

管理画面で使える受け入れ基準

例としてサブスクリプション管理画面なら、料金、合計、請求条件、ボタンの遷移先を固定し、同じデータと幅で変更前後を比較します。デスクトップと狭い画面に加え、キーボード操作、エラー、空・読み込み状態、取り消せない操作まで確認します。これは提案する検証方法で、実測結果ではありません。

色を減らした結果、無効状態が分かりにくくなることもあります。短い文言が重要条件を消す場合もあるため、業務の意味や操作が変わった版は、構図が良くても採用しません。

通常のプロンプト、デザイナーとの使い分け

一般のコーディングエージェントでも目立つ定型表現は直せます。Unslopの追加価値は、診断、合意した方向、編集順を再利用できることです。常に優れた審美眼を保証するのではなく、見落としを減らせるかで判断します。調査や製品横断の一貫性が未解決なら、デザイナー主導が適しています。

受託サービスなら、一画面、機能維持の確認表、レスポンシブ画像、レビュー済み差分までを納品範囲にすると明確です。高密度の業務画面と広告ページでは必要な判断が違い、その制約に対応することが差別化になります。

ライセンスと費用の境界

ライセンスはMITではなくCC BY 4.0です。利用・改変・共有では条件に従いDamir Sokolovsky（@heydamir）への帰属表示とリポジトリへのリンクを残します。フォントや画像、外部サービスには別の条件があり得ます。

スキルの公開は、エージェント利用料や画像生成、作業時間が無料という意味ではありません。実行する依存関係を確認し、実在しない実績を埋めないでください。手描き図は編集の考え方を示すもので、Unslopの生成結果ではありません。

導入前の質問

ゼロからサイトを作るツールですか？

主目的はClaude CodeやCodexによる既存UIの診断と改善です。動くルートや許可された参照から始めてください。新製品の要件、内容、実装、検証までを一度のデザイン修正が自動的に提供するわけではありません。

数字や業務文言も変わりますか？

エージェントはコード内の文言や静的データを変更できます。体験記事でも数字の変更が報告されています。固定する値を明記し、最後に差分を確認してください。きれいな画面だけでは事実の保持は確認できません。

PlaywrightとFFmpegは毎回必要ですか？

READMEでは公開サイト撮影や動画にPlaywrightとChromium、動画に追加でFFmpegを使います。任意の工程の依存関係であり、すべてのローカル修正に動画生成が必要なわけではありません。

確認した資料

• Damir Sokolovsky — Unslop README / CC BY 4.0
• まさお — hands-on comparison, 2026-11-02
• Unslop — skill and references

関連ツールを探す

• デザインツール
• 開発ツール