检查已有界面
界面审计需要明确页面、用户任务及当前截图或代码。围绕影响任务的信息层级、交互、无障碍和响应状态进行评估,再按严重程度与出现条件排列问题。让后续实施处理具体缺陷,而不是停留在泛泛的审美意见上。
使用 pbakaus 的 Impeccable,通过一个 Skill 及其命令设计、审查与优化前端界面。围绕层级、字体、响应式和边界状态选择工作方式,结合项目既定身份与用户任务实施修改,再查看渲染结果,确认改进在实际页面中成立。
先区分界面需要审计、在已定方向内精修,还是补足边界状态。请求保留这个决定,并结合产品背景和代表屏幕检查安排修改,避免将一项具体优化扩大为没有范围的重新设计。
请求可预览和复制,不会从此处自动发送。
参考来源: Impeccable https://github.com/pbakaus/impeccable/blob/main/.agents/skills/impeccable/SKILL.md 先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时,先提出方案。 我的任务: 使用 Impeccable 检查这个结账表单。保留现有视觉身份,重点检查层级、键盘使用、验证及空白或错误状态,先报告发现再修改。 期望交付: 范围明确、按优先级整理的界面问题,先给发现再进行修改。
Impeccable 是 pbakaus 发布的设计 Skill 与配套工具流程。它通过单个 Skill 调度 audit、critique、polish、harden 等命令,不应把每条命令视为独立能力包。当前发行包含启动器与独立引擎,并按宿主提供不同安装方式和可选原生 Hook。它读取项目上下文,区分保留既有方向的优化与重新设计,再根据界面类型选择方法。使用时应提供具体页面、用户任务,以及必须保留的品牌特征或交互行为。不同宿主的安装细节需要分别核对,设计过程也仍需检查真实渲染结果。
界面审计、最后打磨和边界状态修复不应反复推翻同一设计决定。了解 Impeccable 如何区分发现问题、精修已定方向,以及检查表单、加载或空数据状态。
界面审计需要明确页面、用户任务及当前截图或代码。围绕影响任务的信息层级、交互、无障碍和响应状态进行评估,再按严重程度与出现条件排列问题。让后续实施处理具体缺陷,而不是停留在泛泛的审美意见上。
接近完成的页面可以在已批准视觉方向内继续打磨。围绕现有实现调整字体、对齐、间距和一致性,同时检查已经认可的交互。优化应改善阅读节奏和整体连贯性,而不是重新打开已经确定的产品或行为决定。
表单和异步页面需要在输入无效、请求加载或没有数据时继续提供指引。结合表单规则与代表性样例检查这些状态,补全缺失反馈。除正常成功路径外,也要确认用户能够理解发生了什么,以及接下来可以采取什么行动。
新的设计任务需要先明确受众、产品和约束,再开始视觉打磨。按需使用原始说明中的初始化流程,审阅记录下来的背景,并将产品事实与临时视觉偏好区分。后续检查和实施能够沿已确认简报继续,不必只靠一张截图重新推测页面目的。
审阅意见不应自动变成重新设计的授权。按宿主准备 Impeccable 和产品背景后,先确定保留现有方向还是重做,再检查代表尺寸下的渲染结果,使具体优化有清楚边界。
使用对应宿主安装器并重新加载。新项目先在 Agent 内运行 /impeccable init,建立 PRODUCT.md;已有项目核对该上下文,并处理相关 Hook 信任提示。
提供路由或源码文件,说明需要保留的部分,选择相关命令并区分优化与重做。
在目标尺寸检查更新后的界面,核对交互与内容,再修正渲染结果暴露的具体问题。
查看其他 Skill 指南,并在使用前核对原始来源。