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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
lazyweb-add-inspo-source.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
lazyweb-add-inspo-sourceフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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-sourceagain 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.