frontend-design

创建符合产品定位的 React 和 Tailwind 界面，保留明确约束，并清楚呈现主要任务。只阅读与所请求工作相关的参考资料。

匹配所请求的范围

对于建议、工作流比较或询问应使用哪项技能的问题，请直接回答，不要执行这些技能。不要编辑文件、持久化上下文、创建报告或开始访谈。对于明确的审查，请检查并报告。仅在用户提出要求或已授权时实施修复。在授权范围内复用先前的授权。

上下文收集协议

仅收集所需的上下文，以作出所请求的决策。按以下顺序进行：

1. 复用用户当前的指示、先前的回答，以及已授予的任何方向或创作权限。
2. 使用 项目上下文 确定目标应用的上下文。阅读其 .better-react-web-ui.md、适用的上级默认设置、匹配的页面简介和现有设计文档。同一范围内的旧版文件可作为备用输入。
3. 检查受影响的代码、调用方、资源和现有设计系统。将观察到的实现视为当前系统的证据，而非未明确说明的用户需求的证明。
4. 仅针对会实质影响工作的缺失信息提问。标明合理假设，并在授权范围内采用可撤销的选择继续推进。

对于新的设计方向，请确定受众、预期任务和品牌语气。在获得明确的创作授权后，无需再次征求批准，即可选择并记录合理假设。绝不捏造用户的回答或产品事实。

对于专注的修复，请依据相关代码和约束。修复键盘焦点、溢出或已测量的性能缺陷时，不要要求先进行品牌访谈。

当用户要求持久化项目上下文，或大量设计工作需要记录缺失的上下文时，使用 $setup。仅仅缺少上下文文件并不意味着必须进行设置。更新上下文时，应保留现有内容。

设置优先级

除非用户要求更改，否则保留现有视觉系统。对于开放的设计方向，通过 设计方向 选择连贯的风格。在添加装饰之前，先用间距、分组、字体和对比度建立层级。

区分要求与偏好：

• 保留无障碍性、真实内容、可用的控件和明确的用户约束。
• 将审美指导视为开放决策的默认参考。只要符合品牌和任务，Inter、Arial、系统字体、纯白、纯黑、渐变、卡片和熟悉的布局都可以使用。
• 使用 AI 俗套检测 来识别泛化的构图、缺乏依据的说法或不必要的装饰。字体或颜色本身并非缺陷。
• 即使营销页面采用富有表现力的图像或动效，也要确保核心工作流熟悉且易读。

清晰度、任务完成和错误预防优先于视觉新奇感。绝不捏造客户、评价、指标、能力、紧迫感或稀缺性。清楚说明价格、同意事项、破坏性后果和取消途径。参见 界面诚信。

与实现保持一致

在编辑前，先检测现有的 React 框架、Tailwind 配置、组件、令牌和数据流。复用合适的代码和已安装的依赖项。尊重新项目明确指定的技术栈选择。仅在选择未指定时，才使用框架默认值。

在做出框架相关决策前，请查阅框架官方文档。对于 Next.js，如有可用文档，请阅读 node_modules/next/dist/docs/ 中相关的随附文档。优先参考与当前版本匹配的文档，而不是依赖记忆。

当现有组件或区块适合任务时，请参考组件与区块策略和 React shadcn 加速器。对于自定义基础组件，请阅读组件结构和组件无障碍性。保留成熟库的语义，不要为了外观而重写。

在 Astro 项目中，仅为需要交互的部分添加 React Islands。实现复杂度应与所需结果相称。

实现所需结果

1. 确定目标页面、流程或组件，以及访客在该页面上的任务。保留固定内容、区块顺序和交互行为。对于较大规模的工作，请复用或准备项目上下文中所述的可选页面简报。
2. 在用户授权范围内选择方案。对于单个指定产物，直接实现。用户要求提供备选方案时，使用 $add-ui 进行比较，并遵循指定数量。用户已选定或委托方案后，不要再添加选择确认环节。
3. 使用真实源文件和可用操作，构建最精简的完整版本。添加装饰细节前，先建立约束明确的间距、字体、颜色、圆角和阴影系统。遵循已批准的视觉参考时，请使用参考还原度。
4. 覆盖相关的加载、空白、错误、成功和响应式状态。仅当失败后可恢复，且不会误导用户或导致数据丢失时，才使用乐观更新。
5. 在目标项目中验证结果。说明所做的更改、执行的检查以及尚未测试的行为。

对于缺失的重要上下文，请使用设计流程和 UX 策略。不要将针对性修复变成重新设计。

按任务加载参考资料

任务	参考资料
着陆页或营销页面	着陆页叙事、首屏区域、营销文案写作、社会认同
层级与布局	层级检查清单、间距系统、空间设计
排版	排版、文本层级与可读性
颜色与状态	颜色与对比度、语义颜色、色盲用户体验
图像与纵深	图像处理、表面分隔、高程系统
动画或滚动	动效设计、着陆页叙事
响应式行为	响应式设计、容器查询
控件、表单与恢复	交互设计、组件无障碍、错误恢复
文案与产品决策	UX 写作、界面真实性、定价与套餐
最终审查	React 和 Tailwind 实现审查、前后对比示例

如需身份验证、商务、数据可视化、新手引导、权限和本地化等专题，请查阅参考资料索引。不要为每项任务加载整个参考资料库。

交付前验证

按照视觉验证检查证据、修复状态和工具不可用时的处理方式。根据受影响的功能调整以下检查的范围。

• 检查主要操作是否清晰且可用。确保标签和内容真实准确。
• 检查桌面端和手机端布局、长内容及缩放情况下是否存在裁切、溢出或功能缺失。
• 测试键盘操作、可见焦点、无障碍名称、对比度及相关错误恢复。
• 启用减少动态效果后，确保所有有意义的内容仍然可见且可访问。装饰性动画不得妨碍用户访问内容。
• 对初始可见以及可能成为 LCP 的图像进行主动加载。对适合的首屏以下媒体采用延迟加载。预留尺寸以避免布局偏移。
• 根据测量结果提出性能问题。只有在分析结果支持时，才添加记忆化或临时的 will-change。
• 使用项目现有的检查，并遵守其命令限制。不能仅凭检查源代码就声称已验证浏览器、无障碍或性能结果。
• 检查排版、间距、颜色和交互方面的决策是否符合产品需求。即使个人偏好不同，也要保留已批准的品牌选择。