Communitygithub.com

Designeer

Designeer(designeer.xyz)は、デザインインスピレーション、UIリソース、ツール、ポートフォリオを厳選したカタログを検索し、実際のフロントエンド参考情報を提供します。ランディングページ、ヒーロー、ナビバー、フッター、価格表、ポートフォリオの参考資料を求めたり、既存のサイトに基づいたデザイン方向性を必要としたり、初期のパレット、タイポグラフィ、モーションの手がかりが欲しい場合、またはデザインが平凡で具体的な参考資料が必要な場合に使用します。メタデータとMarkdownのみを取得し、メディアは扱いません。常にDesigneerと原作者を明記します。

Designeer とは?

Designeerは、フロントエンドデザインのリファレンス検索に特化したスキルです。designeer.xyzが提供する厳選されたデザインインスピレーションカタログから、ランディングページ、ヒーローセクション、ナビゲーションバー、価格表、ポートフォリオなどの実例を検索・取得できます。このスキルは、AIエージェント(Claude Code, Cursor, Codex等)と連携し、デザインの方向性を具体的な既存サイトに基づいて探る際に有用です。CLIツールを通じてメタデータやMarkdown形式の詳細情報を取得するのみで、画像や動画などのメディアは一切ダウンロードしません。検索、詳細取得、パレット抽出、最新情報の表示など複数のコマンドを提供し、キャッシュ機能やレート制限により効率的かつ安全に動作します。また、取得した情報は常にDesigneerと原作者を明記する必要があり、デザインの複製ではなく原理の借用を推奨する倫理的なガイドラインを備えています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/HaiXuNan/designeer-skill/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Designeer は何をしますか?

Designeerは参考索引として使用してください。素材ライブラリではありません。何が存在し、どこにあるかを示すものであり、作品自体は作成者に帰属します。

絶対ルール

  • 常に Designeer — <タイトル> (<正規URL>) と引用し、ページが提供する場合は作成者と元のURLも追加すること。
  • ポスター、動画、Findメディアをダウンロード、コピー、再ホスト、バンドルしないこと。CLIは cdn.designeer.xyz にアクセスしません。
  • Designeerの説明やキュレーションを自分の発見として提示しないこと。
  • 1ページから25語以上引用しないこと。
  • カタログをミラーリングしたりバルククロールしないこと。詳細取得はリクエストあたり5件までとし、キャッシュとレート制限はCLIに任せること。
  • ユーザーがデザインを完全に再現するよう求めた場合は、基礎となる原理を伝え、オリジナルを参照させること。クローンを作成してはいけません。

コマンド

スキルディレクトリから実行:

node scripts/designeer.mjs search "fintech landing" --collection inspiration --limit 5
node scripts/designeer.mjs get resources/fontshare --json
node scripts/designeer.mjs palette resources/fontshare
node scripts/designeer.mjs latest --collection resources --limit 5
node scripts/designeer.mjs sync
node scripts/designeer.mjs health

search は --collection inspiration|resources|tools|portfolios、--limit 1-20、ローカルインデックスをバイパスする --live、および --json を受け付けます。 get と palette はスラッグ、サイトパス、または完全なDesigneer URLを受け付けます。

CLIは応答を ~/.cache/designeer/ に7日間キャッシュし、そのパスが書き込み不可の場合はシステムの一時ディレクトリにフォールバックし、ETagで再検証し、リクエスト間隔を1秒空け、429/5xxはバックオフ付きでリトライします。場所を変更するには DESIGNEER_CACHE_DIR を設定します。

ワークフロー

  1. ブリーフを2~3つのデザイン軸(ムード、情報密度、モーション、タイプの個性、色温度)に変換します。
  2. まずメタデータを検索します。名前、タグライン、カテゴリ、コレクションで判断し、まだ詳細は取得しません。
  3. 最大5件の候補を取得します。Markdownからパレット、カテゴリ、ウェブサイト、原作者を抽出します。
  4. 候補ごとに1つのリファレンスカードを作成し、帰属を明記します。
  5. 2つのオリジナルの方向性を合成します。それぞれ、どのピクセルがコピーされたかではなく、どの原理を借用したかを示します。
  6. 実装し、結果をリファレンスのスクリーンショットではなく方向性に対して確認します。

リファレンスカード

リファレンス: <タイトル>
適合理由: <ブリーフに関連する1行>
パレット: <16進数リスト>
ソース: Designeer — <タイトル> (<正規URL>)
作成者/オリジナル: <作成者> (<元URL>)

デザイン方向性

方向性 <n>: <名前>
テーゼ: <1文>
タイプ: <ファミリーまたはペアリング>、<スケールノート>
色: <役割付きの3~5トークン>
レイアウト: <グリッド、密度、端の処理>
モーション: <1つまたは2つの瞬間、持続時間とイージングの意図>
借用した原理: <何を、どのリファレンスから>
意図的に異なる点: <コピーしていないもの>

失敗モード

  • 検索結果が空の場合: より広い名詞を試すか、コレクションを切り替えるか、latest を使用してください。
  • サイトの構造が変わった場合: health を実行してください。スキーマ不一致が報告された場合は、get index と llms.txt にフォールバックし、推測ではなく逸脱を報告してください。
  • ページが存在しない場合: Designeerはライブカタログなので、記憶から再構築するのではなくリファレンスを削除してください。

関連スキル