前端界面设计与体验

把界面目标落成可运行的页面、所需交互和可复核的渲染结果。围绕真实用户要完成的任务选择版式与视觉表达，兼顾可用性、视觉质量和维护成本。

使用边界

• 新建用户可见的页面或组件，或需要评估、改善已有界面的视觉、布局、信息组织和交互时使用；没有视觉或交互目标的纯逻辑、普通文案和后端修改直接处理。
• 用户明确只要方案或只读评估时，按该交付边界执行；要求实现或优化时，持续完成授权内的代码和检查，不停在建议、效果描述或待办清单。不因加载 Skill 再次询问，不自动发布。
• 从需求、已有实现和项目规则推导用户、任务与约束，只询问无法确定且会改变交付的关键选择。小改只处理该处，不重建品牌或全站设计系统。沿用项目技术栈、工具与维护约定，新增依赖须有任务依据。

从目标到页面

1. 找到真实内容和运行入口

识别主要用户、关键任务、现有数据与行为契约。已有界面先看相关页面和主流程；核对相邻组件、设计令牌、字体与图像资源，并从 README 或项目脚本确认预览、构建和相关测试命令。新页面先确定必须呈现的内容与用户路径，不用虚构评价、数字或功能填满版面。

2. 把设计判断写成施工规格

在编码前用简短文字、草图或现有设计变量确定本次需要的内容，不另建无用文档、不为确认形式暂停实施：

• 页面骨架：主要区块、阅读或操作顺序、主要动作位置、分组与信息密度；首屏承担什么任务。
• 具体视觉选择：实际使用的颜色角色、字体与字号层级、间距、内容宽度和组件处理。已有项目用现有 token；缺少规范的新页面作出协调的选择，再落实到样式中。“现代、简洁、有层次”不足以指导实现。
• 交互规格：本次控件的触发条件、数据或导航变化、用户可见反馈；窄屏怎样重排。只覆盖实际存在或本次要求的状态。

有明确设计稿、品牌规范或局部修改目标时直接沿用相应规格。管理界面服务查找、比较和操作；内容页面服务浏览和理解；儿童界面依据实际年龄与能力安排信息和动作。让真实长标题、单位、状态、图片比例和操作数量检验布局，别用统一卡片模板替代设计判断。

新建页面在任务允许时，选择与内容相关的视觉重点，例如标题排版、信息组织、真实图像或关键交互，明确区域比例、对齐和留白关系；不要只在通用表单上换色。存在真实构图取舍时用实际内容自行比较首屏方案，不固定提案数量或增加确认步骤。

3. 完成可运行的主路径

按已定骨架与视觉规格完成一条主要用户路径，再补齐状态和细节：将页面骨架落到组件或语义结构，把选定规格写入现有主题、token 或样式层，连接本次需要的真实事件、导航和状态。按钮应执行其标示的动作；表单校验、提交反馈、失败恢复与成功结果在任务要求的范围内形成闭环。需要本地模拟时明确它的边界，不伪装成已接入外部服务。

保留既有数据、接口、权限、表单字段及错误语义，除非用户要求改变。复用已有组件和设施，让开发者与 Agent 能定位样式及状态；避免平行的组件库或第二套视觉体系。视觉重点应能解释其作用，必要的名称、状态、错误信息与无障碍说明不因精简而丢失。

4. 渲染、操作、修正

运行页面，使用环境已有的浏览器或适当设备观察实际结果；先核对主内容和动作是否清楚，再操作主要路径。根据任务检查代表性宽度、长内容、键盘与焦点、触屏目标、溢出和遮挡；受影响的加载、空与错误状态也要实际走到。

按“阻塞操作或内容错误 → 分组、布局和层级 → 字体、颜色、间距与细节”的顺序修正，把同一层的问题合并处理，再回到对应视口和流程复核。修正针对实际观察，不靠固定截图轮数、主观分数或样式禁令收尾。动效服务操作并尊重减少动态效果设置；设计过程与验收说明不写进产品界面。

验证与交付

• 对照需求检查：交付物可以按给出的入口运行，实际内容和所需动作已实现；已观察到的关键视觉问题已修正；相关功能检查完成，未验证部分明确。实施任务交付实现本身及入口，简述影响最大的设计选择和真实验证结果。
• 构建、静态测试或直接调用 API 不能代替页面操作和视觉核对。保存可复核的路由、视口、操作与观察，必要时留截图；截图文件存在也不等于已经观察了界面。
• 预览或浏览器失败时保留实际尝试及错误，选择环境中已有的可用检查方式。无法渲染或操作的部分明确标为未验证，不能在未尝试时宣称端口、浏览器或运行环境被禁止。
• 保持用户、开发者及 Agent 体验中受本次任务影响的方面得到改善，其他方面不退化；不为凑齐改善而扩大为无关重构。

需要细化施工规格或实现顺序时读落地参考；具体场景取舍见后台、内容页与只读边界示例。按缺口选择相关部分，不把参考当成固定模板。