使用 AI 主动开发和改进前端

English | 中文

入口：frontend-quality Skill。 这是一套开发者侧的轻量指导，不是安装到科研任务里的运行时 Skill，也不会 把 Impeccable 或 Vercel 的完整工具链装进项目。

怎么使用

支持 .agents/skills 的开发工具可通过 Skill 描述发现它；仓库现有 .claude/skills 别名继续复用同一份内容。新增的 apps/web/AGENTS.md 也为前端开发提供入口。 具体是否自动发现取决于工具配置；未发现时，直接让 AI 阅读该文件即可。 不需要 Hook，也不承诺任何工具一定会自动调用。

可以把下面这段作为前端需求的开头，再接具体功能：

按照 .agents/skills/frontend-quality/SKILL.md 开发这次前端改动。
先阅读相关组件和样式，沿用现有设计系统，然后直接实现需求。
全面检查视觉美观、排版、层级、密度、交互、可访问性和适配，主动修复本次范围内的问题。
AI 的检查不受 Actions 硬约束清单限制；规则通过不代表界面已经足够好。
浏览器可用时实际操作并查看窄屏、低高度和宽屏状态，不要只输出审计建议。
区分规则检测结果、AI 判断的设计/体验问题和可选风格建议，报告实际结果及未验证范围。
只有 Actions 中的确定性规则检查限定为稳定硬约束，不把 AI 审美判断直接变成通过/失败。
不要安装 Impeccable 或添加 Hook；本次开发没有要求接入时，不修改 CI。

一般样式决策不需要额外审批；新依赖、整站改版、无关功能与生产环境操作 仍然不在这段指令的授权范围内。现有 CONTRIBUTING 和 E2E 约定保持不变。

针对 ScienceDiscovery 做了什么

保留 React/Vite 与自有 CSS，不引入 Tailwind，也不强行更换断点体系。 参考基线为 cc974a14468cbdfd66c76f2720ebd751aefb1cdd，现有全局断点 包括 600、900、1180 CSS px，并已有组件级断点和容器查询。 文档里的 320–3840 CSS px 是适配目标与选例范围，不代表当前产品已经全部通过。

指导围绕项目/会话导航、流式对话、输入与停止操作、工具时间线、权限确认、 文件与产物预览、科学图表和设置弹窗组织。保留科研数据精度、单位和来源； 不能通过裁掉错误信息、缩小整页、删除功能或四舍五入数据来让界面“适配”。

正文可以换行，代码、宽表格、公式和图形可以局部滚动。收起的面板、弹窗遮罩、 虚拟列表外的内容不是天然的错误。省略文件名时，要有实际可操作的完整查看入口。

AI 全面检查并主动改进，不受硬约束清单限制

AI 应像前端开发者和设计评审者一样，结合实际代码、界面截图和操作过程， 检查与任务有关的所有前端质量问题，而不是只看元素是否溢出或被遮挡。 检查内容包括但不限于：美观、配色、字体、间距、对齐、层级、信息密度、 交互流程、反馈文案、可访问性、加载/空/错误状态、感知性能和多尺寸适配。

这些方面不一定适合稳定的规则检测，但仍可能是真正需要修复的设计或体验问题。 AI 应主动修复授权范围内的问题，不能因为没有 FQ 编号就忽略或降级成“仅供参考”， 也不能在规则检查通过后停止评审。纯粹的个人风格偏好则与实际问题分开说明。 检查不限于硬约束，不等于授权修改无关功能或擅自进行整站改版。

Actions 中的确定性规则检查只覆盖稳定硬约束

下面清单只限定新增前端视觉/布局规则检查的自动判定范围，不限定 AI 的检查内容。 不使用 AI 的美观评分、风格偏好或主观结论直接决定 Actions 通过/失败。 这个限制不影响仓库已有的 lint、类型、功能、安全等检查。

这些检查需要指出“当前状态的哪个内容应怎样显示”，不是遍历所有 DOM 后猜测。 正常省略、局部滚动、弹窗和禁用按钮按状态分别处理，不使用全局忽略规则。 选择器无效、匹配不唯一或不支持的复杂渲染会报告 BLOCKED，不会假装通过。 PASS 只覆盖明确选择的检查，不能证明整个页面没有任何视觉问题。

Actions 规则不设置字体黑名单、卡片数量限制、美观分数或间距整除规则。 AI 仍应检查字体是否合适、卡片组织是否合理、间距层级是否清楚，并主动改进。 “不作为 Actions 规则”不等于“不检查、不修复”，也不等于“只能提可选建议”。

可选检查和验证

本包仍未新增或修改 Actions workflow、Hook、默认测试发现或强制审批流程。 它明确了后续接入 Actions 时的规则边界，不代表已完成 CI 接入。 AI 在本地开发时也可调用同一辅助函数，但不能把它当作自己的完整检查清单。

可在已有 Playwright 用户旅程里调用 checkLayout， 复用现有页面、隔离环境和报告。无需安装新的检测器或调用模型 API。 接入示例、测试尺寸和误报边界在 验证指导。

完成仓库已有 .e2e 环境初始化后，可以手动运行辅助函数自身的测试：

node .agents/skills/frontend-quality/scripts/selftest.mjs

这只测试本地 HTML 好/坏样本，不启动产品，不算 ScienceDiscovery 的端到端验收， 也不接入默认测试发现。真实产品仍需要实际用户旅程、渲染截图和适用的真机检查。

来源与维护

NOTICE.md 记录改编来源与删除内容； sources.json 固定本次读取的 上游文件 Blob SHA。许可证随 Skill 一起保留。不在每次开发时动态下载上游规范。