样式演示生成器

样式演示生成器 是做什么的？

将任何产品转化为一个精美的演示落地页，它借鉴了参考网站的视觉风格——包括其调色板、排版、布局模式和动效——同时讲述用户自己的产品故事。

黄金法则：克隆样式，绝不克隆内容。 参考网站提供外观；用户的网站/产品提供文字。输出结果不得复制参考网站的文案，也不得仅仅是重新换肤用户现有的布局——它应该是一个以借来的风格呈现的全新页面。

这是 #1 号错误。 复制参考网站的调色板，却保留用户自己网站的部分骨架（其编号的功能块、卡片主题、顺序），只会产生一个看起来仍是用户原始站点但换了新颜色的页面。重新着色并非重新造型。你必须借鉴参考网站的布局骨架和标志性组件，而不仅仅是其十六进制颜色值。同时务必研究用户自己网站的结构（第2步），以便知道哪些部分需要偏离。

支持的布局模式（根据请求选择）：

• 单一样式借鉴——整个页面采用一个参考网站的外观。
• 逐节风格巡览——每个部分借用不同网站的风格（例如，hero → projectdiscovery，pricing → linear，CTA → superhuman）。为每个 <section> 赋予其自身的范围性主题块：背景、强调色、字体、圆角以及标志性组件。当用户说“每个部分都有自己的主题”时，这很合适。保持它们整体协调（例如，全部采用深色主题），除非用户希望有对比。

工具包（随此技能提供——使用它，不要重新推导）

路径相对于此技能目录。优先使用这些工具，而不是从头开始手写；它们封装了下面提到的陷阱，因此你不会再遇到。

• template/ — 一个可构建的 Next 14 + GSAP + Lenis 框架，并已集成了动画层（SmoothScroll， ScrollProgress， Reveal，标记化的 globals.css，一个入门级的 page.tsx）。每次构建都从这里开始。
• template-html/index.html — 与上面相同的标记+动画层，但封装在一个独立文件中（GSAP/Lenis 通过 CDN 引入）。当用户选择单文件 HTML 输出时使用；无需框架/安装。
• scripts/new-demo.sh <dest> — 将模板复制到 <dest> 并执行 npm install。
• scripts/verify.sh <dir> — 第5步的一个脚本：当 next dev 运行时拒绝构建，进行类型检查，构建静态导出，并在 out/index.html 中搜索。
• scripts/extract-style.js — 通过 Chrome 工具的 javascript_tool 在打开的参考页面中运行，以提取真实的字体/颜色/圆角/缩放比例，形成规格草案（第2步）。
• scripts/shoot.mjs <url> — 无头 Playwright 截图，仅用于无显示器的沙箱/CI。本地环境请使用 Chrome 工具截图。
• scripts/deploy.sh [dir] [--prod] — 将构建好的静态目录（out/，或单文件 HTML 所在文件夹）部署到在线 URL。默认为 Vercel；由于只是静态文件，任何主机都可以。面向外部——先构建并与用户确认，然后再使用 --prod。
• scripts/audit.sh <url> — Lighthouse 评分（性能/可访问性/最佳实践/SEO），针对开发服务器或已部署站点。
• references/patterns.md — 动画配方 + 标志性组件蓝图，根据参考网站的节奏选择。

第1步 — 访谈用户（首先执行此步骤）

使用 AskUserQuestion 工具。一起询问这些问题。前两个是自由文本（告诉用户通过“其他”字段输入或在聊天中回答）；其余为带有合理选项的多选题。始终包含“添加自己的”选项。

1. 你的网站/产品 — 一个 URL（例如 www.acme.com）或简短描述。这是内容来源。
2. 参考网站 — 一个或多个 URL，用于借鉴其风格（例如 granola.ai， linear.app， stripe.com）。这是外观来源。
3. 字体风格 （多选） — 例如：编辑衬线体 · 干净无衬线体 · 等宽/技术感 · 圆润/友好 · 与参考网站一致。
4. 主题 （可选，多选） — 例如：浅色/纸张 · 深色/电影感 · 大胆色块 · 极简/大量留白 · 与参考网站一致。

添加这些额外问题（它们会显著改变结果）：

5. 氛围/基调 — 平静与编辑感 · 电影感与戏剧性 · 有趣与乐观 · 企业感与可信赖。
6. 动效级别 — 微妙（平滑显示） · 丰富的滚动动画（视差、滚动联动区域） · 交互式（访问者驱动的可点击演示）。默认值：丰富的滚动动画。
7. 强调色 — 与参考网站一致 · 指定颜色 · 让我选择。
8. 深度 — Hero + 几个部分 · 完整故事（讲述所有内容：工作原理、功能、证明、CTA）。默认值：完整故事。
9. 输出格式 — 可运行的 Next.js 项目（推荐） · 单个自包含 HTML 文件。

