jpskill.com
🎨 デザイン コミュニティ

lazyweb-add-inspo-source

Mobbin、Savee、Dribbble、Behanceなどの外部デザインソースをLazywebに連携させ、デザイン調査時に自動的に参照できるようにすることで、より幅広いインスピレーションを得られるようにするSkill。

📜 元の英語説明(参考)

Connect an external inspiration source (Mobbin, Savee, Dribbble, Behance, etc.) as a first-class source in all Lazyweb design skills. Authenticates via headless browser, persists session cookies, and registers the source so future design research automatically includes it alongside Lazyweb. Trigger on: "add inspo source", "add inspiration source", "connect Mobbin", "connect Savee", "add design source", "connect inspiration", "add Dribbble", "link Behance".

🇯🇵 日本人クリエイター向け解説

一言でいうと

Mobbin、Savee、Dribbble、Behanceなどの外部デザインソースをLazywebに連携させ、デザイン調査時に自動的に参照できるようにすることで、より幅広いインスピレーションを得られるようにするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o lazyweb-add-inspo-source.zip https://jpskill.com/download/8859.zip && unzip -o lazyweb-add-inspo-source.zip && rm lazyweb-add-inspo-source.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/8859.zip -OutFile "$d\lazyweb-add-inspo-source.zip"; Expand-Archive "$d\lazyweb-add-inspo-source.zip" -DestinationPath $d -Force; ri "$d\lazyweb-add-inspo-source.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して lazyweb-add-inspo-source.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → lazyweb-add-inspo-source フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

インスピレーションライブラリの追加

外部のデザインインスピレーションライブラリを接続して、すべての Lazyweb デザインスキル(/lazyweb-design-research/lazyweb-design-improve/lazyweb-design-brainstorm/lazyweb-quick-references)が Lazyweb のデータベースと並行して検索できるようにします。

アダプターやスクレイパーは不要です。Claude は検索時に browse ツールを使用してライブラリの UI をナビゲートします。これは、あらゆるウェブサイトを閲覧するのと同じ方法です。

Browse のセットアップ

LB=""
# lazyweb-skill browse を最初に確認
for _P in "$(pwd)/.claude/skills/lazyweb-skill/browse/dist/browse" ~/.claude/skills/lazyweb-skill/browse/dist/browse; do
  [ -x "$_P" ] && LB="$_P" && break
done
# gstack browse にフォールバック
if [ -z "$LB" ]; then
  _ROOT=$(git rev-parse --show-toplevel 2>/dev/null)
  [ -n "$_ROOT" ] && [ -x "$_ROOT/.claude/skills/gstack/browse/dist/browse" ] && LB="$_ROOT/.claude/skills/gstack/browse/dist/browse"
  [ -z "$LB" ] && [ -x ~/.claude/skills/gstack/browse/dist/browse ] && LB=~/.claude/skills/gstack/browse/dist/browse
fi
[ -x "$LB" ] && echo "BROWSE_READY: $LB" || echo "NO_BROWSE"

NO_BROWSE の場合:このスキルには browse ツールが必要です。ユーザーに次のように伝えます。 "Browse tool not found. Install it with: cd ~/.claude/skills/lazyweb-skill/browse && ./setup" その後、停止します。

ワークフロー

1. どのライブラリか尋ねる

ユーザーが指定しなかった場合は、接続するライブラリを尋ねます。一般的なオプション:

ライブラリ URL 検索 URL
Mobbin https://mobbin.com https://mobbin.com/browse/ios/apps
Savee https://savee.it https://savee.it/search/
Dribbble https://dribbble.com https://dribbble.com/search
Behance https://www.behance.net https://www.behance.net/search/projects
Awwwards https://www.awwwards.com https://www.awwwards.com/websites

ユーザーがここにリストされていないライブラリを希望する場合は、以下を尋ねます。

  • ライブラリの名前
  • ベース URL
  • 検索 URL (検索クエリを入力できるページ)

2. 既に接続されているか確認

cat ~/.lazyweb/libraries.json 2>/dev/null || echo '{"libraries":[]}'

ライブラリが既にリストにある場合は、既に接続されていることをユーザーに伝え、 再認証するかどうかを尋ねます (セッションが期限切れになった場合に役立ちます)。

3. ヘッドレスブラウザ経由で認証

ライブラリに移動し、ログインのためにユーザーに引き渡します。

# ライブラリのログインページを開く
$LB goto "{url}"

# ユーザーがログインできるように、表示可能な Chrome に引き渡す
$LB handoff "Log in to {name}. Close this window or press Enter when done."

この引き渡しにより、ユーザーが以下を実行できる表示可能な Chrome ウィンドウが開きます。

  • メール/パスワードでログイン
  • OAuth フローを完了
  • 2FA/CAPTCHA を処理

ユーザーがログインを完了した後:

# Cookie を保持したまま、ヘッドレス制御を再開
$LB resume

4. 認証の検証

検索ページに移動し、ログインしていることを確認します。

$LB goto "{searchUrl}"
$LB snapshot -i

スナップショットで、ログインしている兆候 (ユーザーアバター、アカウントメニュー、ログインプロンプトがない) を確認します。認証されていないように見える場合は、ユーザーに伝え、再試行を提案します。

5. 検索のテスト

すべてが機能することを確認するために、簡単なテスト検索を実行します。

$LB snapshot -i
# 検索入力を探し、テストクエリを入力
$LB fill @eN "pricing page"
$LB press Enter
# 結果が読み込まれるまで少し待つ
$LB snapshot -i

結果が正常に読み込まれた場合、接続は機能しています。

6. ライブラリ構成の保存

mkdir -p ~/.lazyweb

既存の構成を読み取り、新しいライブラリを追加して、書き戻します。

