着陆页 — 编排器

输出目录：./generated/{slug}-landing（相对于当前工作目录，或通过 LANDING_PAGE_OUTPUT_DIR 环境变量配置）

步骤 1 — 解析输入

在 | 上分割参数（去除空格）：

[0] → company_name（如果缺失，则创意性地生成一个适合该行业的名称）
[1] → industry（如果缺失则推断）
[2] → tagline_hint（可选）
[3] → target_audience（可选）
[4] → cta_goal（可选，默认为 "Commencer gratuitement"）

slug = 公司名称小写，去除变音符号，空格 → 连字符。

解析输出路径：

OUTPUT_DIR="${LANDING_PAGE_OUTPUT_DIR:-./generated}/{slug}-landing"

步骤 2 — 内容简报 (landing-page-copy)

使用解析后的输入调用 landing-page-copy 技能。在继续之前，等待完整的 CONTENT_BRIEF 输出。

简报包含：英雄区文案、特性、推荐语、FAQ、关于、定价方案、博客文章、案例研究、导航标签。此文案是生成站点中所有文本的事实来源 —— 在代码生成期间不要自行编造文案。

步骤 3 — 设计 + SEO（并行运行）

3-A. 设计智能 (ui-ux-pro-max)

并行运行以下 3 个命令：

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry}" --design-system -p "{company_name}"
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry}" --domain color -n 3
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "{industry} landing page" --domain typography -n 3

注意：需要安装 ui-ux-pro-max 技能。如果不可用，则直接从行业和品牌背景合成设计简报。

综合成一份设计简报：

视觉基调（3-5 个形容词）
调色板：主色、辅色、强调色、背景色、柔和背景色、卡片背景色、表面色、文本色、柔和文本色、反向文本色、边框色、柔和边框色、点色
排版：标题字体 + 正文字体（必须存在于 Google Fonts 中）
布局决策：英雄区类型、特性布局、推荐语样式
动画风格：微妙 / 适度 / 表现力强
标志性细节：一个独特的视觉元素，使此页面令人难忘

3-B. SEO 计划 (landing-page-seo)

使用 company_name、industry 和 CONTENT_BRIEF 调用 landing-page-seo 技能。等待完整的 SEO_PLAN 输出。

计划包含：每页的 meta 标签、schema 标记类型、站点地图配置、Core Web Vitals 构建提示、AI SEO 提示。

步骤 4 — 编写所有文件

创建 {OUTPUT_DIR}，然后使用 Write 工具从头编写每个文件。所有文案使用 CONTENT_BRIEF，所有 meta/schema 使用 SEO_PLAN。无模板，无占位文本。

4-A. 基础设施

package.json：

{
  "name": "{slug}-landing",
  "version": "0.1.0",
  "private": true,
  "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },
  "dependencies": {
    "next": "^16.2.7",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "lucide-react": "^0.474.0",
    "framer-motion": "^12.40.0"
  },
  "devDependencies": {
    "@next/mdx": "^16.2.7",
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@types/mdx": "^2.0.0",
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "tailwindcss": "^3.4.1",
    "postcss": "^8.5.10",
    "autoprefixer": "^10.0.1"
  }
}

版本：已验证的堆栈 Next 16 + React 19 + framer-motion 12 + lucide-react 0.474（构建 output: 'export' 正常）。不要将 next 锁定到 14.2.0 或将 react/react-dom 锁定到 ^18（这些是易受攻击的版本 —— Next 于 2025-12-11 发布的关键安全公告）。lucide-react 必须 >= 0.474（版本 0.378 和 < 0.474 未声明对 React 19 的 peer 依赖，会导致 npm install 失败）。

next.config.js：

const withMDX = require('@next/mdx')()
module.exports = withMDX({
  output: 'export',
  images: { unoptimized: true },
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
})

