micro-landing-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Micro Landing Builder

微型落地页构建工具

Create config-driven NextJS landing pages for startups.

为初创企业创建基于配置驱动的NextJS落地页。

Concept

核心概念

Each landing page is a standalone NextJS app where:

Content is defined in
```
app.json
```
config file
UI comes from
```
@agenticindiedev/ui
```
Deploy independently to any domain via Vercel

每个落地页都是一个独立的NextJS应用，具有以下特点：

内容在
```
app.json
```
配置文件中定义
UI来自
```
@agenticindiedev/ui
```
组件包
可通过Vercel独立部署到任意域名

Prerequisites

前置条件

You need a published landing UI components package. The skill expects:

Package name (default:
```
@agenticindiedev/ui
```
)
Components: Hero, Features, Pricing, FAQ, CTA, Testimonials, Stats, EmailCapture, Header, Footer

你需要一个已发布的落地页UI组件包。本工具要求：

包名称（默认值：
```
@agenticindiedev/ui
```
）
包含组件：Hero、Features、Pricing、FAQ、CTA、Testimonials、Stats、EmailCapture、Header、Footer

Usage

使用方法

bash

undefined

bash

undefined

Show help

显示帮助信息

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py --help

Create a new landing

创建新落地页

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py
--slug mystartup
--name "My Startup"
--domain "mystartup.com"
--concept "AI-powered analytics"

With custom UI package

使用自定义UI包

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py
--slug mystartup
--name "My Startup"
--ui-package "@myorg/landing-kit"

Allow outside current directory

允许在当前目录外创建

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py
--root ~/www/landings
--slug mystartup
--allow-outside

undefined

python3 ~/.claude/skills/micro-landing-builder/scripts/scaffold.py
--root ~/www/landings
--slug mystartup
--allow-outside

undefined

Generated Structure

生成的项目结构

mystartup/
├── app.json              # All content/config here
├── package.json          # Depends on UI package
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── vercel.json           # Vercel deployment config
├── public/
│   └── (images go here)
└── app/
    ├── layout.tsx
    ├── page.tsx          # Renders sections from app.json
    └── globals.css

mystartup/
├── app.json              # 所有内容/配置都在这里
├── package.json          # 依赖UI组件包
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── vercel.json           # Vercel部署配置
├── public/
│   └── (图片存放目录)
└── app/
    ├── layout.tsx
    ├── page.tsx          # 渲染app.json中的各个板块
    └── globals.css

app.json Config

app.json配置文件

The landing is entirely driven by

app.json

. See

references/config-schema.md

for full schema.

json

{
  "name": "My Startup",
  "slug": "mystartup",
  "domain": "mystartup.com",
  "meta": {
    "title": "My Startup - Tagline",
    "description": "SEO description"
  },
  "theme": {
    "primary": "#6366f1",
    "accent": "#f59e0b"
  },
  "analytics": {
    "plausible": "mystartup.com"
  },
  "sections": [
    { "type": "hero", "headline": "...", "subheadline": "..." },
    { "type": "features", "items": [...] },
    { "type": "pricing", "plans": [...] },
    { "type": "faq", "items": [...] },
    { "type": "cta", "emailCapture": { "enabled": true } }
  ]
}

落地页完全由

app.json

驱动。完整的JSON schema请参考

references/config-schema.md

。

json

{
  "name": "My Startup",
  "slug": "mystartup",
  "domain": "mystartup.com",
  "meta": {
    "title": "My Startup - Tagline",
    "description": "SEO description"
  },
  "theme": {
    "primary": "#6366f1",
    "accent": "#f59e0b"
  },
  "analytics": {
    "plausible": "mystartup.com"
  },
  "sections": [
    { "type": "hero", "headline": "...", "subheadline": "..." },
    { "type": "features", "items": [...] },
    { "type": "pricing", "plans": [...] },
    { "type": "faq", "items": [...] },
    { "type": "cta", "emailCapture": { "enabled": true } }
  ]
}

Section Types

板块类型

```
hero
```
- Main hero with headline, CTA buttons
```
stats
```
- Key metrics/numbers
```
features
```
- Feature grid with icons
```
pricing
```
- Pricing plans
```
testimonials
```
- Customer quotes
```
faq
```
- Accordion FAQ
```
cta
```
- Call to action with email capture

```
hero
```
- 包含标题和CTA按钮的主英雄板块
```
stats
```
- 关键指标/数据板块
```
features
```
- 带图标的功能网格板块
```
pricing
```
- 定价方案板块
```
testimonials
```
- 用户评价板块
```
faq
```
- 折叠面板式常见问题板块
```
cta
```
- 带邮箱捕获功能的行动号召板块

Batch Creation

批量创建

Create multiple landing pages from a template or CSV/JSON file:

bash

undefined

通过模板或CSV/JSON文件批量创建多个落地页：

bash

undefined

From CSV file

从CSV文件创建

python3 ~/.claude/skills/micro-landing-builder/scripts/batch_create.py
--root ~/www/landings
--csv projects.csv
--allow-outside

From JSON file

从JSON文件创建

python3 ~/.claude/skills/micro-landing-builder/scripts/batch_create.py
--root ~/www/landings
--json projects.json
--allow-outside

Clone from existing template

从现有模板克隆

python3 ~/.claude/skills/micro-landing-builder/scripts/batch_create.py
--root ~/www/landings
--template ~/www/landings/template-landing
--json projects.json
--allow-outside

undefined

python3 ~/.claude/skills/micro-landing-builder/scripts/batch_create.py
--root ~/www/landings
--template ~/www/landings/template-landing
--json projects.json
--allow-outside

undefined

CSV Format

CSV格式

csv

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

csv

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

JSON Format

JSON格式

json

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

json

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

Deployment

部署

Single Project

单个项目部署

bash

cd mystartup
vercel

bash

cd mystartup
vercel

Batch Deployment with Domains

批量部署并配置域名

Deploy multiple projects to Vercel with custom domains:

bash

undefined

将多个项目部署到Vercel并配置自定义域名：

bash

undefined

Deploy with domain mapping

配置域名映射并部署

python3 ~/.claude/skills/micro-landing-builder/scripts/deploy_vercel.py
~/www/landings/project1
~/www/landings/project2
--domains-json domains.json
--prod
--yes

Single domain

单个域名部署

python3 ~/.claude/skills/micro-landing-builder/scripts/deploy_vercel.py
~/www/landings/project1
--domain project1.com
--prod
--yes

undefined

python3 ~/.claude/skills/micro-landing-builder/scripts/deploy_vercel.py
~/www/landings/project1
--domain project1.com
--prod
--yes

undefined

Domain Mapping JSON

域名映射JSON格式

json

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

Note: Domains must be configured in your DNS before adding to Vercel. Vercel will provide DNS records to add.

json

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

注意： 在添加到Vercel之前，必须在DNS中配置好域名。Vercel会提供需要添加的DNS记录。

Workflow

工作流程

Single Landing Page

单个落地页

Run scaffold to create landing structure
Edit
```
app.json
```
with your content
Add images to
```
public/
```
Deploy with
```
vercel
```
or use
```
deploy_vercel.py
```

运行scaffold脚本创建落地页结构
编辑
```
app.json
```
添加你的内容
将图片添加到
```
public/
```
目录
使用
```
vercel
```
命令或
```
deploy_vercel.py
```
脚本部署

Multiple Landing Pages

多个落地页

Create CSV/JSON file with project definitions
Run
```
batch_create.py
```
to generate all landing pages
Customize each
```
app.json
```
as needed
Run
```
deploy_vercel.py
```
to deploy all with domains

创建包含项目定义的CSV/JSON文件
运行
```
batch_create.py
```
脚本生成所有落地页
根据需要自定义每个项目的
```
app.json
```
运行
```
deploy_vercel.py
```
脚本批量部署并配置域名

Customization

自定义扩展

To add custom sections or override components:

Add component to
```
app/components/
```
Import in
```
app/page.tsx
```
Add to section renderer

要添加自定义板块或覆盖现有组件：

将自定义组件添加到
```
app/components/
```
目录
在
```
app/page.tsx
```
中导入该组件
将其添加到板块渲染逻辑中

References

参考文档

```
references/config-schema.md
```
- Full JSON schema
```
references/sections-reference.md
```
- Section types and props

```
references/config-schema.md
```
- 完整的JSON schema
```
references/sections-reference.md
```
- 板块类型和属性参考