frontend-design Skillsを使ってみよう

Claude Code Skillsとは

前回の動画でAI Writing Toolアプリケーションが一通り作れましたが、公開していく前にデザインを修正しましょう。今回はClaude Code Skillsを使ってブラッシュアップしていきます。

Claude Code Skillsとは、専門知識を持ったファイルを読み込むことで、その専門知識を元にコード修正やアドバイスをしてくれる機能です。スキルは自分で作ることもできますし、外部から持ってきて活かすこともできます。

スキルは専門知識の導入だけでなく、普段やっている業務のワークフローを言語化してファイルに記載することで、Claude Codeがそれに沿って自動でワークフローを実行してくれるような実装もできます。

今回はAnthropicが公式で提供しているfrontend-designスキルを導入します。

Claude Codeを立ち上げた状態で、/skillsと入力してエンターキーを押すと、登録済みのスキル一覧が表示されます（まだスキルを入れていない場合は表示されません）
エスケープキーで戻り、/pluginsと入力してエンターキーを押します
「Marketplace」タブに切り替えます
「Claude Plugins Official」を選択してエンターキーを押します
「Browse Plugins」をエンターキーで選択すると、Anthropic公式が提供しているプラグイン一覧が表示されます
「frontend-design」をスペースキーで選択し、エンターキーで導入します

スキルのインストール時に、以下の3つのスコープから選択できます。

頻繁にスキルを使う場合はUser scope、このプロジェクトだけ試したい場合はLocal scopeで入れてください。

インストールが完了したら、/reload-pluginsを実行してください。スキルが表示されない場合は、Ctrl+Cを2回押してClaude Codeを閉じ、再起動すると表示されるようになります。

frontend-designスキルを呼び出すだけでもデザインをブラッシュアップしてくれます。例えば「サイドバーを追加してほしい」という場合は、スキルの呼び出しに加えてその旨を伝えればちゃんと実行してくれます。

スキルを呼び出すと「フロントエンドデザインのガイドラインに沿って刷新します」と表示されるので、しばらく待ちましょう。

ビルドまで完了し、フォントが日本人向けに変更され、カードのデザインも改善されました。レイアウト構成については大きな変更はなく、shadcn/uiのコンポーネントをそのまま使っているため、フォームやカードのレイアウトにはあまり変更がありません。

細かい修正はさらにClaude Codeで詰めていきます。例えば以下のような指示でデザインを修正できます。

このようにプログラミングの知識がなくてもデザインの修正ができますので、好みのデザインに変更してみてください。最近のOpus 4.6モデルであれば、そのままでも結構いいデザインを出してくれることが多いです。

デザインの修正が完了したら、次はアプリケーションのデプロイ（公開）を行います。デプロイにはVercelを使い、そのためにはGitHubが必要になります。GitHubアカウントの作り方やターミナルとの連携方法から解説していきます。

なお、現時点では認証や決済の機能がないため、AIを利用するたびに自分が負担する状態です。認証や決済の実装は別講座で詳しく説明します。個人用レベルであれば、URLを共有しなければ自分だけで使うことができます。

続きを読むには購入が必要です

質問するにはログインしてください

まだ質問はありません