heydamir/unslop

A Claude skill that turns vibecoded, AI-looking UI into a designed interface

解決する課題

unslopは、過度な紫のグラデーション、ネオンの輝き、絵文字の多用、主張の強いテキスト、不適切な間隔といった一般的な美的問題を抱える「vibecoded」なAI生成UIを修正します。ありきたりなAIデザインを、洗練されたプロフェッショナルで独自のブランド特性を持つインターフェースへと変貌させます。

仕組み

Claude Codeのスキルとして動作します。起動すると、まず画面を監査してデザインの「slop(粗さ)」を特定します。次に、特定の製品に基づいたデザインの方向性を提案し、間隔、色、タイポグラフィ、レイアウト、ビジュアルをカバーする一連の反復プロセスを実行してインターフェースを洗練させます。React、Vue、Svelte、TailwindなどのさまざまなWebフレームワークや、URLを介したライブWebサイトでも機能します。

対象ユーザー

AIを使用してUIコンポーネントやランディングページを生成し、最終的な出力を単なる一般的なAIプロトタイプではなく、プロが設計した製品のように見せたい開発者やデザイナー。

ハイライト

  • 既存のUIを監査し、具体的なデザインの欠陥を特定します。
  • コピー、レイアウト、モーションを含む構造化された多段階の再設計プロセスを提供します。
  • 必要に応じて外部画像サービスを使用してカスタムビジュアルやシーンを生成します。
  • 画面が変化する様子を収めた、共有可能な短い「unslopping」ビデオを作成します。
  • コードを変更する前にデザインの方向性を提案することで、早期の調整を可能にします。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト