スキル brand-landingpage
📦

brand-landingpage

低リスク ⚙️ 外部コマンド🌐 ネットワークアクセス🔑 環境変数

ブランドファーストのランディングページをインタラクティブなインタビューでデザインする

ほとんどのランディングページは、ブランドアイデンティティのステップを省略することで失敗します。このスキルは、構造化されたブランドインタビューを通じてユーザーをガイドし、Stitch SDKを使用してマッチしたデザインシステムを備えた洗練されたランディングページを生成します。

対応: Claude Codex Code(CC)
🥉 73 ブロンズ
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「brand-landingpage」を使用しています。 DataPipeというAPIツールのランディングページを作成してください

期待される結果:

スキルがプロダクトの目的について質問し、クリーン、テクニカル、モダンという3つのブランド形容詞を選ぶようガイドします。ダークテーマにインディゴのアクセントカラーを確定した後、ヒーロー、コードスニペット、機能、フッターのセクションを含むデスクトップ用ランディングページを生成します。

「brand-landingpage」を使用しています。 色がしっくりきません。変更できますか?

期待される結果:

スキルが色のどこが気になるのか(明るすぎる、くすみすぎる、色相が合わない)を尋ねます。「明るすぎる」と答えると、同じレイアウトで彩度を調整した落ち着いたバリエーションを生成します。

「brand-landingpage」を使用しています。 異なるレイアウトオプションを比較したいです

期待される結果:

スキルが中央寄せヒーロー、分割レイアウト、全幅ヘッダーの3つのバリエーションのランディングページを生成します。3つすべてをブラウザタブで開き、どの方向が好みかを尋ねます。

セキュリティ監査

低リスク
v2 • 5/23/2026

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.

4
スキャンされたファイル
841
解析された行数
4
検出結果
2
総監査数
低リスクの問題 (1)
Hardcoded Documentation URLs
SKILL.md contains hardcoded URLs pointing to Stitch SDK documentation. These are legitimate documentation links but represent external network references in the skill instructions.
監査者: claude 監査履歴を表示 →

品質スコア

45
アーキテクチャ
100
保守性
87
コンテンツ
43
コミュニティ
83
セキュリティ
100
仕様準拠

作れるもの

サイドプロジェクトのランディングページを立ち上げる

CLIツールやオープンソースプロジェクトを開発している開発者が、デザイン経験がなくてもランディングページを必要としています。このスキルはブランドインタビューを実施し、プロフェッショナルなページを生成します。

スタートアップのマーケティングサイトを作成する

アーリーステージのスタートアップがSaaSプロダクトのランディングページを必要としています。このスキルはブランドアイデンティティの定義を支援し、機能、料金、 testimonial セクションを備えたページを生成します。

デベロッパーポートフォリオページを構築する

開発者やデザイナーが個人のポートフォリオランディングページを希望しています。このスキルはブランドインタビューを実施し、注目プロジェクトと自己紹介セクションを備えたページを生成します。

これらのプロンプトを試す

クイックランディングページ依頼
[プロジェクト名]というプロジェクトのランディングページを作成してください。これは[説明]です。ターゲットユーザーは[対象ユーザー]です。
完全なブランドインタビューワークフロー
プロダクト[プロジェクト名]のランディングページをデザインしたいです。まずブランドインタビューを通じてビジュアルアイデンティティを定義させてください。
反復的なデザイン改善
ランディングページのヒーローセクションが少しプレーンすぎます。より大胆なレイアウトとカラーコントラストを強化したバリエーションを生成してもらえますか?カラースキームは維持してください。
保存したセッションを再開する
昨日保存したデザインセッションがあります。中断したところから再開して、デプロイ用のバンドルを完成させるのを手伝ってください。

ベストプラクティス

  • スキップしたい場合でもブランドインタビューを完了してください。質問は5分で終わり、汎用的なテンプレートとプロダクトに合ったページの違いを生みます。
  • テキストでの説明を求めるのではなく、ブラウザでHTMLを開いて生成されたページをレビューしてください。視覚的なフィードバックにより、デザインの反復がより効果的になります。
  • 事前にStitch APIキーを環境変数に保存しておいてください。そうすることで、スキルが中断なくデザインを生成・反復できます。

回避

  • 会社のロゴの埋め込みや画像のアップロードをスキルに依頼すること。Stitch SDKはテキストプロンプトから生成を行い、画像入力は受け付けません。
  • padding-top: 40pxを追加するのようなCSSレベルのフィードバックを提供すること。フィードバックは「見出しの上にもう少し余白を追加して」のようなデザイン意図に変換してください。
  • モバイルバリアントをスキップすること。デスクトップレイアウトはモバイル表示に調整が必要なことが多く、両方を生成することで一貫した体験が保証されます。

よくある質問

このスキルを使用するにはStitchアカウントが必要ですか?
はい、必要です。このスキルはStitch SDKを使用してランディングページデザインを生成します。StitchアカウントとAPIキーが必要です。
セッションが中断された場合はどうなりますか?
スキルは進捗状況をmetadata.jsonファイルに保存します。戻ってきたときに保存された状態を確認し、中断したところから再開します。
独自のブランドカラーを使用できますか?
はい、可能です。ブランドインタビュー中に既存のブランドカラーの16進数値を提供できます。スキルはそれらをデザインシステムにマッピングします。
このスキルは画像やロゴに対応していますか?
いいえ、できません。Stitch SDKはテキストプロンプトのみからページを生成します。ユーザーが提供した画像は、手動で挿入できるように出力バンドルに保存されます。
このスキルはどのような種類のページを作成できますか?
シングル用途のランディングページとプロダクトマーケティングサイトです。マルチページアプリケーション、ダッシュボード、ドキュメンテーションサイトには対応していません。
生成後にHTMLを編集できますか?
スキルはまずStitch SDKを通じて反復的に改善することを推奨しています。承認後、最終的なHTML出力を手動で編集できます。

開発者の詳細