着陆页构建器

通过从客户网站和文档中提取品牌与内容，构建高质量、可直接部署的着陆页，生成带有经过验证的图像和清晰结构、具有响应式设计的HTML/CSS页面。

本技能之所以存在，是因为着陆页需要仔细协调品牌、内容、图片和响应式设计——而最常见的失败模式是将源文档视为纯文本，遗漏承载一半营销信息的图片。

黄金法则

1. 图片即内容，而非装饰。 当营销PDF中显示一张教室照片位于一段关于学生福祉的段落旁时，那张照片本身就在传递信息。一个没有这些图片的着陆页，无论文案多出色，都是不完整的。在首次构建时，每次都提取并整合图片。

2. 在所选技术栈内保持样式的可维护性。 对于静态页面，将CSS放在 styles.css 中，而不是内联在HTML中。对于现有框架项目，保留其已建立的CSS模块、组件样式、实用类或令牌系统。没有理由时不要迁移样式架构。

3. 绝不凭空捏造内容。 仅使用源文档提供的内容。不要编造图片标题、视觉方向、推荐语、统计数据或客户名称。如果内容缺失，标记出来并询问——不要用AI生成的占位符文本填补空缺。

4. 有目的地使用前端技能栈。 在编码前，加载以下列出的可用辅助技能。它们是互补角色，而不是盲目粘贴在一起的重复指令。如果某个命名技能不可用，请使用现有技能栈继续，并记录缺口；切勿假装其已运行。

前端技能栈（必需路由）

屏幕截图提供的前端工具按以下方式映射到此着陆页工作流。请阅读 references/frontend-skill-stack.md 了解完整路由和冲突规则。

frontend-design——建立特定主题的视觉论点、排版、调色板、布局概念、标志性元素和动态意图。用于新建和有意义的外观重塑。
design-taste-frontend——应用反模板实现纪律、响应式布局机制、可访问交互状态、组件选择、性能检查以及最终设计预检。
imagegen-frontend-web——当生成的视觉参考能显著减少歧义时使用：未知视觉方向、图像驱动的活动、自定义插图/艺术指导，或用户请求样机。它生成参考，但不替代真实品牌资产或实现。
design-taste-frontend-v1——仅作为旧版回退。当现有项目明确依赖于v1行为时使用；不要同时加载v1和当前版本Design Taste。
imagegen-frontend-mobile——不属于网站着陆页构建。仅用于独立的移动应用屏幕交付，绝不能作为页面的响应式网页设计步骤。
Aidesigner Frontend——如果此确切技能已安装并可用，则将其作为对已批准艺术指导的第二个可选评审。目前假定其不可用，且绝不能阻塞工作流。

不要为了形式而运行每一个工具。新建着陆页的最小栈为 frontend-design + 当前版本 design-taste-frontend + landing-page。当视觉参考生成合理时，添加 imagegen-frontend-web。响应式移动网页仍然是实现和QA的一部分；不会委托给移动应用图像技能。

编码前必需的设计门控

在实现之前，生成一份内部构建摘要，包含：

页面的受众、单一转化目标和可信内容来源；
一个与真实主题相关、而非通用SaaS美学的连贯视觉论点；
已检查许可和可用性的调色板和排版角色；
章节顺序及每个章节的任务；
资产映射：保留、获取、生成或省略；
一个标志性视觉创意和克制的动态计划；
桌面端、平板端和移动端在首屏及复杂章节上的行为；
基于品牌和参考审核的明确回避清单。

如果用户提供了参考，提取其原则但不要克隆其身份。如果来源是现有客户网站或已批准的模板，除非用户明确授权重新设计，否则保留已批准的文案、品牌资产、组件语法和章节顺序。

反模板规则（强制）

这些模式会让AI生成的页面看起来廉价且千篇一律。绝对不要使用：

禁止文案模式

“革新”、“改变您的”、“释放...的力量”、“利用”、“赋能”
“尖端”、“下一代”、“最先进”、“同类最佳”
“无缝地”、“毫不费力地”、“超级加速”
“在当今快节奏的世界中”、“在一个...的时代”
以“想象一下...”或“设想一下...”开头的段落
无上下文的通用CTA，如“了解更多”或“开始使用”——使用具体CTA：“立即获取报价”、“预约演示”、“查看定价”

禁止视觉模式

渐变色网状斑点或极光背景（AI生成页面的第一标志）
紫色到蓝色渐变作为主要设计语言
与产品无关的浮动3D对象
作为英雄背景的通用抽象几何图案
过度圆角的卡片（border-radius > 1.5rem），搭配沉重阴影
仅更换图标的相同卡片布局重复3次以上
与业务不匹配的库存照片英雄图像（例如，通用的握手照片）

禁止代码模式

HTML元素中的内联样式
在CSS中使用 !important（实用覆盖除外）
字体大小使用硬编码像素值——使用 clamp() 或 rem
图片缺少 alt 属性
在有语义元素（<section>、<article>、<nav>、<header>、<footer>）时使用 <div>

工作流概述

