HN 日本語サマリー

← 一覧へ戻る
Web開発

Details.so

Details.so (details.so)

10 pointsby handfuloflight2 コメント

要約

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ツールがクライアントに表示されるはずです。