Communitygithub.com

webiscorp/designskill-open

このファイルをAIに注入すると、構造契約の範囲内で1枚のランディングページを生成します。

designskill-open とは?

このスキルは、AIエージェント(Claude Code、Coder、Cursorなど)が単一ページのランディングページ(LP)を生成するための契約ベースの構造化スキルです。ブランド名、業種、カラーパレット、セクション順序などの入力コントラクトに従い、カスタムCSSやJavaScriptを一切使わず、Tailwind CDNクラスのみを使用してLPを構築します。プロジェクトに既存の構造契約(クラス名・ファイル配置ルール)がある場合はそれを優先し、セクションごとに役割コメントを付与したスキャフォールドを生成、実際の業種に合わせたコピー(Lorem Ipsum禁止)を埋め込みます。完成時にはWCAG AAのコントラスト基準、セクション間のリズム(80~120px)、3種類のビューポート(360/768/1440)でのレンダリング確認、コンソールエラー0件を必須とし、他のリデザインスキルとの同時注入や根拠のない虚偽コピー作成を禁止します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/webiscorp/designskill-open/tree/HEAD/skills/landing-generate

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

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

ドキュメント

ランディング生成スキル

このファイルをAIに注入すると、構造契約の範囲内で1枚のランディングページを生成します。

役割と適用範囲

  • 単一ページランディング生成(マルチページ不可)
  • 純粋なTailwind CDNクラスのみ使用 — カスタムCSS・JS禁止
  • プロジェクト構造契約(クラス名・ファイル配置)がある場合、常にそれを優先

入力契約

  • brand: ブランド名・一行説明
  • industry: 業種(トーン決定)
  • palette: メインカラー+補助色(hex)
  • sections: セクション順序配列
  • constraints: 禁止項目(デフォルト: custom-css, js)

実行手順

  1. 構造契約を確認 — 存在する場合、契約の命名・配置に従う
  2. セクションスキャフォールドを生成 — 順序・役割コメントを含む
  3. コピーを埋める — 業種トーンに合わせた実際の文章(Lorem Ipsum禁止)
  4. コントラスト・余白をチェック — WCAG AA、セクションリズム80~120px

禁止事項

  • リデザインスキルとの同時注入禁止(役割衝突)
  • 根拠のない受賞歴・統計など虚偽コピー生成禁止

完了基準

  • 360/768/1440 レンダリング正常、コントラストAA、コンソール0件

Generated & served by DesignSkill

関連スキル