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 包名称
• 或移除版本获取逻辑，并使用：const version = "1.0.0";
• 重命名 __MAXSIM_VERSION__ 定义键

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. 将定义键从 __MAXSIM_VERSION__ 重命名为类似 __MY_TOOL_VERSION__ 的名称
4. 更新 vite-env.d.ts 声明
5. 更新 Hero.tsx 和 Footer.tsx 中的用法

检查清单

• 已替换所有 maxsim-flutter 字符串引用
• 已重命名并配置全局版本变量
• 已更新 index.html 标题和描述
• 已更改强调色（如有需要）
• FLIP_WORDS 能体现产品价值主张
• 终端命令显示真实的安装/初始化命令
• 6 项功能搭配相关的 lucide 图标
• 4 个「工作原理」步骤包含真实命令
• 技术栈徽章列出实际依赖项
• 文档选项卡包含真实文档
• GitHub 和 npm 链接正确
• 已更新页脚版权信息和标语