构建分七个阶段。从提供的来源中推断明显事实，而不是要求用户重复。仅在缺失的决定会显著改变结果时才提问。

上下文与研究——阅读项目/客户指示、会议决策、简报、审批状态、现用品牌、参考、文案和设计语法
内容提取——从提供的来源提取所有已审批的文本和图片
资产验证——构建一个具有来源意识的可用媒体清单
前端方向与蓝图——应用前端设计和设计品味；锁定转化流程、令牌、响应式行为、资产和验收检查；仅在合理时生成网页参考
构建——使用满足简报的最简单技术栈，并实现完整的生产代码
浏览器QA——构建/测试，检查桌面端、平板端和移动端的屏幕截图，修复缺陷并重复
部署与在线验证——仅在被要求时部署，然后检查真实URL并报告已验证的别名

阶段1：上下文与研究

在编写代码之前，先阅读最近的项目/客户指示、已批准的简报、会议决策和来源链接。然后了解客户现有品牌并收集所需的所有资产。

品牌提取

获取客户网站并提取：

颜色：检查CSS自定义属性、关键元素（标题、按钮、背景、强调色）的计算样式。记录为十六进制值。
字体：检查Google字体链接、font-family 声明和 @font-face 规则。不要假设——许多网站使用的字体看起来像常用字体但实际上并非如此。
Logo：找到logo图片URL（通常在页眉或页脚）。获取可用的最高分辨率版本。
设计语言：注意间距模式、圆角半径使用、阴影样式、章节背景处理。

资产收集

这一步至关重要。爬取网站的图片目录以构建完整目录：

获取首页和关键页面，提取所有 <img> src 属性和CSS background-image URL
查找图片路径中的模式（例如，WordPress网站的 /wp-content/uploads/YYYY/MM/）
对于每张图片，记录：
- 完整URL
- 描述性名称（图片展示了什么？）
- 尺寸（从文件名或通过获取标头获得）
- 类别（照片、插图、图标、logo、贴纸）

保存此目录——整个构建过程中都会引用它。

示例目录条目：

URL: https://example.com/wp-content/uploads/2023/08/image-13-1024x768.jpeg
描述: 学生们在教室中一起学习
尺寸: 1024x768
类别: 照片
用途: 问题章节, 画廊

阶段2：内容提取

当用户提供PDF、Word文档或其他内容文档时：

文本内容

提取所有标题、正文、统计数据、引用和CTA
保留文档的章节结构——它通常映射到页面章节
注意应逐字保留的特定措辞（标语、已核实的声明、推荐语）

图片内容（请勿跳过）

识别文档中的每张图片
对于每张图片，确定其展示的内容及其所属章节
将文档中的图片与客户网站上的实际托管URL（来自阶段1的目录）进行匹配
如果文档中的图片未匹配到任何目录中的URL，标记为“需要来源”并询问用户

这之所以重要：营销文档策略性地使用图片。一张显示角色插图与大脑科学内容并排的PDF告诉您，这些插图应属于着陆页的大脑科学章节。忽略它们会产生一个文本过多、偏离重点的页面。

阶段3：图片目录与验证

在构建任何东西之前，验证计划使用的每张图片URL。

验证流程

对于每张图片URL：

获取URL并检查HTTP状态码
返回200且内容类型正确意味着URL有效
返回404或其他错误意味着URL错误

修复损坏的URL

当图片URL返回404时：

返回在线网站并按部分文件名搜索图片
获取最初包含该图片的页面源代码
查找正确路径——文件名通常有细微变化（例如，GYM_Kid-at-Desk-300x295.png 与 GYM_Kid_AtDesk-222x300.png）
切勿猜测文件名。始终对照实际服务器进行验证。

最终目录

产生一份经过验证的列表，将每个内容章节映射到其图片：

英雄区: logo.png（已验证）, character-teaching.png（已验证）, sticker-owl.png（已验证）
问题区: classroom-photo.jpeg（已验证）
脑科学区: character-1.png（已验证）, character-2.png（已验证）, character-3.png（已验证）, character-4.png（已验证）
转变区: school-kits.jpg（已验证）, home-products.jpeg（已验证）
画廊: classroom.jpeg, confidence.png, founders.jpeg（全部已验证）

阶段4：前端方向与蓝图

加载所需的前端技能栈，并完成本文顶部提到的编码前设计门控。决定生成的网页参考图像是否有用。在实现之前锁定转化流程、章节任务、视觉令牌、媒体计划、动态意图、响应式行为和验收检查。

如果方向可以不加修改地复用于无关客户，则自我否决该方向。一个连贯的艺术方向优于平均几个技能审美。

阶段5：构建

选择实现技术栈

不要将每个着陆页都塞入一种技术。根据实际项目选择：

现有仓库或模板： 保留其框架、运行时、组件、路由和资产管道，除非明确要求迁移。
静态活动页面： 当不需要组件架构或应用行为时，首选语义HTML、外部CSS和少量JavaScript。
基于组件或交互式页面： 当可复用组件、集成、状态或复杂动态行为证明其合理性时，React/Vite、Next.js或仓库现有技术栈是有效的。
在导入依赖项之前验证它们。优先使用现有项目库，而非添加流行包。

