像素完美网站
AI 制作的网站显得通用的原因有三个：模糊的规划、库存图片资产以及无人检查结果。此技能解决了这三个问题：资产通过 Higgsfield 量身定制，规划是一个在每个维度都有度量的像素完美提示，结果在交付前通过截图检查。
请始终按顺序执行以下步骤。
1. 阅读请求并决定（无需提问）
决定以下五项内容，并用一条简短消息说明您的选择：
- 内容及目标受众： 产品或人物，以及该页面想要说服的对象。
- 三种氛围词（例如：“平静、高端、夜间”）。
- 效果，仅一种，作为页面的标志（食谱见
references/effects.md）：- 光标： 一个角色转动头部跟随鼠标（由鼠标控制的视频）；
- 手电筒： 光标打开一个圆形区域，显示图像内部的内容；
- 循环： 照片变成循环视频，带有图层视差效果。
- 输出： 一个单一的
index.html（默认），或仅输出像素完美提示（当仅要求提示时）。 - 范围： 仅首屏（默认）或整个着陆页。
仅当不提问就无法继续时才提问（例如，真实品牌的名称）。
2. 在 Higgsfield 上生成资产
资产是让页面看起来昂贵的关键。优先级顺序：
- 用户自己的资产。
- 在 Higgsfield 上生成，通过 MCP，使用所选效果的食谱（见
references/effects.md）。 - 如果无法生成：仅使用排版和动画的页面。绝不允许使用灰色框、库存图片或虚构的 URL。
适用于任何效果的规则：
- 先生成图像，再生产视频。 图像消耗的积分少，视频消耗数十积分。仅在图像正确无误时才生成视频。生成视频前需说明成本。
- 第二张图像始终是第一张的编辑版本（使用 Nano Banana 编辑基础图像），同时要求“保持一切相同”并仅改变一项内容。从头重新生成会导致所有内容失去对齐。
- 方向相对于图像边缘，而非角色（例如：“头部转向图像的左边缘”。“他的左边”会让模型出错）。
- Nano Banana 一次只接受一个任务。 发送一个，等待完成，再发送下一个。同时发送两个任务会返回速率限制错误。
- 为文本留出半空白区域： 主体位于一半，另一半保持简洁。
- 图像背景 = 页面背景。 记录图像边缘的十六进制颜色值；该值将成为
--bg。
3. 编写像素完美提示
按照此顺序编写八个部分的提示，并使用 references/specification.md 中的模板：字体、颜色、资产、结构、动画、JavaScript、响应式、检查。
所有内容都需有具体数值。避免“漂亮渐变”或“平滑动画”这类描述：每个形容词都应配以生成它的具体数字。同时编写页面上的实际文本（标题、副标题、导航、按钮）。
如果仅要求提示，那么提示就是交付物：对照 references/review.md 检查，并在此处停止。
4. 构建
严格按照提示要求进行构建：
- 一个包含
<style>和<script>的index.html，字体通过链接引入，CDN 库使用固定版本。 - CSS 的第一条规则将背景应用于
html, body，以避免白色闪烁。 - 语义化的 HTML，真实的
<title>，alt属性，可见焦点，以及尊重prefers-reduced-motion。 - 在移动设备（无鼠标）和减少运动模式下，效果应静止在一个美观的帧上。
- 不允许使用 lorem ipsum、占位框或 emoji 作为图标。
5. 查看并修正（必需）
在桌面端（1440×900）和移动端（390×844）截取页面截图，并查看截图。使用 Playwright：npx playwright screenshot --viewport-size=1440,900 index.html desktop.png。如果没有截图工具，则说明页面未经过视觉检查，并对照 references/review.md 审查代码。
使用 references/review.md 中的评分标准打分，用具体数值修正三个最弱的点，并重新截图。最多进行三轮修正，或直到平均分超过 8 并且没有单项低于 7 分。
6. 发布（如果要求）
Higgsfield 的 MCP 可将网站部署到一个 .higgsfield.app 地址（create_website 和 deploy_website；详细步骤见 get_workflow_instructions 中的 website-builder-flow）。每次部署都会公开发布：请提前通知，并确保网站上不包含密钥或个人数据。
7. 交付
- 文件及其打开方式。
- 桌面端的最终截图。
- 两三行关于所选效果和设计选择的说明。
- 在 Higgsfield 上每项资产消耗的积分。
- 如果有临时性内容，说明需要替换的部分。
文件
references/effects.md：三个效果的食谱，包括生成提示和代码。references/specification.md：八部分像素完美提示的模板。references/review.md：评分标准和修正周期。
结构（请求 → 媒体 → 规格 → 构建 → 截图）改编自 MotionSites Web Builder，遵循 MIT 许可协议（见 LICENSE.md）。此技能的提示、食谱和代码归我们所有。