站点标志性设计

站点标志性设计 是做什么的？

你正在帮助某人重新设计其个人网站。目标效果是：一个在别处看不到的首屏画面，以及一个在手机、便携设备、21:9屏幕和电视上都能保持优雅的页面。

此技能描述了一种决策方式。它不提供任何模板、配色方案或现成场景——所有这些都来自于用户及其内容。

如何决策

按顺序进行四个选择，每个选择在进入下一步之前需得到用户确认。

1. 内容优先。 阅读网站已有内容，找出独特之处：一句短语、一个数字、一段经历、一个其他网站没有的板块。改版应给予这些内容更多空间。
2. 源自生活的场景。 选取用户熟悉的场所、物体或现象，将其转化为一种氛围（具体时刻、光线、深度），并以单一图形材质呈现。
3. 场景中的真实数据。 展示计算或测量得出的、即时的准确信息。正是这个细节能吸引访客再次访问。
4. 使用范围而非固定值。 每个尺寸都有最小值和最大值，页面根据其形状（窄、宽、矮）做出响应。

数字用于梳理问题。截图由用户审阅，并由用户做出最终决断。

文件

• references/decouverte.md：识别技术栈，分析现有网站，记录待保留内容。应最先执行。
• references/scene.md：与用户一起找到场景并构建它。
• references/responsive.md：所有屏幕上的布局和渲染规则。
• scripts/check-viewports.mjs：对给定URL在十种屏幕尺寸下进行测试，输出可测量的缺陷和每个尺寸的截图。

如果已安装技能 ai-patterns-audit，请在编写前端代码前阅读其 references/regles.md，并在完成时运行其审计。

流程

1. 发现：技术栈、仓库组织方式、开发和部署命令、需要保留的现有功能（references/decouverte.md）。
2. 改动前先测量：对线上站点或本地服务器运行脚本，保留截图作为起点。向用户总结已有优势以及限制网站的因素，并提供数据支撑。
3. 找到场景：每次一条信息地提出 references/scene.md 中的问题。然后给出三条各含两句话的建议。在用户做出选择前不编写任何代码。如果网站已有专属场景，则保留它：用四个条件和同一文件中的绘画规则对场景进行审核，仅修正缺失部分（竖屏裁剪、真实数据、屏幕外暂停）。
4. 构建首页：全屏场景、姓名、两句话简介、链接。其余内容从首屏下方开始。
5. 逐节处理页面其余部分，遵循 references/responsive.md。
6. 检查：在本地服务器上运行脚本，逐张审阅截图，然后仅用键盘导航，最后启用减少动画模式。展示截图，由用户视觉上做出决断。

未经同意不得改动的内容

• 用户的文本。可以重新排列和强调层级；改写需征求同意。
• 数字：必须准确，不得四舍五入或夸大。
• 已有功能：语言、亮色和暗色主题、表单、网站统计及其同意机制、RSS feed、API路由、SEO。
• 现有技术栈。仅当用户主动要求时才进行更改。

禁止事项

• 抄袭其他网站的场景，哪怕再欣赏也不行。任何与已知参考相似的建议都会被否决。
• 项目或文章列表使用相同尺寸的卡片网格。每项内容应如排印文字般呈现：数字或年份大字号显示，标题居中，加上一行后续说明。
• 在每个块上方使用大写字母加宽间距的标签。最多每个屏幕一个标签，且仅当它能传达信息时使用。
• 每个区块都使用相同的淡入效果、悬停上移效果、脉动光晕。
• 在场景之外使用渐变或装饰性光晕。
• 为场景引入过重的依赖。2D Canvas或简短着色器足够；仅当所选场景确实需要体积感时才使用3D库。
• 未经用户要求提交、推送或部署代码。

完成条件

• 脚本在十种屏幕尺寸上未报告任何水平溢出问题。
• 在2560px和3840px宽度下，场景占满整个屏幕，文本保持可读行长度。
• 在375px宽度下，姓名和标语可在不滚动的情况下完整阅读（即使有打开的横幅）。
• 启用 prefers-reduced-motion 时，场景显示为完整的静态图像。
• 无JavaScript时，首屏显示姓名、标语和链接。
• 仅场景本身（不含文本）的截图可作壁纸使用。
• 用户已查看截图并认出是自己的网站。