下面的旧默认值仅适用于真正全新的静态页面。

静态页面文件结构

保持简单——一个包含两个文件的目录：

project-name/
├── index.html
└── styles.css

对于简单的静态页面，避免不必要的构建工具和框架依赖。这是默认设置，并非禁止使用项目的真实技术栈。

设计系统设置（styles.css）

从提取的品牌系统开始样式表：

:root {
  /* 品牌颜色——从客户网站提取 */
  --primary: #0f4661;
  --primary-dark: #0a3347;
  --accent: #f37b78;
  --accent-hover: #e06560;
  /* ... 所有品牌颜色作为自定义属性 */

  /* 中性色阶——始终定义这些 */
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c8cdd5;
  --gray-400: #9ca3b0;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* 实用令牌 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* 过渡 */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'ExtractedFont', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-700);
  background: var(--white, #ffffff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

排版规则（关键）

糟糕的排版是AI页面看起来业余的第一原因。严格遵守以下规则：

/* 最小尺寸——绝不低于这些值 */
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } /* 16-18px */
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }       /* 36-64px */
h2 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }  /* 28-40px */
h3 { font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); }    /* 20-28px */

/* 行高——根据字号调整 */
h1, h2, h3 { line-height: 1.15; }
h4, h5, h6 { line-height: 1.25; }
p { line-height: 1.7; }

/* 限制正文宽度——每行65-75个字符 */
.content { max-width: 65ch; }

响应式断点

使用这些标准断点，但根据内容进行调整：

/* 移动端 */
@media (max-width: 640px) { }

/* 平板端 */
@media (min-width: 641px) and (max-width: 1024px) { }

/* 桌面端 */
@media (min-width: 1025px) { }

图片处理

所有图片必须包含 alt 属性
使用 <picture> 元素实现响应式图片
包含 loading="lazy" 属性（首屏以上的图片除外）
包含 width 和 height 属性以防止布局偏移

阶段6：浏览器QA

在所有设备尺寸上检查页面：

桌面端（1025px+）

标题层次是否清晰？
间距是否一致？
图片是否清晰且无像素化？
对比度是否足够？

平板端（641-1024px）

布局是否优雅地堆叠？
横向滚动条是否消失？
触摸目标是否仍然可点击？

移动端（640px及以下）

可读性：字体是否足够大？行高是否足够？
折叠：首屏上方是否传达价值主张和CTA？
间距：元素之间是否有足够的空间？
图片：在小屏幕上是否仍然清晰？

最终检查清单

所有图片已加载且可见
没有损坏的链接
悬停和焦点状态已实现
键盘导航有效（Tab、Enter、Escape）
用户放大至200%时无水平滚动
性能：总页面大小应小于1MB（无优化的大型图像除外）
有效HTML：通过W3C验证器（如果实用的话运行）

阶段7：部署与在线验证

部署

仅在被用户要求时才部署。当要求时：

确认托管位置（Vercel、Netlify、GitHub Pages、客户服务器等）
遵循平台特定的部署步骤
如果相关，将页面部署到暂存环境以供审查

在线验证

部署后：

在真正的浏览器中打开已部署的URL
验证所有资产都已加载（无404s）
确认所有链接指向正确位置
确认页面在真实设备上正确渲染
向用户报告已验证的URL和任何发现的问题

错误处理

当图片无法验证时

不要猜测。从客户网站抓取更多页面以找到正确的URL。如果找不到，将图片标记为缺失并询问用户。

当内容不一致时

如果源文档中的副本与网站副本冲突，以网站为准——它是已发布的真相来源。记录差异。

当品牌元素缺失时

如果无法从源材料中确定颜色、字体或logo，使用中性默认值，但标记它们作为待处理项。保持构建继续。

当用户请求A/B测试或变体时

为每个变体创建一个单独的目录。不要在一个项目目录中混合变体。

示例工作流

用户：“为我们新的正念应用创建着陆页。”

请求品牌URL和内容文档
从品牌中提取颜色、字体、logo
从PDF中提取内容：标题、章节、图片
将PDF图片与网站URL匹配
验证所有图片URL
提取品牌方向：不同年龄群体的不同角色插图
设计：暖色调，每个章节一个角色，首屏视频占位，圆角卡片
构建：语义HTML，外部CSS，带动态行为的GSAP
QA：检查三种设备尺寸，修复移动端间距
在用户要求时部署到Netlify
验证，然后向用户报告实时URL

限制

此技能专为构建和改善着陆页、销售页、活动页面和单页营销网站而设计。不应用于内部仪表板、管理面板、登录流程或复杂的多页面应用。
它不包含后端功能——API集成应通过单独的技能处理。
部署仅在要求时才执行；此技能不会未经请求将内容推送至线上。

输入格式

此技能通过Markdown格式的SKILL.md文件进行配置。其行为受上述定义的提示驱动。

在你喜欢的 AI 中提问

文档