Impeccable by pbakaus

使用 pbakaus 的 Impeccable,通过一个 Skill 及其命令设计、审查与优化前端界面。围绕层级、字体、响应式和边界状态选择工作方式,结合项目既定身份与用户任务实施修改,再查看渲染结果,确认改进在实际页面中成立。

先审查表单,再决定如何改版

先区分界面需要审计、在已定方向内精修,还是补足边界状态。请求保留这个决定,并结合产品背景和代表屏幕检查安排修改,避免将一项具体优化扩大为没有范围的重新设计。

说明表单、用户任务、键盘行为及空白或错误状态。

复制请求,在 Floatboat 新对话中粘贴,并提供所需资料。

下载 Floatboat

带入 Floatboat 的请求

请求可预览和复制,不会从此处自动发送。

参考来源: Impeccable
https://github.com/pbakaus/impeccable/blob/main/.agents/skills/impeccable/SKILL.md

先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时,先提出方案。

我的任务:
使用 Impeccable 检查这个结账表单。保留现有视觉身份,重点检查层级、键盘使用、验证及空白或错误状态,先报告发现再修改。

期望交付:
范围明确、按优先级整理的界面问题,先给发现再进行修改。

关于 Impeccable

Impeccable 是 pbakaus 发布的设计 Skill 与配套工具流程。它通过单个 Skill 调度 audit、critique、polish、harden 等命令,不应把每条命令视为独立能力包。当前发行包含启动器与独立引擎,并按宿主提供不同安装方式和可选原生 Hook。它读取项目上下文,区分保留既有方向的优化与重新设计,再根据界面类型选择方法。使用时应提供具体页面、用户任务,以及必须保留的品牌特征或交互行为。不同宿主的安装细节需要分别核对,设计过程也仍需检查真实渲染结果。

Impeccable Skill的使用场景

界面审计、最后打磨和边界状态修复不应反复推翻同一设计决定。了解 Impeccable 如何区分发现问题、精修已定方向,以及检查表单、加载或空数据状态。

检查已有界面

界面审计需要明确页面、用户任务及当前截图或代码。围绕影响任务的信息层级、交互、无障碍和响应状态进行评估,再按严重程度与出现条件排列问题。让后续实施处理具体缺陷,而不是停留在泛泛的审美意见上。

打磨接近完成的页面

接近完成的页面可以在已批准视觉方向内继续打磨。围绕现有实现调整字体、对齐、间距和一致性,同时检查已经认可的交互。优化应改善阅读节奏和整体连贯性,而不是重新打开已经确定的产品或行为决定。

补齐表单与边界状态

表单和异步页面需要在输入无效、请求加载或没有数据时继续提供指引。结合表单规则与代表性样例检查这些状态,补全缺失反馈。除正常成功路径外,也要确认用户能够理解发生了什么,以及接下来可以采取什么行动。

设计前建立产品背景

新的设计任务需要先明确受众、产品和约束,再开始视觉打磨。按需使用原始说明中的初始化流程,审阅记录下来的背景,并将产品事实与临时视觉偏好区分。后续检查和实施能够沿已确认简报继续,不必只靠一张截图重新推测页面目的。

如何使用 Impeccable

审阅意见不应自动变成重新设计的授权。按宿主准备 Impeccable 和产品背景后,先确定保留现有方向还是重做,再检查代表尺寸下的渲染结果,使具体优化有清楚边界。

  1. 安装并初始化项目

    使用对应宿主安装器并重新加载。新项目先在 Agent 内运行 /impeccable init,建立 PRODUCT.md;已有项目核对该上下文,并处理相关 Hook 信任提示。

  2. 限定界面任务

    提供路由或源码文件,说明需要保留的部分,选择相关命令并区分优化与重做。

  3. 检查渲染改动

    在目标尺寸检查更新后的界面,核对交互与内容,再修正渲染结果暴露的具体问题。

探索更多 Agent Skills

查看其他 Skill 指南,并在使用前核对原始来源。

Impeccable 常见问题

audit 和 polish 是独立 Skill 吗?
当前发行通过单个 impeccable Skill 路由这些命令。可以固定快捷入口,但这不代表每条命令都是独立包。
只复制 SKILL.md 就能完成全部安装吗?
不能。当前流程还包含参考文件、启动器、引擎及宿主适配配置,应使用对应宿主的官方安装器或完整发行,而不是只复制入口文件。
为什么安装时会提到 Hook?
部分宿主除 Skill 外还会获得原生 Hook。信任与启用规则因宿主而异,需要按上游说明核对,并审阅相关项目 Hook 授权。
Impeccable 运行时必须依赖 Node 吗?
README 描述了由小脚本启动的独立引擎。npx 安装路径会使用 Node,手动和 Git 设置路径要求不同;首次使用可能下载引擎。
优化请求会替换整个设计吗?
原始说明区分优化与重做。应明确必须保留的身份、内容、行为与范围;优化需要遵守这些约束,不应悄悄换成新的视觉方向。
应用无法本地运行时还能使用吗?
原始说明允许检查已有视觉证据与项目上下文,但需要确认其新旧程度及对应关系。无法渲染或验证的部分应注明,不能把源码审查说成已测试界面。