Landing Scroll Story

Landing Scroll Story 可根据服务网址、README 或介绍文字,生成完整且可直接运行的 Next.js 落地页网站。最多只需回答三个问题,即可获得可运行、可部署的项目 zip。

两套模板

Light(SEO 优先)

• 深色首屏与移动的色条、悬浮胶囊导航、Bento 卡片、滚动固定的展示区、使用步骤和 FAQ
• 详情指南页面,以及 FAQPage 和 WebSite 的 JSON-LD
• 在设置生产环境网址之前,sitemap 和 robots 保持关闭(Preview 部署永远不会被收录)

Cinematic(视觉优先)

• 基于 GSAP + ScrollTrigger + Lenis 的动效编排
• 首屏缩小为 Bento 网格,随滚动播放的 Lottie 开场、价值卡片、跑马灯展示区和幕布式页脚
• 包含移动端自适应布局

使用方式

1. 提供网址、README 或一段简短描述。
2. 选择 light 或 cinematic。技能会给出推荐并说明原因。
3. 它会填写文案,用一条命令设置品牌色,然后构建、检查类型,并核对桌面端与移动端宽度。
4. 你会收到项目 zip,附有运行、修改文案和部署(Vercel、Cloudflare、Search Console)的简短说明。

输出示例

下方截图来自用本技能制作的虚构示例服务("Brewly")。

注意事项

• cinematic 模板中的图形是由代码生成的简单几何图案。若想获得精致效果,请把 public/landing/ 中的文件替换为你自己的素材。
• cinematic 模板在水合(hydration)之后才渲染多个区块,因此服务器返回的 HTML 中缺少大部分文字。如果搜索排名很重要,请选择 light。
• 已在开发环境中验证桌面端和 390 px 宽度的视口。不包含真机和 Safari 测试。
• 文案质量取决于你提供的资料。技能不会编造数字、客户或奖项。

许可证与署名

• cinematic 模板源自 SEED Design System(github.com/daangn/seed-design)落地页的代码,采用 Apache-2.0,Copyright 2025 Danggeun Market Inc.。许可证全文和声明随交付项目一并提供。不包含 SEED 或 Daangn 的标志、名称和媒体素材。本产品与 Daangn 无关联,也未获其赞助或认可。
• GSAP 依据其免费的 Standard License 使用。字体 Pretendard 采用 SIL OFL 1.1。