Sim 落地页工程指南基于 Next.js 的营销站点构建、SEO/GEO 优化与性能实践【免费下载链接】simSim is the collaborative workspace to build, deploy, and monitor AI agents and workflows. Used by 100,000 builders.项目地址: https://gitcode.com/GitHub_Trending/sim16/sim导读本文基于 Sim 开源仓库中apps/sim/app/(landing)/CLAUDE.md这一份面向开发者与 AI Agent 的落地页构建规范文档系统讲解 Sim 营销站点首页、平台页、解决方案页、定价、法律页以及/blog、/library、/models、/integrations等营销子路由的工程化实现方式。你将从中掌握落地页如何与产品 UI 共享同一套设计令牌Design Tokens、如何把 Lighthouse 95 / LCP 2.0s / CLS 0.05 的性能目标落地为可执行的编码约束、如何同时针对传统搜索引擎SEO与生成式引擎GEO / AEO优化页面以及每个新增 Section 必须通过的 8 项自检清单。一、落地页在整个应用中的定位1.1 一个路由组一整条公开营销面app/(landing)/是 Sim 的营销站点路由组它拥有/以及整个公开营销面——首页、平台/解决方案页、定价、法律页以及/blog、/library、/models、/integrations、/demo、/partners、/changelog等营销子路由。从仓库目录结构可以确认apps/sim/app/(landing)) 下除了page.tsx、landing.tsx与layout.tsx之外还包含workflows/、knowledge/、tables/、files/、pricing/、enterprise/、solutions/、integrations/、models/、blog/、library/、changelog/、demo/、contact/等完整子路由树。该规范文档要求在此目录下新增或修改任何内容前必须先通读本文件措辞与语言规则位于.claude/rules/constitution.mdSEO/GEO 规则位于.claude/rules/landing-seo-geo.md两者对该目录下所有文件生效。1.2 布局职责边界共享外壳 页面仅输出main规范强调共享layout.tsx只渲染一次 chrome每个页面只提供自己的main内容。仓库中的 landing.tsx/landing.tsx) 正是这一约定的实现export default function Landing() { return ( main idmain-content className{cn(flex flex-col, LANDING_SECTION_RHYTHM)} LandingAnalytics / HomeStructuredData / Hero / ProductDemo / Mothership / Features / Cta / /main ) }可以看到main是一个flex flex-colSection 之间的节奏rhythm由LANDING_SECTION_RHYTHM这一个常量统一控制——这对应规范中一个旋钮保持全页 Section 间距一致的设计。共享 chromelight包装层、品牌令牌层、滚动端口、跳转链接、导航栏、页脚、站点级 JSON-LD由路由组 layout 通过LandingShell提供见 landing-shell.tsx/components/landing-shell/landing-shell.tsx)外层div携带light类将每个var(--*)设计令牌钉死为亮色值无论访问者系统主题如何落地页永远保持亮色滚动端口为h-screen overflow-y-auto overscroll-y-none防止粘性导航栏被拖出视口边界GitHub Stars 在构建/重新验证时通过/lib/github/stars获取绝不在客户端请求。1.3 旧版暗色落地页已删除规范明确说明旧的app/(home)/路由组老式暗色落地页与--landing-*令牌已被删除其营销页面全部迁移至此chrome 随之退役。因此后续开发中不得再引入--landing-*令牌、Martian Mono 字体点缀或独立的营销主题。1.4 博客与库共享同一套内容引擎/blog编辑口吻的公司博客与/libraryAEO/GEO 内容——清单体、对比文、教程是两棵独立的路由树但共享同一个内容引擎引擎本体在apps/sim/lib/content/——从源码看包含registry-factory.ts通用注册表工厂、mdx.tsxMDX 组件、seo.tsSEO 构建器、index-list.ts、faq.tsx、schema.ts、utils.ts、code.tsx每个内容区段由薄薄的apps/sim/lib/blog/与apps/sim/lib/library/模块实例化渲染统一走components/下的共享Content*Page组件如content-post-page、content-index-page、content-author-page、content-tags-page见 apps/sim/app/(landing)/components/components)内容数据位于apps/sim/content/blog/与apps/sim/content/library/两者共用apps/sim/content/authors/。规范强调无论往哪个区段新增文章还是新增一个全新内容区段必须复用这套引擎禁止手写一套分叉的注册表或页面布局。此外每个新增的营销子路由都需要同步更新app/sitemap.ts与app/robots.ts/blog和/library当年就是这么做的。二、样式体系落地页就是产品的亮色模式规范的核心主张是落地页看起来就像产品本身其视觉语言就是工作区 UI 的亮色模式而不是一套独立的营销主题。这一主张在仓库中有完整落地的证据链。2.1 永远亮色永远使用平台令牌永远亮色landing.tsx的根包装层携带light类把每个令牌钉死为亮色值见app/_styles/globals.css中的:root, .light块。不得在此添加dark:变体也不得读取用户主题。只用平台令牌绝不写死 hex。规范给出的令牌映射如下完整定义见 globals.css 的layer base段落用途令牌亮色值仓库实测画布背景--bg#fefefe侧边栏/面板--surface-1#fbfbfb块/卡片/弹窗--surface-2#ffffff弹出层/页头--surface-3#f7f7f7悬停态--surface-hover#f2f2f2激活/选中态--surface-active#ececec主文本--text-primary#1a1a1a次级文本--text-secondary#525252弱化文本--text-muted#7a7a7a正文文本--text-body#434343图标--text-icon#5a5a5a分隔线--border#d8d8d8表单字段边框--border-1--border同上品牌主色--brand-agent#6f3dfa品牌次色--brand-secondary#33b4ff品牌强调色--brand-accent#33c482注意globals.css中仍保留了--landing-text等残留令牌但规范明令禁止使用——它们属于已被删除的旧暗色落地页。2.2 emcn 组件是落地的标准 chrome规范要求优先使用/components/emcn的 chip 组件族Chip、ChipLink、ChipTag、ChipInput、ChipModal*等作为标准 chrome演示预约表单 ChipModalChipModalField胶囊 CTA Chip/ChipLink组件拥有自己的外观chrome调用方传 props 而非 className 覆盖。完整消费规则见.claude/rules/sim-styling.md。这与仓库中落地页组件的实际用法一致——例如hero.tsx中通过cn()组合布局类而交互式 CTA 走共享的HeroCta。2.3 排版与全局样式纪律Season 是全局正文字体根布局中font-season应用于body。使用平台字号刻度text-small 13px、text-base 15px 等见globals.css的theme块实际还定义了--text-xs: 11px、--text-caption: 12px、--text-md: 16px。未获明确指示前不得新增字体或字体 CSS 变量。绝不改动全局样式禁止向app/_styles/globals.css追加内容。所有样式用局部 Tailwind 类条件样式用/lib/core/utils/cn的cn()不写内联style属性。2.4 响应式桌面是源头向下用max-*覆盖响应式策略是桌面布局保持无前缀基线小屏通过叠加max-*覆盖处理这样桌面端在任何宽度下字节级一致。四档断点如下断点行为max-xl:≤1279pxHero 的双栏分屏绝对定位的视觉 logos折叠为堆叠、参与文档流的单列。分屏需要 ≥1280px 以避免标题与视觉面板碰撞因此 iPad 横屏1024px得到的是堆叠 Hero 桌面导航max-lg:≤1023px桌面导航簇隐藏hidden lg:flexMobileNav汉堡抽屉接管多列网格降级mothership 4→2页脚 7→3共享 gutterpx-20 → max-lg:px-8Section 间距收紧max-md:≤767pxFeatures 板块去掉浮动 calloutmax-md:hidden改为全宽展示未遮罩的背景预览max-sm:≤639px单列网格、最小字号刻度、px-5gutter、Hero CTA 行堆叠新增 Section 时必须使用与导航栏 wordmark 对齐的同一套 gutter——仓库中定义在 landing-layout.ts/components/landing-layout.ts)export const LANDING_CONTENT_WIDTH mx-auto w-full max-w-[1460px] export const LANDING_GUTTER px-20 max-sm:px-5 max-lg:px-8 export const LANDING_HERO_TOP_PADDING pt-[112px] max-sm:pt-12 max-xl:pt-20 export const LANDING_SECTION_RHYTHM gap-[120px] max-sm:gap-16 max-lg:gap-[88px]上线前必须在 1280 / 1024 / 768 / 390 四个宽度验证桌面端无变化、零水平溢出。三、性能页面速度本身就是功能规范设定的硬指标为移动端 Lighthouse 95、LCP 2.0s、CLS 0.05、最小化 hydration 成本。围绕这些指标规范给出了七条可执行的工程约束3.1 默认 Server Componentsuse client只允许出现在真正需要交互的最小叶子节点一个带状态的按钮而不是包含它的 Section。导航栏、Hero 文案、页脚以及所有静态 Section 必须是服务端渲染的 HTML。从 page.tsx/page.tsx) 可以看到首页还显式声明了export const revalidate 3600即每小时静态重新验证一次。3.2 折叠线以上禁止重型客户端库初始 bundle 中不得出现动画框架framer-motion 等、ReactFlow、图表库。若折叠线以下的 Section 确实需要用next/dynamic按需加载并配尺寸稳定的占位符。3.3 图片一律走next/imageLCP 元素logo 或 Hero 视觉加priority折叠线以下默认懒加载每张图片有显式width/height布局偏移为零。Hero 的实现印证了这一点hero.tsx/components/hero/hero.tsx) 中hero-backdrop.jpg以next/image的fillobject-cover渲染并显式加了priority与fetchPriorityhigh因为它是本页的 LCP 元素媒体框则用固定宽高比aspect-[1300/720]预留空间。3.4 优先 CSS 而非 JS悬停态、过渡、跑马灯、滚动显现效果都用 CSStransition-*、animation而不是滚动监听器或动画库装饰性动效尊重prefers-reduced-motion。3.5 静态渲染杜绝请求期取数页面以revalidate静态生成见 page.tsx/page.tsx#L9)。页面树中任何一次cookies()/headers()/unstable_noStore()调用——包括根app/layout.tsx——都会静默覆盖每个页面的revalidate并把整个应用强制转为动态。任何动态内容如 GitHub Stars都在构建/重新验证期获取或延迟到客户端岛。判断方法是看bun run build的路由表如果营销页面构建为ƒ而非○/●问题出在上游而非页面本身。3.6 为一切预留空间所有媒体、内嵌内容和异步内容都必须有固定尺寸或宽高比CLS 预算实际为零。3.7 装饰性画布与动画不可交互手工打造的产品演示动画或内嵌 ReactFlow 画布仅为展示不加拖拽处理器ReactFlow 上不加nodesDraggable/panOnDrag/elementsSelectable。访客永远不应能点击或拖动装饰元素。3.8 重型客户端岛第二次出现时懒挂载如果同一动画组件在一页出现两次只有第一个通常是 Hero急切加载其余走基于共享 use-lazy-mount.ts/hooks/use-lazy-mount.ts) 的小型use client挂载包装export function useLazyMount(rootMargin: string) { const ref useRefHTMLDivElement(null) const [inView, setInView] useState(false) // IntersectionObserver 驱动接近视口才置 inView // IO 不可用时回退为急切挂载避免 Section 永远不渲染 return { ref, inView } }配合next/dynamic(..., { ssr: false })使用。参考模式见components/product-demo/components/product-demo-visual-mount/并且必须同步执行.claude/rules/sim-imports.md中的 barrel 清理步骤。3.9 常驻可见 CTA 不要预取认证路由Link一旦进入视口就会预取其目标路由的 JS。导航栏/Hero 里的/signup、/loginCTA 永远在视口内会在每次页面浏览时下载该路由的 bundle——必须传prefetch{false}。只在滚动进入视口的 CTA 上保留默认预取接近时预取正是期望行为。四、SEO元数据单一来源 语义化结构4.1 metadata 的单一来源page.tsx持有全部元数据title、description、OG/Twitter、canonical、robots并保持与 constitution 中声明层级的一致。page.tsx/page.tsx#L11-L78) 给出了完整的Metadata示例metadataBase、绝对 title、keywords、formatDetection关闭 email/address/telephone 自动探测、完整 openGraph 与 twitter card、canonical 与语言备用en-US/x-default、以及针对 googleBot 的robots细粒度配置max-video-preview: -1、max-image-preview: large、max-snippet: -1。4.2 页面内 SEO 规范全页只有一个h1位于 Hero且包含 AI workspace。品牌名由 title 标签、meta description 和 Hero 的sr-only摘要承载因此h1可以用用户真正搜索的非品牌关键词AI workspace、AI agents开头。无论措辞如何Hero 的sr-only段落必须以点名 Sim 开头。其下严格层级每个 Section 一个 H2Section 内条目用 H3。禁止跳级禁止第二个 H1。语义地标header、main、footer、nav每个 Section 是section id… aria-labelledby…-heading装饰/动画元素加aria-hiddentrue。结构化数据在可见内容之前由服务端组件输出 JSON-LDOrganization、WebSite、带featureList的WebApplication、有 FAQ 时加FAQPage。featureList必须与页面上实际展示的特性保持同步。可爬取链接所有内部导航用 NextLink配真实href禁止onClick导航外部链接加relnoopener noreferrer。全部文案是服务端渲染文本不得把文字烤进图片不得存在只有客户端 effect 运行后才出现的内容。新增路由或锚点后验证app/sitemap.ts与app/robots.ts仍然反映现实。五、GEO为生成式引擎优化页面规范明确指出AI 爬虫和答案引擎会读这个页面。为可提取性而优化。这与本仓库中/library内容AEO/GEO——清单体、对比文、教程的存在相互印证。GEO 的具体要求答案优先的 Section每个 H2 首段直接回答用户会问 AI 的问题Sim 是什么Sim 支持哪些集成Sim 多少钱。原子化内容块每个特性卡片、模板、定价档位必须可独立引用——自包含且明确写出 Sim禁止用 the platform、our tool 或裸代词作主语。用具体数字替代模糊主张1,000 集成、every major LLM、100,000 builders——而且只用真实、已上线发布的数字。仓库 Hero 的sr-only摘要恰好如此Connect 1,000 integrations and every major LLM … Trusted by over 100,000 builders, SOC2 compliant, and production-ready for teams of every size.sr-only 摘要Hero 有一个约 50 词的p classNamesr-only说明 Sim 是什么、为谁而做、做什么——这是 AI 摘要器的干净引用目标。hero.tsx/components/hero/hero.tsx#L66-L71) 中真实存在该段落。首屏 150 可见字符必须包含 Sim、AI workspace 和 AI agents。六、Copy 规范文案严格遵循.claude/rules/constitution.mdSim 是 the open-source AI workspace where teams build, deploy, and manage AI agents——永远不是workflow 工具或自动化平台。公开页面上的文案要求直陈句、主动语态、具体示例、无感叹号、不出现未解释的行话。七、目录约定与组件结构7.1 目录约定镜像 workspace 约定每个组件生活在自己的 kebab-case 文件夹中内含name.tsx加一个index.tsbarrel相对再导出组件的子组件嵌套在该文件夹的components/下每个子组件同样独立建文件夹并带自己的index.ts。非组件模块——types.ts、constants.ts、数据文件——放在相关文件夹根部。禁止在components/目录下散落裸name.tsx。规范文档给出了目标目录树此处按仓库根路径转写apps/sim/app/(landing)/ ├── CLAUDE.md # 本文件 ├── page.tsx # 路由入口metadata Landing / ├── landing.tsx # 根组合main 的 Section 顺序 ├── workflows/ # 一个平台路由page.tsx(metadata) workflows.tsx(config shell) ├── hooks/ # 跨页客户端 hooksuseLazyMount, …——裸文件不建文件夹/barrel └── components/ ├── index.ts # 顶层 barrel ├── navbar/{navbar.tsx, index.ts, components/chip/…} ├── hero/{hero.tsx, index.ts, components/hero-visual/…} ├── lifecycle/, features/, footer/, testimonials/ ├── shared/ │ ├── landing-shell/ # 亮色包装 跳转链接 Navbar(stars) Footer │ ├── hero-cta/ # 唯一的邮件捕获 注册 CTA │ └── logos/ # 唯一一套客户 logolayoutgrid(hero) | row(platform) └── solutions-page/ # 可复用的解决方案/平台布局 ├── solutions-page.tsx, index.ts, types.ts, constants.ts └── components/ # solutions-hero、solutions-logos-row、solutions-card-row …7.2 职责分配与导入纪律每个 Section 组件的 TSDoc 携带其布局规格——实现前先读 TSDoc。Section 组件拥有自己的地标Navbar →headerFooter →footer其余 →section共享的LandingShell拥有页面框架亮色包装、跳转链接、导航栏、页脚、构建期获取的 GitHub Stars页面的main拥有 Section 顺序与节奏。平台与解决方案路由用单个内容config消费SolutionsPage见solutions-page.tsx的 TSDoc。Section 的子组件放在components/section/components/。组件代码只用绝对导入/app/(landing)/components/...index.tsbarrel 用相对再导出export { X } from ./x与 workspace 约定一致。每个组件都有 props 接口。在两个文件共享某个 helper 之前不建utils.ts。八、每个新增 Section 的 8 项检查清单规范以清单收尾这也是开发者或 AI Agent 在此目录落地任何新 Section 的验收标准默认 Server Component确需客户端状态时客户端化的是叶子节点。H2 带idaria-labelledby接线标题层级完好。只用平台亮色令牌与 emcn chrome——无 hex 色、无--landing-*、无dark:。图片next/image、显式尺寸、priority只给 LCP 元素。文案通过 constitution 检查语言表、声明层级、语气。明确点名 SimSection 可独立引用。若 Section 新增特性、FAQ 或定价同步更新 JSON-LD。零布局偏移加载页面观察没有任何元素移动。九、总结一份可被 Agent 直接执行的规范文档apps/sim/app/(landing)/CLAUDE.md的价值在于它把营销站点的质量门槛翻译成了可验证、可执行、可被 AI Agent 遵循的工程约束亮色令牌体系消除了营销主题与产品 UI 的漂移revalidate Server Components useLazyMount懒挂载把性能预算变成代码结构H1/H2/H3 层级、JSON-LD、sr-only 摘要同时服务于传统爬虫与生成式引擎而目录约定与 8 项检查清单则保证了新增内容永远不会引入分叉的架构。对于任何想在 Sim 仓库中为营销面贡献代码的开发者或 Agent 而言这份文档既是规范也是自检清单——本文已将其核心内容结合仓库源码逐条展开可直接作为继续阅读 CLAUDE.md/CLAUDE.md) 与相关源码的导读。【免费下载链接】simSim is the collaborative workspace to build, deploy, and monitor AI agents and workflows. Used by 100,000 builders.项目地址: https://gitcode.com/GitHub_Trending/sim16/sim创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考