拓冰网站定制 
人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载本文系统讲解 garden-skills 仓库中 web-design-engineer 技能所内置的既有界面改造协议references/redesign-protocol.md。当需要修改一个已上线或已成型的产品界面时如何先分类、后审计、再动手如何在保留路由、品牌、表单、合规文案、可访问性等受保护契约的前提下用最低风险杠杆完成现代化升级。读完本文你将掌握一套可复用的既有产品界面改造决策框架模式分类、改造前审计清单、受保护契约清单、八步现代化顺序、五档校准规则、前后对比决策记录模板以及交付前的验证闭环。为什么改一个既有界面比从零开始更难从零设计一张页面Agent 拥有完全的自由度而改造一个既有产品界面最大的敌人是**顺手改**——把无关区域一起美化、把路由或表单字段静默改掉、把真实数据替换成占位假数据。这些行为会让一次小改动变成一次隐性重构带来不可预知的回归。因此web-design-engineer 技能在 SKILL.md 中明确规定在触碰任何既有产品之前先把任务分类为 Extension扩展、Redesign · Preserve重设计 · 保留、Redesign · Overhaul重设计 · 重构三种模式之一并阅读references/redesign-protocol.md审计既有视觉词汇与受保护契约然后选择能满足需求的最小改动模式。新增元素在 Extension 模式下应当与原系统难以区分。本文即是对该协议skills/web-design-engineer/references/redesign-protocol.md的完整展开并引用仓库内的 design-calibration.md、browser-acceptance.md、failure-patterns.md 等配套文档作为纵深依据。1. 先分类Extension / Redesign · Preserve / Redesign · Overhaul协议的第一步是分类模式三种模式的定义如下模式定义边界纪律Extension扩展在当前系统内部新增或修改一个有界元素匹配既有视觉词汇不要顺手改进无关表面Redesign · Preserve重设计 · 保留在保留身份、信息架构、内容语气和行为契约的前提下进行现代化偏好目标明确的渐进演化targeted evolutionRedesign · Overhaul重设计 · 重构引入新的视觉语言同时保留已约定的产品、内容与技术契约重构不等于重写一切如果保留还是重构的选择会实质性改变结果、而请求本身表述含糊协议要求只提一个聚焦的问题one focused question而不是一次性抛出大量泛泛的澄清问题。这与 SKILL.md 中按上下文决定是否提问、不要机械地触发一长串问题的总体原则一致见 SKILL.md。一个容易犯的错误是把改一个按钮直接升级成重构整个视觉系统或者反过来把重构品牌级活动页当作改两个圆角。分类决定后面所有的审计范围、受保护契约范围和改动幅度。2. 审计先于编辑四维现状盘点确定模式之后协议要求在动手编辑之前记录当前状态——记入项目笔记或一份简洁的重设计简报redesign brief。审计覆盖四个维度2.1 视觉系统Visual system色彩角色color roles与实际使用比例字体家族、字阶scale、字重与行长line lengths间距节奏与容器宽度spacing rhythm and container widths圆角、边框、阴影与高度elevation规则图标、插画、摄影与图像处理方式动效时长、缓动曲线、触发条件与反馈风格。2.2 产品与内容Product and content页面树、导航、关键旅程与转化路径既有内容块及其用途品牌语气、法律文案、本地化与真实数据加载、空、错误、禁用与权限等状态。2.3 技术契约Technical contracts路由、slug、锚点与深链接表单字段名、顺序、校验与自动填充预期分析事件、data 属性、测试选择器与实验钩子组件 API 与下游消费者可访问性语义、键盘行为、焦点顺序与屏幕阅读器宣告SEO 元数据、canonical URL、结构化数据与社会卡片。2.4 质量债分类Quality debt审计结束后把观察到的现象分成三类保留Preserve可识别性强或属契约关键的既有优势改进Improve层级、间距、对比度、响应式或工艺上的弱点移除Remove无支撑的杂乱、坏掉的模式、死交互或捏造的内容。这条绝不捏造的红线与 SKILL.md 的占位符哲学一致缺图标用[icon]占位、缺数据主动向用户索取占位符传递此处需要真实材料的信号而假数据传递我在偷工减料的信号见 SKILL.md。同理failure-patterns.md 中把装饰性信任剧场编造指标、证言、Logo、安全徽章、被谁使用声明列为必须避免的失败模式。3. 受保护契约绝不能静默改动的清单协议为改造设定了硬性边界。以下项目绝不能静默改动路由结构、slug、锚点 ID 或主导航标签品牌 Logo、字标或身份关键资产表单字段名 / 顺序 / 提交行为法律、同意、隐私、定价或合规文案分析事件、选择器与实验标识符已有的可访问性成果公开组件 API 或持久化状态键用户提供的内容与真实数据。当请求的结果确实需要改动某个受保护契约时协议要求先请求授权Ask for authorization。这对应 SKILL.md 的预交付清单中既有工作模式被正确分类保留 / 扩展契约没有被静默改变这一检查项见 SKILL.md。为什么这些是契约而不是可优化的细节因为它们中的每一项都连接着外部世界深链接被改外链与书签失效表单字段名被改后端与自动化脚本失效分析选择器被改数据管线断裂合规文案被改可能直接构成法律风险。契约是跨团队、跨系统、跨时间的接口不是本页面的装饰。4. 现代化顺序始终从最低风险杠杆开始协议给出了八步现代化顺序核心原则是先应用能解决问题的、风险最低的杠杆然后重新评估而不是一口气做完所有改动修正功能性与可访问性故障修复层级与排版hierarchy and typography规范化间距、对齐与响应式行为整合设计令牌tokens清除孤立样式rogue styling改进状态与交互反馈添加有依据的动效justified motion重组 hero 或关键区块仅当区块无法修复时才整体替换。在Preserve 模式下简报满足即停不要把渐进式工作升级成一场作品集式重设计portfolio redesign。这条纪律是防止范围蔓延的核心——每一步之后都重新评估问题是否已解决解决了就收手。这个顺序与设计校准文档中的冲突消解逻辑互相印证例如高动效 高密度时应让过渡和焦点动起来、而不是让每个元素都动可访问性约束高于美学分数降低动效、厘清层级、保住对比度无需请求许可见 design-calibration.md。5. 档位引导用五档校准约束改造幅度档位dials来自配套的 design-calibration.md共五个取值 1–10 的整数档位含义Visual Variance视觉变化度构图上偏离熟悉模式的程度1–3 稳定网格4–6 少量不对称7–8 强艺术指导9–10 实验构图Motion Intensity动效强度通过时间承载多少语义1–2 纯状态反馈3–4 悬停/聚焦/短过渡5–7 序列揭示8–10 电影式转场Information Density信息密度每屏有用信息量1–3 画廊式4–6 均衡营销密度7–8 分析型9–10 驾驶舱式Asset Dependence资产依赖结果对真实图像/截图/插画/身份资产的依赖度7 以上必须先盘货资产不许用装饰 CSS 掩盖资产缺失Brand Fidelity品牌保真度既有身份与交互语言必须被保留的严格程度9–10 为扩展级保真redesign-protocol 的Dial Guidance一节给出了三种模式下的档位纪律Extension扩展匹配现有全部档位Brand Fidelity 设为 10。新元素应像原系统原生的产物。Redesign · Preserve保留密度与资产档位保持稳定变化度 / 动效至多调整 1 个点除非被明确要求。Redesign · Overhaul重构从简报中推导新的变化度 / 动效档位但保留一张内容密度图content-density map确保信息不丢失。设计校准文档的预设表中与改造相关的三个预设是见 design-calibration.md简报类型VarianceMotionDensityAssetsFidelity既有产品扩展existing-product extension匹配匹配匹配匹配10重设计 · 保留Redesign · Preserve当前 1 上限当前 1 上限匹配匹配9重设计 · 重构Redesign · Overhaul6–84–7匹配内容6–95–7校准完成与否的检验标准必须能从每个档位指向工件中具体可见的后果——如果改一个分数不会改变计划那就删掉这个分数或把映射关系写明确见 design-calibration.md。6. 前后对比计划一份决策记录不是设计长文对于非平凡non-trivial的重设计协议要求在动手前陈述一份Before-and-After Plan模板如下Mode: 模式Extension / Preserve / Overhaul Preserve: 要保留的既有优势 / 契约 Improve: 要改进的弱点 Remove: 要移除的杂乱 / 死交互 / 假内容 Protected contracts:受保护契约清单 Design Read dials: 设计解读 五档取值 Highest-risk change: 风险最高的改动 Rollback / fallback: 回滚 / 兜底方案协议特别强调这是一份决策记录decision record不是一篇长篇设计论文。它让后续的评审者、协作者乃至未来的 Agent 都能一眼看清这次改造动了什么、不动什么、最危险的是什么、出问题怎么退回去。这与 SKILL.md 中每次交付前在 Markdown 中声明设计系统的工作流一脉相承见 SKILL.md。7. 验证默认自检 按需浏览器验收协议的验证部分明确了两种验证手段的边界默认的交付前自检pre-delivery self-check通过检查inspection确认请求范围与受保护契约不需要启动浏览器。SKILL.md 给出了这份轻量清单的完整条目包括设计解读存在且五档影响过真实决策、模式分类正确且未静默改契约、无缺失引用 / 无损坏资产路径 / 无非法标记、目标视口有响应式规则、交互组件覆盖 hover/focus/active/disabled/loading/empty/error 状态、颜色全部来自声明的设计系统无孤立色相、无scrollIntoView、React 项目无const styles {...}全局对象、无 AI 俗套紫粉渐变 / emoji 滥用 / 左侧边框卡片 / Inter/Roboto、无填充内容与假数据见 SKILL.md。可执行浏览器验收executable browser acceptance仅当用户明确要求验收 / QA / 浏览器测试 / 响应式检查 / 视觉回归等场景时才运行。不能从buildfinishpolishverify your work这类措辞中推断出浏览器验收请求。一旦触发遵循 browser-acceptance.md并且必须包含对保留旅程preserved journeys的回归检查——这正是受保护契约在验证环节的落点。browser-acceptance.md 给出了验收的完整流程见 browser-acceptance.md触发门槛Trigger Gate只有明确的验收类请求才运行仅要求设计评审时使用 critique-guide.md不得悄悄扩大为浏览器验收。验收契约Acceptance Contract从请求与项目中推断入口 URL / 本地命令、关键路由 / 屏幕、主要交互路径、所需视口、目标浏览器、以及用户要证据 / 修复 / 仅报告。使用项目既有 dev 命令与依赖不替换技术栈、不擅自安装新测试框架。默认视口小屏手机 390×844、平板 768×1024、小笔记本 1280×720、桌面 1440×900固定 16:9 工件还需额外测一个更小的外层视口以验证不变形缩放。安全启动检查package.json与项目文档、优先复用已运行的服务器、等待真实就绪信号、记录实际 URL 与构建模式、不改动生产服务与外部数据。自动化检查运行时无致命错误、无新增可操作 console 错误、本地资源与主网络请求成功、无 hydration 失配、布局无意外横向溢出、导航与主 CTA 可达、文本不裁切碰撞、图像保真、固定画布不变形缩放、交互主链接与按钮动作正确、键盘焦点可见且顺序合理、表单有标签/校验/错误/提交反馈、浮层可开关且不困住用户、加载/空/错误/禁用状态按范围演练、动效与偏好动画完成且不阻塞交互、reduced-motion 下内容与任务仍可完成、可暂停自动播放/循环动效。视觉检查在每个要求视口与关键状态截图取证检查层级与焦点顺序、间距节奏与对齐、设计令牌漂移、重复布局公式、对比度与可读性、难看的折痕、孤立控件与大片意外空白、与参考图/基线的差异。有正式基线则做对比没有则只能叫视觉验收而非视觉回归。修复循环记录失败与复现条件 → 做最小因果修复 → 在相同视口 / 状态重跑失败项 → 当改动可能波及其他区域时重跑邻近冒烟路径 → 契约通过即停或报告具体阻塞项。仅报告模式下不编辑文件按严重度排序输出有证据的发现。验收报告保持简短可复现——验收范围、环境 / URL、视口 / 浏览器、覆盖路径、通过项、已修复项、剩余问题、证据。永远不要仅凭代码检查就声称通过浏览器验收如果可执行验收没能跑起来要精确说明哪些验证了、哪些没有。结语改造的纪律就是产品的边界回顾整个协议它的核心不是如何改得更漂亮而是**在哪些边界内改**先分类Extension / Preserve / Overhaul、再审计视觉 / 产品内容 / 技术契约 / 质量债、锁定受保护契约、按八步顺序从最低风险杠杆开始、用五档校准约束幅度、用决策记录交代前后对比、最后按验证闭环收尾。整套流程服务于一个朴素的工程事实——既有的路由、品牌、表单、文案、分析与可访问性成果是用户资产而非待改装饰。遵循这份协议Agent 在改造既有界面时才能做到该进的进、该守的守把一次视觉升级变成可控的增量投资而不是一次不可回退的冒险。如需继续深入可进一步阅读同一技能目录下的 design-calibration.md五档校准的完整分档表与冲突消解、browser-acceptance.md可执行验收的完整流程、failure-patterns.md按工件类型的失败模式目录以及 SKILL.md技能主工作流与预交付清单。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐Dieter Rams / Braun 设计配方实战用 garden-skills 的 web-design-engineer 打造工业级硬件产品页Dieter Rams / Braun 设计配方实战用 garden skills 的 web design engineer 打造工业级硬件产品页 本指南以人工智能AI 技能/插件提示工程DotNetGuide代码重构改善既有代码的设计DotNetGuide代码重构改善既有代码的设计 引言重构的迫切性与价值 你是否曾面对这样的困境项目初期优雅的代码随着迭代变得混乱不堪修改一行代码引发连文档教程知识库示例工程p1xt-guides 实战指南基于 XYZ Reader 改造掌握 Android Material Design 界面设计p1xt guides 实战指南基于 XYZ Reader 改造掌握 Android Material Design 界面设计 本篇技术指南来自 p1xt g教程文档上一篇微服务生态系统完整指南如何使用gRPC和Thrift构建企业级分布式系统下一篇ytDownloader单元测试实践基于Jest的download模块测试用例编写创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 既有界面与重设计协议：garden-skills web-design-engineer 的 Extension / Preserve / Overhaul 分类改造实战指南
人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载本文系统讲解 garden-skills 仓库中 web-design-engineer 技能所内置的既有界面改造协议references/redesign-protocol.md。当需要修改一个已上线或已成型的产品界面时如何先分类、后审计、再动手如何在保留路由、品牌、表单、合规文案、可访问性等受保护契约的前提下用最低风险杠杆完成现代化升级。读完本文你将掌握一套可复用的既有产品界面改造决策框架模式分类、改造前审计清单、受保护契约清单、八步现代化顺序、五档校准规则、前后对比决策记录模板以及交付前的验证闭环。为什么改一个既有界面比从零开始更难从零设计一张页面Agent 拥有完全的自由度而改造一个既有产品界面最大的敌人是**顺手改**——把无关区域一起美化、把路由或表单字段静默改掉、把真实数据替换成占位假数据。这些行为会让一次小改动变成一次隐性重构带来不可预知的回归。因此web-design-engineer 技能在 SKILL.md 中明确规定在触碰任何既有产品之前先把任务分类为 Extension扩展、Redesign · Preserve重设计 · 保留、Redesign · Overhaul重设计 · 重构三种模式之一并阅读references/redesign-protocol.md审计既有视觉词汇与受保护契约然后选择能满足需求的最小改动模式。新增元素在 Extension 模式下应当与原系统难以区分。本文即是对该协议skills/web-design-engineer/references/redesign-protocol.md的完整展开并引用仓库内的 design-calibration.md、browser-acceptance.md、failure-patterns.md 等配套文档作为纵深依据。1. 先分类Extension / Redesign · Preserve / Redesign · Overhaul协议的第一步是分类模式三种模式的定义如下模式定义边界纪律Extension扩展在当前系统内部新增或修改一个有界元素匹配既有视觉词汇不要顺手改进无关表面Redesign · Preserve重设计 · 保留在保留身份、信息架构、内容语气和行为契约的前提下进行现代化偏好目标明确的渐进演化targeted evolutionRedesign · Overhaul重设计 · 重构引入新的视觉语言同时保留已约定的产品、内容与技术契约重构不等于重写一切如果保留还是重构的选择会实质性改变结果、而请求本身表述含糊协议要求只提一个聚焦的问题one focused question而不是一次性抛出大量泛泛的澄清问题。这与 SKILL.md 中按上下文决定是否提问、不要机械地触发一长串问题的总体原则一致见 SKILL.md。一个容易犯的错误是把改一个按钮直接升级成重构整个视觉系统或者反过来把重构品牌级活动页当作改两个圆角。分类决定后面所有的审计范围、受保护契约范围和改动幅度。2. 审计先于编辑四维现状盘点确定模式之后协议要求在动手编辑之前记录当前状态——记入项目笔记或一份简洁的重设计简报redesign brief。审计覆盖四个维度2.1 视觉系统Visual system色彩角色color roles与实际使用比例字体家族、字阶scale、字重与行长line lengths间距节奏与容器宽度spacing rhythm and container widths圆角、边框、阴影与高度elevation规则图标、插画、摄影与图像处理方式动效时长、缓动曲线、触发条件与反馈风格。2.2 产品与内容Product and content页面树、导航、关键旅程与转化路径既有内容块及其用途品牌语气、法律文案、本地化与真实数据加载、空、错误、禁用与权限等状态。2.3 技术契约Technical contracts路由、slug、锚点与深链接表单字段名、顺序、校验与自动填充预期分析事件、data 属性、测试选择器与实验钩子组件 API 与下游消费者可访问性语义、键盘行为、焦点顺序与屏幕阅读器宣告SEO 元数据、canonical URL、结构化数据与社会卡片。2.4 质量债分类Quality debt审计结束后把观察到的现象分成三类保留Preserve可识别性强或属契约关键的既有优势改进Improve层级、间距、对比度、响应式或工艺上的弱点移除Remove无支撑的杂乱、坏掉的模式、死交互或捏造的内容。这条绝不捏造的红线与 SKILL.md 的占位符哲学一致缺图标用[icon]占位、缺数据主动向用户索取占位符传递此处需要真实材料的信号而假数据传递我在偷工减料的信号见 SKILL.md。同理failure-patterns.md 中把装饰性信任剧场编造指标、证言、Logo、安全徽章、被谁使用声明列为必须避免的失败模式。3. 受保护契约绝不能静默改动的清单协议为改造设定了硬性边界。以下项目绝不能静默改动路由结构、slug、锚点 ID 或主导航标签品牌 Logo、字标或身份关键资产表单字段名 / 顺序 / 提交行为法律、同意、隐私、定价或合规文案分析事件、选择器与实验标识符已有的可访问性成果公开组件 API 或持久化状态键用户提供的内容与真实数据。当请求的结果确实需要改动某个受保护契约时协议要求先请求授权Ask for authorization。这对应 SKILL.md 的预交付清单中既有工作模式被正确分类保留 / 扩展契约没有被静默改变这一检查项见 SKILL.md。为什么这些是契约而不是可优化的细节因为它们中的每一项都连接着外部世界深链接被改外链与书签失效表单字段名被改后端与自动化脚本失效分析选择器被改数据管线断裂合规文案被改可能直接构成法律风险。契约是跨团队、跨系统、跨时间的接口不是本页面的装饰。4. 现代化顺序始终从最低风险杠杆开始协议给出了八步现代化顺序核心原则是先应用能解决问题的、风险最低的杠杆然后重新评估而不是一口气做完所有改动修正功能性与可访问性故障修复层级与排版hierarchy and typography规范化间距、对齐与响应式行为整合设计令牌tokens清除孤立样式rogue styling改进状态与交互反馈添加有依据的动效justified motion重组 hero 或关键区块仅当区块无法修复时才整体替换。在Preserve 模式下简报满足即停不要把渐进式工作升级成一场作品集式重设计portfolio redesign。这条纪律是防止范围蔓延的核心——每一步之后都重新评估问题是否已解决解决了就收手。这个顺序与设计校准文档中的冲突消解逻辑互相印证例如高动效 高密度时应让过渡和焦点动起来、而不是让每个元素都动可访问性约束高于美学分数降低动效、厘清层级、保住对比度无需请求许可见 design-calibration.md。5. 档位引导用五档校准约束改造幅度档位dials来自配套的 design-calibration.md共五个取值 1–10 的整数档位含义Visual Variance视觉变化度构图上偏离熟悉模式的程度1–3 稳定网格4–6 少量不对称7–8 强艺术指导9–10 实验构图Motion Intensity动效强度通过时间承载多少语义1–2 纯状态反馈3–4 悬停/聚焦/短过渡5–7 序列揭示8–10 电影式转场Information Density信息密度每屏有用信息量1–3 画廊式4–6 均衡营销密度7–8 分析型9–10 驾驶舱式Asset Dependence资产依赖结果对真实图像/截图/插画/身份资产的依赖度7 以上必须先盘货资产不许用装饰 CSS 掩盖资产缺失Brand Fidelity品牌保真度既有身份与交互语言必须被保留的严格程度9–10 为扩展级保真redesign-protocol 的Dial Guidance一节给出了三种模式下的档位纪律Extension扩展匹配现有全部档位Brand Fidelity 设为 10。新元素应像原系统原生的产物。Redesign · Preserve保留密度与资产档位保持稳定变化度 / 动效至多调整 1 个点除非被明确要求。Redesign · Overhaul重构从简报中推导新的变化度 / 动效档位但保留一张内容密度图content-density map确保信息不丢失。设计校准文档的预设表中与改造相关的三个预设是见 design-calibration.md简报类型VarianceMotionDensityAssetsFidelity既有产品扩展existing-product extension匹配匹配匹配匹配10重设计 · 保留Redesign · Preserve当前 1 上限当前 1 上限匹配匹配9重设计 · 重构Redesign · Overhaul6–84–7匹配内容6–95–7校准完成与否的检验标准必须能从每个档位指向工件中具体可见的后果——如果改一个分数不会改变计划那就删掉这个分数或把映射关系写明确见 design-calibration.md。6. 前后对比计划一份决策记录不是设计长文对于非平凡non-trivial的重设计协议要求在动手前陈述一份Before-and-After Plan模板如下Mode: 模式Extension / Preserve / Overhaul Preserve: 要保留的既有优势 / 契约 Improve: 要改进的弱点 Remove: 要移除的杂乱 / 死交互 / 假内容 Protected contracts:受保护契约清单 Design Read dials: 设计解读 五档取值 Highest-risk change: 风险最高的改动 Rollback / fallback: 回滚 / 兜底方案协议特别强调这是一份决策记录decision record不是一篇长篇设计论文。它让后续的评审者、协作者乃至未来的 Agent 都能一眼看清这次改造动了什么、不动什么、最危险的是什么、出问题怎么退回去。这与 SKILL.md 中每次交付前在 Markdown 中声明设计系统的工作流一脉相承见 SKILL.md。7. 验证默认自检 按需浏览器验收协议的验证部分明确了两种验证手段的边界默认的交付前自检pre-delivery self-check通过检查inspection确认请求范围与受保护契约不需要启动浏览器。SKILL.md 给出了这份轻量清单的完整条目包括设计解读存在且五档影响过真实决策、模式分类正确且未静默改契约、无缺失引用 / 无损坏资产路径 / 无非法标记、目标视口有响应式规则、交互组件覆盖 hover/focus/active/disabled/loading/empty/error 状态、颜色全部来自声明的设计系统无孤立色相、无scrollIntoView、React 项目无const styles {...}全局对象、无 AI 俗套紫粉渐变 / emoji 滥用 / 左侧边框卡片 / Inter/Roboto、无填充内容与假数据见 SKILL.md。可执行浏览器验收executable browser acceptance仅当用户明确要求验收 / QA / 浏览器测试 / 响应式检查 / 视觉回归等场景时才运行。不能从buildfinishpolishverify your work这类措辞中推断出浏览器验收请求。一旦触发遵循 browser-acceptance.md并且必须包含对保留旅程preserved journeys的回归检查——这正是受保护契约在验证环节的落点。browser-acceptance.md 给出了验收的完整流程见 browser-acceptance.md触发门槛Trigger Gate只有明确的验收类请求才运行仅要求设计评审时使用 critique-guide.md不得悄悄扩大为浏览器验收。验收契约Acceptance Contract从请求与项目中推断入口 URL / 本地命令、关键路由 / 屏幕、主要交互路径、所需视口、目标浏览器、以及用户要证据 / 修复 / 仅报告。使用项目既有 dev 命令与依赖不替换技术栈、不擅自安装新测试框架。默认视口小屏手机 390×844、平板 768×1024、小笔记本 1280×720、桌面 1440×900固定 16:9 工件还需额外测一个更小的外层视口以验证不变形缩放。安全启动检查package.json与项目文档、优先复用已运行的服务器、等待真实就绪信号、记录实际 URL 与构建模式、不改动生产服务与外部数据。自动化检查运行时无致命错误、无新增可操作 console 错误、本地资源与主网络请求成功、无 hydration 失配、布局无意外横向溢出、导航与主 CTA 可达、文本不裁切碰撞、图像保真、固定画布不变形缩放、交互主链接与按钮动作正确、键盘焦点可见且顺序合理、表单有标签/校验/错误/提交反馈、浮层可开关且不困住用户、加载/空/错误/禁用状态按范围演练、动效与偏好动画完成且不阻塞交互、reduced-motion 下内容与任务仍可完成、可暂停自动播放/循环动效。视觉检查在每个要求视口与关键状态截图取证检查层级与焦点顺序、间距节奏与对齐、设计令牌漂移、重复布局公式、对比度与可读性、难看的折痕、孤立控件与大片意外空白、与参考图/基线的差异。有正式基线则做对比没有则只能叫视觉验收而非视觉回归。修复循环记录失败与复现条件 → 做最小因果修复 → 在相同视口 / 状态重跑失败项 → 当改动可能波及其他区域时重跑邻近冒烟路径 → 契约通过即停或报告具体阻塞项。仅报告模式下不编辑文件按严重度排序输出有证据的发现。验收报告保持简短可复现——验收范围、环境 / URL、视口 / 浏览器、覆盖路径、通过项、已修复项、剩余问题、证据。永远不要仅凭代码检查就声称通过浏览器验收如果可执行验收没能跑起来要精确说明哪些验证了、哪些没有。结语改造的纪律就是产品的边界回顾整个协议它的核心不是如何改得更漂亮而是**在哪些边界内改**先分类Extension / Preserve / Overhaul、再审计视觉 / 产品内容 / 技术契约 / 质量债、锁定受保护契约、按八步顺序从最低风险杠杆开始、用五档校准约束幅度、用决策记录交代前后对比、最后按验证闭环收尾。整套流程服务于一个朴素的工程事实——既有的路由、品牌、表单、文案、分析与可访问性成果是用户资产而非待改装饰。遵循这份协议Agent 在改造既有界面时才能做到该进的进、该守的守把一次视觉升级变成可控的增量投资而不是一次不可回退的冒险。如需继续深入可进一步阅读同一技能目录下的 design-calibration.md五档校准的完整分档表与冲突消解、browser-acceptance.md可执行验收的完整流程、failure-patterns.md按工件类型的失败模式目录以及 SKILL.md技能主工作流与预交付清单。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐Dieter Rams / Braun 设计配方实战用 garden-skills 的 web-design-engineer 打造工业级硬件产品页Dieter Rams / Braun 设计配方实战用 garden skills 的 web design engineer 打造工业级硬件产品页 本指南以人工智能AI 技能/插件提示工程DotNetGuide代码重构改善既有代码的设计DotNetGuide代码重构改善既有代码的设计 引言重构的迫切性与价值 你是否曾面对这样的困境项目初期优雅的代码随着迭代变得混乱不堪修改一行代码引发连文档教程知识库示例工程p1xt-guides 实战指南基于 XYZ Reader 改造掌握 Android Material Design 界面设计p1xt guides 实战指南基于 XYZ Reader 改造掌握 Android Material Design 界面设计 本篇技术指南来自 p1xt g教程文档上一篇微服务生态系统完整指南如何使用gRPC和Thrift构建企业级分布式系统下一篇ytDownloader单元测试实践基于Jest的download模块测试用例编写创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考