如果用户已经在他们的消息中提供了一些答案，则不要再次询问这些。

第2步 — 研究参考网站

你必须实际查看参考网站，而不是猜测。

1. 首先尝试 mcp__workspace__web_fetch。营销网站通常是客户端渲染的，因此它经常返回空内容——这在意料之中。
2. 切换到 Chrome 浏览器工具（如果延迟，通过 ToolSearch 加载）：使用 navigate → get_page_text 获取文案/结构，然后使用 computer 截图（向下滚动并捕获3-5帧）以读取实际的视觉语言。用最隐私保护的方式关闭 Cookie 横幅。
3. 以低成本获取证据草案：将 scripts/extract-style.js 粘贴到 Chrome 工具的 javascript_tool 中，在打开的参考页面上执行——它会返回真实的字体、颜色频率、字号比例和圆角。然后编写简短的样式规格说明（填写 references/style-extraction.md 中的模式）：背景、调色板+强调色、字体搭配、区域/布局模式、标志性组件（例如，浮动产品模型）以及动效特征。脚本能捕捉到眼睛误判的值；你的截图能捕捉到布局和标志性的“特征”。两者都使用。
4. 同时以同样方式阅读用户的网站——获取真实的产品内容并注意其自身的布局/区域骨架、字体和页脚。你需要这些信息，以便可以故意偏离它（借用参考网站的结构，而不是产品的结构），并可以逐字复用产品真实的页脚/法律文本，而不是自创一个。
5. 非拉丁文内容： 如果产品文案包含天城文、中日韩统一表意文字、阿拉伯文、西里尔文等（例如，一个印地语+英语混合编程的演示），现在就记录下来——你必须加载一个支持该文字的字体（参见构建指南中的陷阱）。

如果某个域名无法获取或被阻止，请告知用户，并继续使用截图/他们的描述——切勿尝试绕过获取限制。

第3步 — 规划

将用户的产品内容映射到参考网站的结构模式上。制定一个简短的章节大纲。选择字体（与参考网站最接近的免费 Google 字体）、调色板和动效方案。确认任何真正模棱两可的部分，然后开始构建。

第4步 — 构建

默认技术栈：Next.js 14（App Router，静态导出）+ GSAP ScrollTrigger + Lenis，手写 CSS，在 globals.css 顶部使用设计标记。

从模板搭建脚手架——不要手写整个技术栈。 运行 scripts/new-demo.sh <dest>；它会复制 template/（动画层已集成并可构建）并安装依赖。然后：

1. 在 app/globals.css 的 :root 中根据你的样式规格设置设计标记，并在 app/layout.tsx 中替换字体为匹配的 Google Fonts。
2. 用真实的部分替换 app/page.tsx——将用户的内容映射到参考网站的布局骨架（而不是用户自己网站的布局）。
3. 构建标志性组件，并从 references/patterns.md 中选择2-4个动画配方；references/build-guide.md 包含粘性标签和模型起手代码。对其余部分重用 .rise、[data-speed] 和 <Reveal>。

如果用户选择了单文件 HTML，则从 template-html/index.html 开始（相同的标记+动画层，GSAP/Lenis 通过 CDN 引入，无需安装）并替换其内容。对于多主题变体，请参见构建指南中的逐节巡览说明。

始终启用 prefers-reduced-motion。保持参考网站的感觉，但编写原始标记和文案。

第5步 — 验证

运行 scripts/verify.sh <dir>——它会进行类型检查，构建静态导出，并在 out/index.html 中搜索。添加你自己的搜索项，以检查真实的产品文案、强调色十六进制值和字体名称（脚本会提醒你）。修正所有问题，直到一切通过。

查看结果。 在本地会话中，你可以看到它的渲染效果：启动 npm run dev，将 Chrome 工具指向 http://localhost:3000，并使用 computer 进行截图（滚动浏览）。这是真正的质量检查——请务必执行，而不仅仅是信任搜索。在无显示器的沙箱中，如果 localhost 无法访问，请使用 scripts/shoot.mjs http://localhost:3000（或针对部署）进行无头截图，并说明即使这样也不可用的情况。

