tech-product-landing

テック製品のランディングページ

このスキルは、assets/template/ の maxsim-flutter ソース一式をコピーし、対象製品に合わせてコンテンツを調整してランディングページを作成します。デザイン、アニメーション、構造はそのまま維持し、変更するのはデータ配列と製品固有の文字列だけです。

ステップ 1：雛形の作成とインストール

npm create vite@latest <project-name> -- --template react-ts
cd <project-name>
npm install motion lucide-react clsx tailwind-merge
npm install -D tailwindcss @tailwindcss/vite @types/node

ステップ 2：テンプレートファイルのコピー

assets/template/ のすべてのファイルを読み込み、ディレクトリ構造を維持したまま新しいプロジェクトにコピーします。

assets/template/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── vite-env.d.ts
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── index.css
    ├── lib/utils.ts
    └── components/sections/
        ├── Navbar.tsx
        ├── Hero.tsx
        ├── Features.tsx
        ├── HowItWorks.tsx
        ├── TechStack.tsx
        ├── Docs.tsx
        └── Footer.tsx

ステップ 3：コンテンツの置き換え

テンプレート内のすべての // ADAPT: コメントは、変更が必要な正確な箇所を示しています。概要は次のとおりです。

グローバル文字列の置き換え

検索対象	置き換え後
maxsim-flutter	製品名
maystudios/maxsim-flutter	GitHub リポジトリ（org/repo）
"maxsim-flutter"（vite.config.ts 内の npm パッケージ）	npm パッケージ名
__MAXSIM_VERSION__	__YOUR_PRODUCT_VERSION__ に名前を変更（3 ファイル：vite-env.d.ts、Hero.tsx、Footer.tsx）

index.html

• <title> と <meta name="description">

vite.config.ts

• fetchNpmVersion("maxsim-flutter") → npm パッケージ名
• または fetch を削除して、次を使用します：const version = "1.0.0";
• __MAXSIM_VERSION__ の define キーの名前を変更

index.css

• --color-accent: #3b82f6 → ブランドカラー（青＝開発ツール、緑＝SaaS、紫＝AI）
• --color-accent-light をより明るい色合いに更新

Navbar.tsx

• navLinks 配列：ページに合わせてセクションを追加／削除
• <a> 要素内のブランド名
• GitHub URL（2 か所：デスクトップ＋モバイル）

Hero.tsx

• FLIP_WORDS — 製品に合った力強いキーワードを 4～5 個
• アイブロウラベルのテキスト（"CLI Tool" → 製品のカテゴリー）
• h1 の製品名
• サブタイトルの接頭辞（"AI-Powered Flutter "）
• 説明文
• TerminalBlock 内の command 変数（インストールコマンド）
• CTA ボタン内の GitHub href

Features.tsx

• features 配列を 6 項目に置き換えます：

  { icon: IconName, title: "...", description: "..." }
  

• lucide-react からアイコンをインポートします（常に strokeWidth={1.5}）

HowItWorks.tsx

• steps 配列を 4 項目に置き換えます（インストール → 作成 → 使用 → リリースの流れ）：

  { number: "01", title: "...", description: "...", code: "your-cli command" }
  

TechStack.tsx

• flutterStack／cliStack 配列を実際に使用する技術に置き換えます（合計 8～12 項目）
• 必要に応じて配列名とカテゴリーラベルを変更します

Docs.tsx

• すべてのタブコンテンツ関数を、実際のドキュメントに置き換えます
• 一般的なタブ構成：はじめに、コマンド／API、オプション／モジュール、設定、高度なトピック
• CodeBlock、DocHeading、DocText ユーティリティは共通で使えるため、そのまま使用します
• TabId 型と tabs 配列をタブ名に合わせて更新します

Footer.tsx

• 製品名、タグライン、著作権表示
• EXTERNAL_LINKS 配列：GitHub URL、npm URL（または独自のリンクに置き換え）

デザイントークン

src/index.css の @theme inline で定義されています。

トークン	デフォルト	ガイダンス
--color-accent	#3b82f6 青	ブランドに合わせて変更
--color-accent-light	#60a5fa	アクセントカラーの明るい色合い
その他すべて	zinc のダークスケール	そのまま維持

バージョングローバル（__MAXSIM_VERSION__）

ライブサイトは、ビルド時に vite.config.ts を介して npm のバージョンを取得します。新しい製品では、次のようにします。

1. fetchNpmVersion("maxsim-flutter") をパッケージ名に変更します
2. または、次のようにハードコードします：const version = "1.0.0";
3. define キーを __MAXSIM_VERSION__ から __MY_TOOL_VERSION__ のような名前に変更します
4. vite-env.d.ts の宣言を更新します
5. Hero.tsx と Footer.tsx 内の使用箇所を更新します

チェックリスト

• maxsim-flutter の文字列参照をすべて置き換えた
• バージョングローバルの名前を変更し、設定した
• index.html のタイトルと説明を更新した
• アクセントカラーを変更した（必要な場合）
• FLIP_WORDS が製品の価値提案を表している
• ターミナルコマンドに実際のインストール／初期化コマンドが表示される
• 適切な lucide アイコン付きの機能を 6 項目用意した
• 実際のコマンドを使った「使い方」のステップを 4 項目用意した
• 技術スタックのバッジに実際の依存関係を列挙した
• ドキュメントのタブに実際のドキュメントを記載した
• GitHub と npm のリンクが正しい
• フッターの著作権表示とタグラインを更新した