Web開発
Details.so
要約
Details.soは、ウェブサイトのデザイン要素(トランジション、ボタン、セクションなど)のインスピレーションを見つけ、すぐに使えるコードとして提供するサービスです。AIと連携し、ユーザーの要望に合ったデザインを検索・提案する機能も備えています。Claude Code、Cursor、CodexなどのAIツールとの連携方法も詳細に説明されています。
全文翻訳
これはインスピレーションです
最高のウェブサイトを毎週厳選してお届けします。傑出したものだけが選ばれます。
必要なものを正確に見つける
あなたの言葉で必要なものを入力してください。スマート検索が最適なマッチを見つけるか、フィルターを使って絞り込みます。
これはボルトです
すぐに貼り付けられるコードとして、リアルなトランジション、ボタン、セクションを提供します。サイトを忘れられないものにするディテールです。
あなたのAIにセンスが宿りました
DetailsをあなたのAIに接続します。適切なインスピレーションを見つけ、方向性を探り、プロジェクトに取り込みましょう。
請求の管理
チーム名
シート数
シートの更新
チームメイトの招待
メンバーの招待
有料プランにアップグレード
MCPアクセスは、すべての有料Detailsプランに含まれています。
アップグレード
あなたのAIツールを選択してください
クライアントを選択すると、接続方法を正確に表示します。
Claude Code
Cursor
Codex v0
その他
Claude CodeにDetailsを追加する
ユーザーアカウントにDetailsを登録するには、ターミナルで一度実行してください。
claude mcp add details --scope user --transport http https://api.details.so/mcp
コピー
MCPメニューを開く
Claude Codeを起動し、以下のコマンドを入力して、Detailsを選択してください。
/mcp
コピー
接続を承認する
ブラウザでDetailsアカウントにサインインして認証を選択してください。
使用準備完了
Claude Codeに戻り、Detailsの検索を開始してください。
MCP設定を開く
Cursorで、設定 → ツール & MCP を開き、新しいMCPサーバーを選択します。
グローバル設定をすべてのプロジェクトに使用するか、プロジェクト設定を1つのワークスペースに使用します。
Detailsサーバーを追加する
この設定をmcp.jsonファイルに貼り付けて保存してください。
{
"mcpServers": {
"details": {
"url": "https://api.details.so/mcp"
}
}
}
コピー
アカウントを接続する
Tools & MCPに戻り、Detailsを見つけて、接続を選択し、ブラウザでアクセスを承認してください。
使用準備完了
Detailsが選択したスコープでCursorから利用できるようになりました。
Details MCPサーバーを追加する
リモートサーバーを登録するには、ターミナルで一度実行してください。
codex mcp add details --url https://api.details.so/mcp
コピー
ログインフローを開始する
ログインコマンドを実行して、ブラウザでDetailsの認証を開きます。
codex mcp login details
コピー
接続を承認する
Detailsにサインインし、リクエストを確認して、続行を選択してください。
使用準備完了
Codexに戻ります。セットアップ中に既に開いていた場合は、新しいセッションを開始してください。
MCP接続を開く
チャット入力から、追加メニューを開き、MCPを選択して、MCPの追加を選択します。
サーバーの詳細を入力する
接続にDetailsという名前を付け、リモートサーバーのURLを貼り付けます。
https://api.details.so/mcp
コピー
接続を承認する
プロンプトが表示されたらOAuthを選択し、サインインしてDetailsへのアクセスを承認してください。
使用準備完了
Detailsがv0チャットから利用できるようになりました。
クライアントのMCP設定を見つける
AIクライアントの統合またはMCP領域を開きます。
サーバーURLを追加する
Detailsという名前のリモートHTTP MCPサーバーを作成し、このアドレスを貼り付けます。
https://api.details.so/mcp
コピー
接続を承認する
利用可能な場合はOAuthを使用し、サインインしてDetailsへのアクセスを承認してください。
使用準備完了
Detailsツールがクライアントに表示されるはずです。
有料プランにアップグレード
MCPアクセスは、すべての有料Detailsプランに含まれています。
アップグレード
あなたのAIツールを選択してください
クライアントを選択すると、接続方法を正確に表示します。
Claude Code
Cursor
Codex v0
その他
Claude CodeにDetailsを追加する
ユーザーアカウントにDetailsを登録するには、ターミナルで一度実行してください。
claude mcp add details --scope user --transport http https://api.details.so/mcp
コピー
MCPメニューを開く
Claude Codeを起動し、以下のコマンドを入力して、Detailsを選択してください。
/mcp
コピー
接続を承認する
ブラウザでDetailsアカウントにサインインして認証を選択してください。
使用準備完了
Claude Codeに戻り、Detailsの検索を開始してください。
MCP設定を開く
Cursorで、設定 → ツール & MCP を開き、新しいMCPサーバーを選択します。
グローバル設定をすべてのプロジェクトに使用するか、プロジェクト設定を1つのワークスペースに使用します。
Detailsサーバーを追加する
この設定をmcp.jsonファイルに貼り付けて保存してください。
{
"mcpServers": {
"details": {
"url": "https://api.details.so/mcp"
}
}
}
コピー
アカウントを接続する
Tools & MCPに戻り、Detailsを見つけて、接続を選択し、ブラウザでアクセスを承認してください。
使用準備完了
Detailsが選択したスコープでCursorから利用できるようになりました。
Details MCPサーバーを追加する
リモートサーバーを登録するには、ターミナルで一度実行してください。
codex mcp add details --url https://api.details.so/mcp
コピー
ログインフローを開始する
ログインコマンドを実行して、ブラウザでDetailsの認証を開きます。
codex mcp login details
コピー
接続を承認する
Detailsにサインインし、リクエストを確認して、続行を選択してください。
使用準備完了
Codexに戻ります。セットアップ中に既に開いていた場合は、新しいセッションを開始してください。
MCP接続を開く
チャット入力から、追加メニューを開き、MCPを選択して、MCPの追加を選択します。
サーバーの詳細を入力する
接続にDetailsという名前を付け、リモートサーバーのURLを貼り付けます。
https://api.details.so/mcp
コピー
接続を承認する
プロンプトが表示されたらOAuthを選択し、サインインしてDetailsへのアクセスを承認してください。
使用準備完了
Detailsがv0チャットから利用できるようになりました。
クライアントのMCP設定を見つける
AIクライアントの統合またはMCP領域を開きます。
サーバーURLを追加する
Detailsという名前のリモートHTTP MCPサーバーを作成し、このアドレスを貼り付けます。
https://api.details.so/mcp
コピー
接続を承認する
利用可能な場合はOAuthを使用し、サインインしてアクセスを承認してください。
使用準備完了
Detailsツールがクライアントに表示されるはずです。