绝不要在 npm run dev 运行时运行 npm run build。 两者都会写入 .next 目录；构建过程会覆盖正在运行的开发服务器的代码块，导致页面崩溃并显示 Error: Cannot find module './31.js'（或类似信息）。这曾经困扰过我们，而且看起来像是一个代码错误，但实际上不是。当开发服务器运行时：

• 使用 npx tsc --noEmit 进行类型检查（不会影响 .next）；
• 要执行真正的 npm run build，请先停止 dev；
• 如果开发服务器已经损坏：执行 pkill -f "next dev"， rm -rf .next，然后重新启动 npm run dev。

在编辑正在运行的开发服务器时，建议使用 tsc --noEmit + curl localhost:3000 | grep 来确认内容已编译，而不是直接构建。

第6步 — 打包并交接

删除 node_modules、.next、out，压缩项目，并使用 mcp__cowork__present_files 分享。提供运行命令（npm install && npm run dev）以及一段简短的总结，说明参考网站的样式是如何应用的。

第7步 — 上线与审计（可选）

如果用户想要可分享的 URL 或质量评分：

• 审计： scripts/audit.sh http://localhost:3000（开发服务器运行中）会打印 Lighthouse 性能/可访问性/最佳实践/SEO 得分。争取达到90+；可访问性和 SEO 是可以在发布前轻松修复的要点。
• 部署： 先构建（scripts/verify.sh <dir> 生成 out/），然后执行 scripts/deploy.sh out 获取预览 URL。部署是面向外部的——在使用 scripts/deploy.sh out --prod 之前必须与用户确认，并且不要部署过时的 out/ 目录。由于是静态文件，Vercel/Netlify/任何主机都可以工作。
• 针对在线 URL 重新运行 audit.sh <deploy-url> 以获取真实网络环境下的评分。

安全护栏

• 原创性： 绝不复制参考网站的文字内容，也不要嵌入其 Logo 或商标图片资源——请使用 CSS 生成的纹理/形状替代。在比较或文字上下文中的公司名称是可以的。
• 敏感领域： 如果产品涉及健康、金融、法律或类似领域，请保持语气负责任且准确，将演示数据标记为说明性内容，避免做出保证，并包含适当的声明（例如，为心理健康网站添加危机资源热线）。保持加载/营销语言不引起恐慌。
• 说明性数据： 注意任何显示的名称、数字、引文或可用性都是占位符演示内容——但要保持其小而低调（简短的一行），绝不要使用巨大的免责声明块，并且绝不要塞进页脚，仿佛它是网站真正的页脚。如果用户希望产品的真实页脚，请复制它（见下文），并将说明性说明放在其他地方，或者如果用户明确覆盖则删除它——然后告知用户没有任何内容再将演示数据标记为说明性。
• 页脚： 优先使用目标产品的真实页脚——获取并逐字重用其标语、链接和版权信息，而不是自创一个或在其中留下构建说明。
• 动效： 每个动画都必须在减少动效设置下优雅降级。

已吸取的陷阱教训（请勿重复）

从实际运行中得来。完整技术细节见 references/build-guide.md。

1. 重新着色 ≠ 重新造型。 不要保留用户自己网站的区域骨架而只替换颜色——它看起来仍然像他们的原始站点。请借鉴参考网站的结构和标志性组件。（参见黄金法则。）
2. 在包含内联标记（<b>， <span>）的文本列表项/段落上使用 display:flex，会将每个内联片段分割成独立的 flex 列——文本会破碎成断裂的列。请使用 ::before 定位来生成项目符号；保持文本容器为 display:block。仅对包装器使用 flex，而不要对文本行本身使用。
3. 绝不要在 npm run dev 运行时执行 npm run build（会损坏 .next）。在开发服务器运行时，使用 npx tsc --noEmit 进行验证。（参见第5步。）
4. 非拉丁文字需要自己的网页字体。 天城文/中日韩统一表意文字/阿拉伯文无法在 Inter/JetBrains Mono 中渲染；请加载匹配的 next/font 并包含正确的 subsets（例如 Noto_Sans_Devanagari， subsets:["devanagari"]），并应用一个 .hi{font-family:var(--f-deva)} 类。不要依赖操作系统的后备字体。
5. 重用产品真实的页脚，不要自创一个或在那里留下构建说明（参见页脚安全护栏）。

质量标准

目标是制作一个可以媲美真实上线页面的作品：自信的字号比例、克制的调色板、来自参考网站的标志性视觉元素，以及随着滚动揭示内容而非装饰内容的动效。不要为不同的参考网站重复使用相同的布局——其核心意义在于每次的结果都看起来像是它借用的那个网站。