{
  "libraries": [
    {
      "name": "Mobbin",
      "url": "https://mobbin.com",
      "searchUrl": "https://mobbin.com/browse/ios/apps",
      "addedAt": "2026-03-26"
    }
  ]
}

~/.lazyweb/libraries.json に書き込みます。

7. ユーザーに確認

ユーザーに伝えます。

  • "{Name} がインスピレーションソースとして接続されました。"
  • "すべての Lazyweb デザインスキルは、Lazyweb のデータベースと並行して {Name} を検索するようになります。"
  • "セッションが期限切れになった場合は、/lazyweb-add-inspo-source を再度実行して再接続してください。"
  • "切断するには、/lazyweb-remove-inspo-source を実行してください。"

重要な注意点

  • セッションの永続性: Browse の Cookie は、サーバーセッション内で永続化されます (30 分のアイドルタイムアウト)。使用中にセッションが期限切れになった場合、デザインスキルはこれを検出し、ユーザーに再接続を促します。
  • アダプター不要: Claude は、browse のスナップショットとインタラクションを使用して、検索時に各ライブラリの UI をナビゲートします。これは、UI を再設計するライブラリであっても、あらゆるライブラリで機能することを意味します。
  • 複数のライブラリ: ユーザーは必要なだけライブラリを接続できます。それぞれがデザインリサーチ中に検索されます。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Add Inspiration Library

Connect an external design inspiration library so all Lazyweb design skills (/lazyweb-design-research, /lazyweb-design-improve, /lazyweb-design-brainstorm, /lazyweb-quick-references) search it alongside Lazyweb's database.

No adapters or scrapers needed — Claude uses the browse tool to navigate the library UI at search time, the same way it browses any website.

Browse Setup

LB=""
# Check lazyweb-skill browse first
for _P in "$(pwd)/.claude/skills/lazyweb-skill/browse/dist/browse" ~/.claude/skills/lazyweb-skill/browse/dist/browse; do
  [ -x "$_P" ] && LB="$_P" && break
done
# Fall back to gstack browse
if [ -z "$LB" ]; then
  _ROOT=$(git rev-parse --show-toplevel 2>/dev/null)
  [ -n "$_ROOT" ] && [ -x "$_ROOT/.claude/skills/gstack/browse/dist/browse" ] && LB="$_ROOT/.claude/skills/gstack/browse/dist/browse"
  [ -z "$LB" ] && [ -x ~/.claude/skills/gstack/browse/dist/browse ] && LB=~/.claude/skills/gstack/browse/dist/browse
fi
[ -x "$LB" ] && echo "BROWSE_READY: $LB" || echo "NO_BROWSE"

If NO_BROWSE: This skill requires the browse tool. Tell the user: "Browse tool not found. Install it with: cd ~/.claude/skills/lazyweb-skill/browse && ./setup" Then stop.

Workflow

1. Ask Which Library

If the user didn't specify, ask which library to connect. Common options:

Library URL Search URL
Mobbin https://mobbin.com https://mobbin.com/browse/ios/apps
Savee https://savee.it https://savee.it/search/
Dribbble https://dribbble.com https://dribbble.com/search
Behance https://www.behance.net https://www.behance.net/search/projects
Awwwards https://www.awwwards.com https://www.awwwards.com/websites

If the user wants a library not listed here, ask for:

  • Name of the library
  • Base URL
  • Search URL (the page where you can type a search query)

2. Check If Already Connected

cat ~/.lazyweb/libraries.json 2>/dev/null || echo '{"libraries":[]}'

If the library is already in the list, tell the user it's already connected and ask if they want to re-authenticate (useful if session expired).

3. Authenticate via Headless Browser

Navigate to the library and hand off to the user for login:

# Open the library's login page
$LB goto "{url}"

# Hand off to visible Chrome so user can log in
$LB handoff "Log in to {name}. Close this window or press Enter when done."

The handoff opens a visible Chrome window where the user can:

  • Log in with email/password
  • Complete OAuth flows
  • Handle 2FA/CAPTCHA

After the user completes login:

# Resume headless control with cookies preserved
$LB resume

4. Verify Authentication

Navigate to the search page and confirm we're logged in:

$LB goto "{searchUrl}"
$LB snapshot -i

Check the snapshot for signs of being logged in (user avatar, account menu, no login prompts). If it looks like we're not authenticated, tell the user and offer to retry.

5. Test Search

Do a quick test search to confirm everything works:

$LB snapshot -i
# Find the search input and type a test query
$LB fill @eN "pricing page"
$LB press Enter
# Wait briefly for results
$LB snapshot -i

If results load successfully, the connection works.

6. Save Library Config

mkdir -p ~/.lazyweb

Read existing config, add the new library, write back:

{
  "libraries": [
    {
      "name": "Mobbin",
      "url": "https://mobbin.com",
      "searchUrl": "https://mobbin.com/browse/ios/apps",
      "addedAt": "2026-03-26"
    }
  ]
}

Write to ~/.lazyweb/libraries.json.

7. Confirm to User

Tell the user:

  • "{Name} is now connected as an inspiration source."
  • "All Lazyweb design skills will now search {Name} alongside Lazyweb's database."
  • "If your session expires, run /lazyweb-add-inspo-source again to reconnect."
  • "To disconnect, run /lazyweb-remove-inspo-source."

Important Notes

  • Session persistence: Browse cookies persist within a server session (30 min idle timeout). If the session expires between uses, the design skills will detect this and prompt the user to reconnect.
  • No adapters: Claude navigates each library's UI at search time using browse snapshots and interactions. This means it works with any library, even ones that redesign their UI.
  • Multiple libraries: Users can connect as many libraries as they want. Each gets searched during design research.