tsconfig.json：标准的 Next.js tsconfig，包含用于 ./ 的 @/* 路径别名和 "jsx": "react-jsx"（Next 16 使用 React 自动运行时 —— "preserve" 会在构建时被自动重写）

tailwind.config.ts：

darkMode: 'class'
fontFamily：标题 + 正文 CSS 变量
animation：marquee、float、line-grow
keyframes：marquee translateX(0%)→translateX(-50%)、float、lineGrow

postcss.config.js：tailwind + autoprefixer

mdx-components.tsx：将 h1 h2 h3 p ul li strong blockquote 映射到使用 CSS 变量的样式化元素

app/globals.css：

@tailwind base/components/utilities
:root 中的 CSS 变量 — 来自设计简报的所有设计令牌
html.dark { ... } — 覆盖深色模式下的所有变量
body 使用 CSS 变量，并带有 background-color 和 color 的过渡效果
自定义实用类：.text-gradient、.dot-grid、.glass-card、.bracket-card、.clip-diagonal-bottom、.clip-diagonal-top
规则：组件中的每个颜色引用都使用 CSS 变量 — 零硬编码十六进制

4-B. 组件

每个组件编写为 .tsx 文件。每个组件从 lib/data.ts 读取文案。所有颜色通过 CSS 变量实现。

components/DarkModeToggle.tsx：

'use client'，在挂载时读取 localStorage，在 <html> 上切换 dark 类
持久化用户偏好，使用来自 lucide-react 的 Sun/Moon 图标

components/LogoCarousel.tsx：

'use client'，纯 CSS marquee（animate-marquee），无 JS 滚动
品牌名称来自 lib/data.ts，为无缝循环而重复

components/ContactForm.tsx：

'use client'，状态：'idle' | 'sending' | 'sent' | 'error'
<form data-netlify="true" name="contact">，带有隐藏的 form-name
字段：姓名、邮箱、公司、消息
提交：fetch('/', { method: 'POST', body: new URLSearchParams(new FormData(form)) })

components/Navbar.tsx：固定定位、感知滚动、移动端菜单、<DarkModeToggle />

components/Hero.tsx：

Framer Motion 进入动画，带 useReducedMotion 检查
统计数据行，使用 <data value="{stat.value}">（AI SEO）
来自设计简报的标志性设计细节

components/Features.tsx：whileInView Framer Motion，交错延迟

components/Testimonials.tsx：每个卡片的 whileInView Framer Motion

components/FAQ.tsx：

'use client'，手风琴效果
<dl>/<dt>/<dd> 语义标记（FAQPage schema + AI SEO）

components/Pricing.tsx：

'use client'，月度/年度计费切换，带 −20% 徽章
price 与 price_annual 切换

components/About.tsx：故事 + 价值观

components/Footer.tsx：标语 + 导航 + 版权信息

组件规则：

仅在交互式/浏览器 API 组件上使用 'use client'
使用 import type { X } 进行类型只导入
动态 lucide 图标：import type { LucideIcon } from 'lucide-react'，然后 (Icons as any)[name] as LucideIcon | undefined。将任何图标 prop 类型设为 LucideIcon — 不是 React.ComponentType<{size?:number}>（lucide 的 size 是 string|number，因此窄类型会导致 next build 类型检查失败）。
所有颜色通过 CSS 变量 — 零硬编码十六进制
使用 Framer Motion 实现动画（不使用 IntersectionObserver）
所有文本来自 lib/data.ts

4-C. 页面

app/layout.tsx：

通过 next/font/google 使用 Google Fonts
来自 SEO_PLAN 主页 meta 的 Metadata
JSON-LD：来自 SEO_PLAN 的 Organization + WebSite（或 SoftwareApplication）

<head> 中的深色模式防闪：

try{if(localStorage.getItem('theme')==='dark'||(localStorage.getItem('theme')===null&&window.matchMedia('(prefers-color-scheme: dark)').matches)){document.documentElement.classList.add('dark')}}catch(e){}

在 <html> 上设置 suppressHydrationWarning
<link rel="preconnect" href="https://fonts.googleapis.com">

app/page.tsx：Navbar + Hero + LogoCarousel + Features + Testimonials + Pricing + FAQ + ContactForm + Footer

app/tarifs/page.tsx：来自 SEO_PLAN 的 Metadata + JSON-LD（Offer + FAQPage）+ Navbar + Pricing + FAQ + ContactForm + Footer

app/a-propos/page.tsx：来自 SEO_PLAN 的 Metadata + JSON-LD（AboutPage + Organization）+ Navbar + About + Footer

app/blog/layout.tsx + app/blog/page.tsx：来自 lib/blog.ts 的列表

app/blog/{slug-1}/page.mdx + app/blog/{slug-2}/page.mdx：

内容来自 CONTENT_BRIEF blog[]
<article> + <time datetime="..."> 语义包裹
第一段为 TL;DR（AI SEO 可引用性）

app/cas-clients/layout.tsx + app/cas-clients/page.tsx：来自 lib/case-studies.ts 的列表

app/cas-clients/{slug-1}/page.mdx + app/cas-clients/{slug-2}/page.mdx：

内容来自 CONTENT_BRIEF case_studies[]
显式的 ## Challenge / ## Solution / ## Résultats H2 结构（AI SEO）
来自 SEO_PLAN 的 BreadcrumbList JSON-LD

app/sitemap.ts：SEO_PLAN sitemap_config，包含所有页面、文章和案例研究

app/robots.ts：允许所有，站点地图 URL

4-D. 数据文件

lib/data.ts — 全部文案来自 CONTENT_BRIEF：

export const siteData = {
  nav: { links: [...], cta: "..." },
  hero: { badge, headline_a, subheadline, cta_primary, cta_secondary, social_proof_bar, stats },
  logoCarousel: { section_label, brands: [...] },
  features: { badge, heading, sub, items: [...] },
  testimonials: [...],
  faq: { items: [...] },
  about: { headline, story, values: [...] },
  pricing: { heading, sub, plans: [...] },
  contact: { heading, sub, form_cta },
  footer: { tagline }
}

lib/blog.ts：来自 CONTENT_BRIEF 的博客注册表

lib/case-studies.ts：来自 CONTENT_BRIEF 的案例研究注册表

英雄区图片 — 从以下 Unsplash 占位图中选择：

科技/SaaS/金融科技：https://images.unsplash.com/photo-1518770660439-4636190af475?w=1600&q=80
健康/保健：https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1600&q=80
食品/生物：https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1600&q=80
运动/健身：https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&q=80
时尚/奢侈品：https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80
房地产：https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1600&q=80
教育：https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1600&q=80
默认：https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&q=80

步骤 5 — 构建

cd {OUTPUT_DIR}
npm install
npm run build

TypeScript 错误 — 修复并重试：

import { X } → 对于类型仅导入，使用 import type { X }
动态图标：(Icons as any)[name] as LucideIcon | undefined（从 lucide-react 导入类型）；将图标 props 类型设为 LucideIcon，永远不要使用 ComponentType<{size?:number}>
在报告成功之前修复所有 TypeScript 错误

步骤 6 — 报告

🏢  公司：    {company_name} — {industry}
🎨  设计：     {mood} | {标题字体} / {正文字体}
✨  标志性元素：  {distinctive detail}
📝  标题：   "{headline_a}"
📄  页面：      / · /tarifs · /a-propos · /blog · /cas-clients
🔍  SEO：        {页面标题} | {schema 类型}
📁  输出：     {OUTPUT_DIR}

本地预览：cd {OUTPUT_DIR} && npm run dev

Demian-T/plugin-landing-page-creation

plugin-landing-page-creation 是什么？

在你喜欢的 AI 中提问

文档

着陆页 — 编排器

步骤 1 — 解析输入

步骤 2 — 内容简报 (landing-page-copy)

步骤 3 — 设计 + SEO（并行运行）

3-A. 设计智能 (ui-ux-pro-max)

3-B. SEO 计划 (landing-page-seo)

步骤 4 — 编写所有文件

4-A. 基础设施

4-B. 组件

4-C. 页面

4-D. 数据文件

步骤 5 — 构建

步骤 6 — 报告

Individual skills in this repo

Demian-T/plugin-landing-page-creation

Demian-T/plugin-landing-page-creation

相关技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me