brand-landingpage
ブランドファーストのランディングページをインタラクティブなインタビューでデザインする
ほとんどのランディングページは、ブランドアイデンティティのステップを省略することで失敗します。このスキルは、構造化されたブランドインタビューを通じてユーザーをガイドし、Stitch SDKを使用してマッチしたデザインシステムを備えた洗練されたランディングページを生成します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「brand-landingpage」を使用しています。 DataPipeというAPIツールのランディングページを作成してください
期待される結果:
スキルがプロダクトの目的について質問し、クリーン、テクニカル、モダンという3つのブランド形容詞を選ぶようガイドします。ダークテーマにインディゴのアクセントカラーを確定した後、ヒーロー、コードスニペット、機能、フッターのセクションを含むデスクトップ用ランディングページを生成します。
「brand-landingpage」を使用しています。 色がしっくりきません。変更できますか?
期待される結果:
スキルが色のどこが気になるのか(明るすぎる、くすみすぎる、色相が合わない)を尋ねます。「明るすぎる」と答えると、同じレイアウトで彩度を調整した落ち着いたバリエーションを生成します。
「brand-landingpage」を使用しています。 異なるレイアウトオプションを比較したいです
期待される結果:
スキルが中央寄せヒーロー、分割レイアウト、全幅ヘッダーの3つのバリエーションのランディングページを生成します。3つすべてをブラウザタブで開き、どの方向が好みかを尋ねます。
セキュリティ監査
低リスクAll 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
低リスクの問題 (1)
リスク要因
品質スコア
作れるもの
サイドプロジェクトのランディングページを立ち上げる
CLIツールやオープンソースプロジェクトを開発している開発者が、デザイン経験がなくてもランディングページを必要としています。このスキルはブランドインタビューを実施し、プロフェッショナルなページを生成します。
スタートアップのマーケティングサイトを作成する
アーリーステージのスタートアップがSaaSプロダクトのランディングページを必要としています。このスキルはブランドアイデンティティの定義を支援し、機能、料金、 testimonial セクションを備えたページを生成します。
デベロッパーポートフォリオページを構築する
開発者やデザイナーが個人のポートフォリオランディングページを希望しています。このスキルはブランドインタビューを実施し、注目プロジェクトと自己紹介セクションを備えたページを生成します。
これらのプロンプトを試す
[プロジェクト名]というプロジェクトのランディングページを作成してください。これは[説明]です。ターゲットユーザーは[対象ユーザー]です。
プロダクト[プロジェクト名]のランディングページをデザインしたいです。まずブランドインタビューを通じてビジュアルアイデンティティを定義させてください。
ランディングページのヒーローセクションが少しプレーンすぎます。より大胆なレイアウトとカラーコントラストを強化したバリエーションを生成してもらえますか?カラースキームは維持してください。
昨日保存したデザインセッションがあります。中断したところから再開して、デプロイ用のバンドルを完成させるのを手伝ってください。
ベストプラクティス
- スキップしたい場合でもブランドインタビューを完了してください。質問は5分で終わり、汎用的なテンプレートとプロダクトに合ったページの違いを生みます。
- テキストでの説明を求めるのではなく、ブラウザでHTMLを開いて生成されたページをレビューしてください。視覚的なフィードバックにより、デザインの反復がより効果的になります。
- 事前にStitch APIキーを環境変数に保存しておいてください。そうすることで、スキルが中断なくデザインを生成・反復できます。
回避
- 会社のロゴの埋め込みや画像のアップロードをスキルに依頼すること。Stitch SDKはテキストプロンプトから生成を行い、画像入力は受け付けません。
- padding-top: 40pxを追加するのようなCSSレベルのフィードバックを提供すること。フィードバックは「見出しの上にもう少し余白を追加して」のようなデザイン意図に変換してください。
- モバイルバリアントをスキップすること。デスクトップレイアウトはモバイル表示に調整が必要なことが多く、両方を生成することで一貫した体験が保証されます。
よくある質問
このスキルを使用するにはStitchアカウントが必要ですか?
セッションが中断された場合はどうなりますか?
独自のブランドカラーを使用できますか?
このスキルは画像やロゴに対応していますか?
このスキルはどのような種類のページを作成できますか?
生成後にHTMLを編集できますか?
開発者の詳細
作成者
wshobsonライセンス
MIT
リポジトリ
https://github.com/wshobson/agents/tree/main/plugins/brand-landingpage/skills/brand-landingpage/参照
main
ファイル構成