micro-landing-builder

Micro Landing Builder

スタートアップ向けの、設定駆動型のNextJSランディングページを作成します。

契約

入力：

• 1つ以上のランディングページ定義：slug、name、domain、concept、config
• 出力先ルート
• Slug：小文字、数字、ハイフンで構成される1つのパスセグメントです。それ以外はすべて拒否されます
• オプションのドメインマッピング

出力：

• 生成されたランディングアプリのディレクトリ
• app.json設定ファイル
• デプロイを明示的に要求した場合のデプロイ計画またはデプロイ済みURL

作成・変更するもの：

• ローカルのランディングアプリディレクトリ
• Vercel設定ファイル
• デフォルトでは本番環境にデプロイしません

外部への副作用：

• 明示的なデプロイ要求があった場合にのみ、Vercelへのデプロイやカスタムドメインの割り当てを行うことがあります

確認が必要な操作：

• 現在のワークスペース外での一括作成の前
• 本番環境へのデプロイの前
• カスタムドメインの割り当ての前
• 既存のランディングディレクトリを上書きする前

委任先：

• 静的なランディングページを1つ作成する場合は、landing-page-vercelを推奨します
• 製品全体のリポジトリには、project-init-orchestrator / npx @shipshitdev/v0を使用します
• Vercelへのデプロイには、deployment-composerまたはdeploy-appを使用します

コンセプト

各ランディングページは独立したNextJSアプリで、次の特徴があります。

• コンテンツはapp.json設定ファイルで定義します
• UIはshadcn/uiです。components.json、components/ui（Button、Card、Badge、Accordion、Input）、およびcomponents/sections内のランディングセクションをすべてアプリにコピーするため、コードはアプリ自身が所有します
• テーマトークンはapp/globals.css（@theme inline）のshadcn CSS変数です。app.jsonのthemeで、--primary、--background、追加の--brandアクセントを上書きできます
• Vercelを使って、任意のドメインに個別にデプロイできます

前提条件

事前に公開またはインストールしておくものはありません。スキャフォールドがshadcn/uiのセットアップを自動で行い、実行時に利用するnpmパッケージ（Next.js 16、React 19、Tailwind v4、shadcn、radix-ui、class-variance-authority、cn、lucide-react、tw-animate-css）のみに依存します。バージョンは脚本/scaffold.pyで固定されています。固定バージョンを変更する前に、npm view <pkg> versionで再確認してください。bun installにはBunとネットワークアクセスが必要です。

使用方法

# Show help
python3 scripts/scaffold.py --help

# Create a new landing
python3 scripts/scaffold.py \
  --slug mystartup \
  --name "My Startup" \
  --domain "mystartup.com" \
  --concept "AI-powered analytics"

# Light theme (app.json theme.mode "light" with a white background and dark text)
python3 scripts/scaffold.py \
  --slug mystartup \
  --name "My Startup" \
  --theme-mode light

# Custom colors (#rgb, #rgba, #rrggbb or #rrggbbaa); text colors are picked for contrast
python3 scripts/scaffold.py \
  --slug mystartup \
  --name "My Startup" \
  --primary "#00ff00" \
  --background "#f4f4f5"

# Allow outside current directory
python3 scripts/scaffold.py \
  --root ~/www/landings \
  --slug mystartup \
  --allow-outside

生成される構成

mystartup/
├── app.json              # All content/config here
├── package.json          # Next 16, React 19, Tailwind v4, shadcn/ui runtime deps
├── components.json       # shadcn config ("config": "" for Tailwind v4)
├── next.config.ts
├── postcss.config.mjs    # @tailwindcss/postcss (Tailwind v4)
├── tsconfig.json
├── vercel.json           # Vercel deployment config
├── public/
│   └── (images go here)
├── lib/
│   ├── utils.ts          # cn() helper
│   └── theme.ts          # app.json theme -> mode and CSS variable overrides
├── components/
│   ├── ui/               # shadcn: button, card, badge, accordion, input
│   └── sections/         # header, hero, stats, features, pricing, testimonials, faq, cta, footer
└── app/
    ├── layout.tsx        # Applies app.json theme to the shadcn CSS variables
    ├── page.tsx          # Renders sections from app.json
    ├── globals.css       # Tailwind v4 + shadcn tokens: :root, .dark, @theme inline
    └── api/subscribe/    # Waitlist endpoint stub (returns 501 until a provider is wired)

メールアドレス取得フォームはapp/api/subscribe/route.tsにPOSTします。メールアドレスを検証し、メールプロバイダーを接続するまでは501を返すため、実際には保存していないメールアドレスを保存したかのように表示することはありません。

app.json設定

ランディングページの設定はすべてapp.jsonで行います。スキーマ全体についてはreferences/config-schema.mdを参照してください。

{
  "name": "My Startup",
  "slug": "mystartup",
  "domain": "mystartup.com",
  "meta": {
    "title": "My Startup - Tagline",
    "description": "SEO description"
  },
  "theme": {
    "primary": "#4f46e5",
    "accent": "#f59e0b",
    "background": "#0a0a0a",
    "foreground": "#fafafa",
    "mode": "dark"
  },
  "analytics": {
    "plausible": "mystartup.com"
  },
  "sections": [
    { "type": "hero", "headline": "...", "subheadline": "..." },
    { "type": "features", "items": [...] },
    { "type": "pricing", "plans": [...] },
    { "type": "faq", "items": [...] },
    { "type": "cta", "emailCapture": { "enabled": true } }
  ]
}

