Web サイト・UI デザインにおすすめの Claude スキル

目的別のおすすめ

• 新しいランディングページやコーポレートサイト：Taste Skill。方向性を決め、実際の写真を使い、引き渡す前にブラウザで 4 つの幅でページを確認します。
• 既存の UI を仕上げる：Impeccable（polish、critique、audit などのコマンドと、ルールベースの「AI っぽさ」検出器）か、unslop（余白、色、アイコン、文言、書体の順に直します）。
• Anthropic 公式の無難な定番：公式スキルの frontend-design は、ありきたりな AI デザインから離れるよう導きます。
• どのプラットフォームでもスタイル、配色、フォントを選ぶ：UI UX Pro Max。Web、モバイル、デスクトップ向けの検索できるデザインデータベースです。
• モーションと細部：Emil Kowalski のスキル。
• アクセシビリティと UX のルールでコードをレビューする：Vercel の web-design-guidelines。

Web サイト・UI デザインのスキル比較

スター数とライセンスは 2026年11月8日時点の GitHub API の値で、概数です。複数のスキルを含むリポジトリでは、スター数はリポジトリ全体のものです。

デザインスキルのインストールと使い方

1. 全部ではなく、1〜2 個だけ入れる

   それぞれが方向性を決めたがるスキル同士はぶつかります。デザインを担うものを 1 つ（frontend-design、Taste Skill、UI UX Pro Max）、必要ならレビューを担うものを 1 つ（Impeccable、unslop、web-design-guidelines）選びましょう。

   # Anthropic's official frontend-design (Claude Code)
   /plugin install frontend-design@claude-plugins-official
   
   # Taste Skill
   npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
   
   # Impeccable
   npx impeccable install
   
   # UI UX Pro Max (Claude Code, Cursor, Codex and more)
   npm install -g ui-ux-pro-max-cli && uipro init --ai claude
   
   # unslop (Claude Code)
   git clone https://github.com/heydamir/unslop
   mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

2. ブリーフを渡す

   ページの目的、誰のためのページか、好きなサイトを 1〜2 つ伝えます。多くのスキルは最初に方向性を尋ねてきます。結果の具体性は、ブリーフの具体性で決まります。

3. 自分の仕事を確認させる

   Taste Skill はページを 4 つの幅でレンダリングし、仕上げチェック（finish gate）を実行します。Impeccable の検出器は npx impeccable detect src/ で 62 のルールを走らせます。こうしたチェックはオンのままにして、スクリーンショットも自分の目で確認しましょう。

4. 結果をデザインシステムとして保存する

   いくつかのスキルは DESIGN.md を書き出します（Impeccable、Taste Skill、Stitch）。これをリポジトリに置いておけば、後のセッションやほかのエージェントも同じ色、書体、余白に従います。CLAUDE.md ガイドもご覧ください。

出典：Anthropic の frontend-design スキル

インストール前に知っておきたいこと

• フックを追加したり、エンジンをダウンロードしたりするスキルもあります。Impeccable はコマンドフックをインストールし、テレメトリーがデフォルトでオンです（DO_NOT_TRACK=1 でオプトアウト）。Taste Skill は仕上げチェックを Stop フックとして実行し、Node 22+ と Chrome が必要です。
• README によると、Taste Skill のフルビルドには 30–45 分と数十万トークンかかることがあります。
• UI UX Pro Max には Python 3 が必要で、有料のプレミアム版も販売しています。オープンなスキル自体は MIT です。
• unslop は CC BY 4.0 です。文章を再利用するときは作者をクレジットしてください。同じ名前の、文章向けのリポジトリと混同しないようにしましょう。
• Stitch と Figma のスキルには、それぞれの MCP サーバーとアカウントが必要です。Figma のキャンバスへの書き込みはベータ版で、無料シートでは制限があります。
• 私たちのチームでは、Crewmark 自身のプロダクト画面に Taste Skill を使い、unslop についての短い動画も作りました。姉妹プロジェクトの pretty-ui は、同じ目的の、より新しく小さなスキルです。

スキルに、毎日働くデザイナーを

スキルは 1 つのセッションのデザインを良くします。Crewmark は Claude Code や Codex を AI UI デザイナーに変えます。週に 3 画面を仕上げるといった目標、勤務時間、直すべき画面が並ぶボードを持ち、ハートビートで起きて、ビフォーアフターのスクリーンショット付きでプルリクエストを作成します。

1. UI デザイナーの職種を雇う

   役割ブリーフ、目標、ルーティンは設定済みです。AI UI デザイナーとAI アプリ UI デザイナーをご覧ください。

2. デザインスキルをリポジトリにインストールする

   社員はほかのセッションと同じように、.claude/skills のスキルを使います。

3. プロンプトではなく、プルリクエストをレビューする

   気に入った画面は承認し、修正はボードで依頼します。AI 社員とはもご覧ください。

Claude デザインスキルのよくある質問