技能 landing-page-design
🎨

landing-page-design

安全 🌐 網路存取⚙️ 外部命令

コンバージョン率の高いランディングページをデザインする

也可從以下取得: 2389-research

AIが生成したランディングページは、紫のグラデーションや再利用されたパターンで似ていることが多い傾向にあります。このスキルは、Vibe Discoveryを通じて独自のビジュアルアイデンティティを強制し、テンプレートよりも目立ってコンバージョン率の高いページを作成します。

支援: Claude Codex Code(CC)
📊 70 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「landing-page-design」。 生産性アプリのためのランディングページを作成してください。夜の静かな図書館のような感觉にしてください。

預期結果:

  • バイブ名: 真夜中のアーカイブ
  • 参照: 閉館時の図書館
  • 感情: 集中した静けさ
  • パレット: 温かい leather brown、aged paper cream、deep walnut、gold foil accent
  • ディスプレイフォント: Cormorant Garamond
  • ボディフォント: Inter (コントラスト用)
  • signature要素: ページがゆっくりめくれるようなフェードイン効果

正在使用「landing-page-design」。 ファッションブランドのためのランディングページをデザインしてください。日本の駅とオートクチュールの衝突。

預期結果:

  • バイブ名: 新宿ランウェイ
  • 参照
  • :
  • rush hourの日本のお駅
  • 感情: 自信に満ちた
  • 色: プラットフォーム Edge (black、concrete white、fluorescent white、JR line red)
  • ディスプレイフォント: Darker Grotesque
  • signature要素: 列车時刻表のような強い水平バンド
  • ワイルドカード: 生地の質感オーバーレイ

安全審計

安全
v3 • 1/16/2026

Pure documentation skill containing only markdown design guidance. No scripts, executable code, network calls, or file system access. The static findings are all false positives: hex color codes were misidentified as weak cryptographic algorithms, markdown code examples with backticks were misidentified as shell execution, and design resource URLs were misidentified as reconnaissance. Original static analysis confirmed safe with risk_level: safe.

2
已掃描檔案
608
分析行數
2
發現項
3
審計總數
審計者: claude 查看審計歷史 →

品質評分

38
架構
100
可維護性
87
內容
24
社群
100
安全
91
規範符合性

你能建構什麼

ローンチランディングページ

一般的な競合他社とは異なる差別化されたスタートアップのローンチページを作成する

キャンペーンページ

製品ローンチ、季節のプロモーション、機能告知のためにコンバージョン率の高いページを構築する

デザ�イン仕様書

開発チームへの引き継ぎのためのデザイン仕様とパターンを生成する

試試這些提示

基本的なランディングページ
新しい[PRODUCT TYPE]のためのランディングページを作成してください。ブランドは[REAL-WORLD PLACE/OBJECT]のような感じにしてください。感情は[EMOTION]にしてください。
コラーシブルコンセプト付き
[INFLUENCE 1]と[INFLUENCE 2]を衝突させるランディングページをデザインしてください。バイブは予想外でありながらまとまりのあるものにしてください。
セクション追加
既存のランディングページに[SECTION TYPE]セクションを追加してください。ヒーローの[PALETTE NAME]のパレットと[FONT]のタイポグラフィに合わせてください。
アニメーションリクエスト
[ELEMENT]に[ANIMATION TYPE]アニメーションを追加してください。効果は[EMOTION]的感觉に[PRIMARY COLOR]をアクセントとして使わないでください。

最佳實務

  • 各プロジェクトの独自のビジュアルアイデンティティを確保するため、Vibe Discoveryを完了してからコードを作成してください。
  • 努力の50%をヒーローセクションに集中させてください。それは第一印象とSNSプレビューを決定します。
  • 視覚的な差別化のため、Iconify SolarやPhosphOR iconsを使用し、OVERUSEされたLucide iconsは避けてください。

避免

  • 以前のプロ젝ットからhex codes、フォント、デザインパターンを再利用すること。
  • Inter、Roboto、または他のAI生成ページで一般的に見られる汎用フォントにデフォルト設定すること。
  • AI生成コンテンツを示す紫のグラデーションやStripeカラーパレットを使用すること。

常見問題

このスキルはどのようなツールと連携しますか?
このスキルはClaude、Codex、Claude Codeと連携します。利用可能なコーディングツールを使用してAIが実行できるデザインガイダンスを提供します。
ランディングページの作成にはどのくらいの時間がかかりますか?
完全なランディングページには通常、複数の反復が必要です。まずヒーローに焦点を当て、次に体系的にセクションを追加してください。
デザインをFigmaにエクスポートできますか?
このスキルは仕様とパターンを提供します。デザイン実装はコードで行うか、Figmaで手動で再作成する必要があります。
データは安全ですか?
このスキルはあなたが提供するデザイン要件のみを処理します。データがセッション外に保存または送信されることはありません。
なぜ私のデザインは汎用的に見えるのですか?
汎用的なデザインは記憶されたパターンから生まれます。Vibe Discoveryプロセスは実世界からの参照から導出されたUniqueな選択を強制します。
テンプレートとどのように異なりますか?
テンプレートは同一に見えるページを生成します。このスキルはクリエイティブな衝突と新鮮な参照を通じてあらゆるプロジェクトにUniqueなビジュアルアイデンティティを生成します。

開發者詳情

檔案結構

📄 SKILL.md