セクションの種類

• hero - 見出しとCTAボタンを含むメインヒーロー
• stats - 主要な指標や数値
• features - アイコン付きの機能グリッド
• pricing - 料金プラン
• testimonials - 顧客の声
• faq - アコーディオン形式のFAQ
• cta - メールアドレス取得機能付きの行動喚起

一括作成

テンプレートまたはCSV/JSONファイルから複数のランディングページを作成します。

# From CSV file
python3 scripts/batch_create.py \
  --root ~/www/landings \
  --csv projects.csv \
  --allow-outside

# From JSON file
python3 scripts/batch_create.py \
  --root ~/www/landings \
  --json projects.json \
  --allow-outside

# Clone from existing template
python3 scripts/batch_create.py \
  --root ~/www/landings \
  --template ~/www/landings/template-landing \
  --json projects.json \
  --allow-outside

CSV形式

slug,name,domain,concept
project1,Project One,project1.com,AI-powered analytics
project2,Project Two,project2.com,Cloud infrastructure

オプションのテーマ列（ヘッダーの前後の空白は削除され、大文字と小文字は区別されません。不明なヘッダー、重複したヘッダー、またはセル数が正しくない行がある場合はエラーで中止します。ファイルにはUTF-8 BOMを含めることができます）：primary、accent、background、theme_mode（darkまたはlight）。色は#rgb、#rgba、#rrggbb、#rrggbbaaのいずれかと完全に一致する必要があります（JSONでは空白や空文字列は不可。CSVの空セルは「未設定」を意味します）。無効な行はスキップされ、実行はゼロ以外の終了コードを返します。--templateを指定すると、色とモードが複製したapp.jsonに適用されます。新しいbackgroundを指定した場合、継承されたforeground、mode、accentはクリアされます（accentは、独自に指定しない限り再導出されます）。

JSON形式

[
  {
    "slug": "project1",
    "name": "Project One",
    "domain": "project1.com",
    "concept": "AI-powered analytics"
  },
  {
    "slug": "project2",
    "name": "Project Two",
    "domain": "project2.com",
    "concept": "Cloud infrastructure"
  }
]

デプロイ

単一プロジェクト

vercelを実行する前に、ランディングディレクトリに.vercel/project.jsonがあることを確認してください。存在しない場合は処理を中止し、ユーザーに手動でvercel linkを実行するよう依頼してください。無人で実行してはいけません。

cd mystartup
vercel

ドメインを指定した一括デプロイ

カスタムドメインを使って、複数のプロジェクトをVercelにデプロイします。

# Deploy with domain mapping
python3 scripts/deploy_vercel.py \
  ~/www/landings/project1 \
  ~/www/landings/project2 \
  --domains-json domains.json \
  --prod \
  --yes

# Single domain
python3 scripts/deploy_vercel.py \
  ~/www/landings/project1 \
  --domain project1.com \
  --prod \
  --yes

ドメインマッピング JSON

{
  "project1": "project1.com",
  "project2": "project2.com"
}

注記： Vercel に追加する前に、DNS でドメインを設定する必要があります。Vercel から追加する DNS レコードが提供されます。

ワークフロー

単一のランディングページ

1. scaffold を実行して、ランディングページの構成を作成します
2. app.json を編集して、コンテンツを追加します
3. public/ に画像を追加します
4. vercel を実行するか、deploy_vercel.py を使ってデプロイします

複数のランディングページ

1. プロジェクト定義を含む CSV/JSON ファイルを作成します
2. batch_create.py を実行して、すべてのランディングページを生成します
3. 必要に応じて各 app.json をカスタマイズします
4. deploy_vercel.py を実行して、ドメインとともにすべてをデプロイします

カスタマイズ

bunx --bun shadcn@latest add <name> を使って shadcn コンポーネントを追加します（components/ui に追加されます）。

カスタムセクションを追加するには：

1. components/sections/ にコンポーネントを追加します
2. app/page.tsx でインポートします
3. type に対応する sectionComponents マップに登録します

app.json の theme（primary、accent、background、foreground、mode）で色を変更します。Bun は scaffold または clone の作成前に、app/layout.tsx と同じリゾルバーを使ってテーマ全体を検証します。無効なテーマの場合、失敗した色の組み合わせとコントラスト比が表示されます。背景を暗くするか明るくするか、明示的な前景色を削除してください。実行時に無効な編集を行うと警告が表示され、デフォルトテーマ全体が使用されます。色には、先頭に配置された #rgb、#rgba、#rrggbb、#rrggbbaa を使用できます。アルファ値は警告とともに、不透明な 6 桁の 16 進数に正規化されます。最終的に丸められた色を使い、すべてのテキストの組み合わせは 4.5:1、フォーカスインジケーターと入力欄のボーダーは 3:1 でチェックされます。明示的に指定されていない場合、モードは背景色から推定されます。監査済みのサーフェスカラーは、どちらのモードでも機能します。ハードコードされた色ではなく、トークンユーティリティを使用してください。導出と検証の詳細は references/config-schema.md を参照してください。

リファレンス

• references/config-schema.md - JSON スキーマ全体
• references/sections-reference.md - セクションの種類と props