新区块
一个用于已有规则的网站上的单个区块的简短例程。它是 futuristic-web-design 技能中区块步骤的独立封装。
如果 ../futuristic-web-design/ 位于此技能旁边，其参考文件包含详细信息。根据任务需要阅读相应的文件：references/design-system.md 获取布局词汇和通用站点审计，references/ship.md 获取联系表单和电话通行证。
如果项目没有规则文件或尚未建立设计系统，请停止并使用 futuristic-web-design 从头开始。没有设计系统构建的区块正是泛泛外观的来源。
例程
- 读取规则。 打开项目规则文件（
AGENTS.md、CLAUDE.md或GEMINI.md）和主题令牌。仅使用其中定义的字体和调色板，以及项目已使用的技术栈。 - 确认内容。 在涉及事实（价格、声明、姓名、引用）之处，进行询问。切勿为真实企业编造客户、评论或统计数据。在其他地方撰写真实文案，并标出你编造的行。不要使用占位文本。
- 有目的地选择布局。 分割式、居中、全幅出血、网格、便当或非对称。用一行说明选择哪个以及原因。避免默认的居中标题加三个相同卡片：将其中一个项目突出显示，其他的偏移放置。
- 在单独的文件中构建一个组件，放在
components/或项目的等效目录下。 - 在浏览器中检查 390px、768px 和 1440px 宽度，修复发现的问题。布局可能满足所有规则但仍然看起来不对劲。
- 匹配上下间距与相邻区块保持一致。
- 用三行报告： 构建了什么、文件路径是什么、以及需要用户关注的内容（编造的文案、未连线的按钮、任何你无法验证的东西）。
只修改被要求的区块。比请求更宽的差异会隐藏哪个编辑起作用了。
布局选项
当用户要求提供选项，或无法描述他们想要什么时，从相同内容构建两个或三个变体。将每个变体放在自己的预览路由上（/preview-1、/preview-2，或用于重构的 /before 和 /after），并附上一行描述。人们更容易从选项中做出选择，而不是指定具体内容。
在用户做出选择之前，保持真实页面不变。选择后，删除其他变体及其路由，因为残留的预览路由会随网站一起发布。
区块看起来经过设计的原因
- 排版。 标题字体大且字距紧凑，阅读字体用于其他所有内容。仅使用两种字体；框架默认值（例如标签上的
font-mono）算作第三种字体。英雄区的标题最多约八个词。 - 一个主导按钮。 填充样式，使用调色板中的按钮颜色，与简报中的操作绑定。第二个操作是带箭头的文本链接或低调的轮廓按钮。两个权重相等的按钮表示未做出任何决定。
- 每个按钮都指向真实目标。 如果目标未知，使用最近的诚实目标，并在报告中将该按钮列为未连线。
- 表面和空间。 充足的留白、纯色填充、发丝细边框、可选纹理或玻璃效果。没有代替调色板的渐变。仅悬停时显示阴影。
- 图片。 以显示尺寸提供，首屏以下懒加载，包含描述图片的 alt 文本（“琥珀色精华液瓶置于浅色石头上”，而不是“图片 1”）。
- 动效。 短距离淡入和向上移动几个像素，在 500ms 内，仅一次。在
prefers-reduced-motion下，没有任何元素移动，包括平滑滚动和悬停过渡。
390px 检查
手机占据了大部分访问，因此这个宽度决定了区块是否完成。
- 正文文本可读，且没有标题横跨五个或更多行。
- 没有任何内容紧贴屏幕边缘。
- 触摸目标大约 44px 或更大。
- 没有水平滚动。
- 导航折叠到菜单切换按钮后面，该按钮可打开和关闭。
- 一行中的卡片保持价格和按钮在同一直线上，无论卡片上方文本的长度如何。在所有三个宽度下检查这一点。
联系区块
没有目的地的表单会带来危害，因为人们会认为他们的消息已经送达。其模型是信箱：对所有人开放投递，对除了所有者以外的所有人锁定阅读。
- 字段
name、email、message，保存到 Supabase 的leads表，或项目已使用的后端。 - 启用行级安全：允许匿名插入，不允许公开读取。不要在插入上链接
.select()；没有读取权限会使调用失败。 - 站点代码仅使用公钥，从
.env.local加载，该文件保持 .gitignore。 - 发送前进行验证（合理的电子邮件格式、非空消息），并解释任何拒绝原因。为成功和失败提供不同的消息。
- 垃圾邮件防御：一个必须保持空白的隐藏蜜罐字段，加上拒绝比人类输入速度更快的提交。
- 像访问者一样测试：空白消息、格式错误的电子邮件、有效提交。只有表中出现新行才证明其有效；屏幕上的确认信息并不算数。
- 当保存失败时，读取错误并更正策略。永远不要关闭行级安全，因为此表保存了人们的姓名和地址。