业务目标:让 AI 生成的界面不"一眼假"
Perplexity CEO Aravind Srinivas 宣布 @pbakaus 开发的开源技能 /impeccable 现已进入 Computer 的技能市…
当前卡点:生成快、验收慢,走查成了人工串行瓶颈
生成端已经卷到按秒计了。Cursor、v0、Bolt 能在十秒内吐出一套带布局、配色、间距的 React 组件。卡住交付的地方在验收环节。设计走查在传统流程里是纯串行的:一位设计师逐屏对照设计规范,检查布局对齐、字体层级、对比度是否满足 WCAG 2.1 的 AA 阈值、aria 属性有没有漏。一个中型页面,人工走查通常 1.5 到 3 小时,结果还取决于走查人当天的状态。十分钟的产出,两小时的排班。
传统设计走查的串行瓶颈
Perplexity 对 /impeccable 的官方描述是「reviews an interface and fixes what a designer would flag. It checks layout, type, contrast and accessibility」。10 月 31 日前每用户 5000 credits 免费额度,数字本身不构成新闻。Perplexity Computer 的技能市场此前已挂着 40 多个内置技能,社区又合并出 12 个覆盖财务、法务、产品等垂类的开源技能包。真正值得拆的是架构判断:当走查从串行人工流程变成 Agent 可并行的子任务,分界点落在哪。
方案 A:设计师人工走查(传统路径)
流程:截图 → 逐像素检查 → 标注 → 修改 → 再截图
传统路径里,一个前端组件从生成到交付,要过的手是固定的。开发者完成页面后,设计师截一张图,对着 Figma 设计稿逐区域比对:间距是否 8px 倍数、字号阶是否对齐 typographic scale、对比度有没有过 WCAG AA 的 4.5:1、焦点态和读屏顺序对不对。每发现一处偏差,标注在 Figma 评论区或 Slack 线程里,开发者改完再截一张,循环到「没有再挑了」。
一轮走查的时间取决于页面复杂度。一个中等复杂度的表单页,从截图到修完通常 2 到 3 轮,每轮间隔取决于开发者和设计师的排期。业内常见做法是把走查排进 sprint 最后一两天,它天然落在迭代尾部,赶不上就顺延。
走查永远排在 sprint 尾巴
瓶颈:串行、依赖人、标准不统一、不可并行
问题不在「有人走查」这件事本身,而在它的结构。
整条链路是串行的。截图、看、标注、改、再截图,每一步依赖上一步的产出。设计师不在工位,链路就停。两个设计师各自看同一个页面,对「间距该 12 还是 16」的判断可能不同,因为设计系统文档写的是 12,但实际项目里为了适配某个组件库改成了 16,文档没跟上。
更关键的是不可并行。你不能把「检查所有间距」拆给三个人同时做,因为间距判断需要上下文:这个 margin 相对于哪个父容器、这个 padding 是否被全局 design token 覆盖。上下文必须装在一个人脑子里,走查天然是单线程的。
传统设计走查串行链路
当生成侧把「做一个页面」压到几十秒,验收侧仍按小时计,瓶颈就从生产转移到了检验。/impeccable 把布局、字体、对比度、无障碍拆成可并行的子任务,改的是这条链路的拓扑结构,不是多了一个免费额度。
方案 B:/impeccable 技能(纯 Agent 路径)
机制:4 个检查维度拆为并行子任务,Computer 自动调度
/impeccable 把一次设计走查拆成四个并行子任务,分别是布局(间距、栅格对齐)、字体(字重、层级、行高)、对比度(WCAG AA/AAA 阈值校验)、无障碍(ARIA 标签、焦点顺序)。Computer 收到界面代码或截图后,将四项分发为子 Agent 同时执行,汇总后输出一份带修复建议的报告。开发者不需要排队等设计师看完截图再标注,四项检查在同一轮 compute 里跑完。
设计走查从串行的人工流程变成并行的 Agent 子任务,这才是架构层面的变化,不是多了一个免费额度。
/impeccable 并行检查调度
边界:检查的是「设计师会 flag 的问题」,不做创意判断
它不生成界面,它告诉你你的界面哪里像 AI 垃圾。但「像 AI 垃圾」被收窄到可量化区间,对比度低于 4.5:1、字号层级缺失、缺少 aria-label。它不会告诉你「这个首页的情感基调不对」或「信息架构让用户三秒内迷路」。它是 linter,不是 critic。
在需要判断视觉节奏、品牌一致性或叙事逻辑的场景,设计师仍是终审环节。/impeccable 覆盖的是「能不能上线」的最低线,不覆盖「该不该这样设计」的判断线。
5000 credits 额度的技术含义与时间窗口
Perplexity Max 订阅每月约含 10 000 credits,Pro 约含 4 000。5 000 的量级接近 Pro 一个月的 Computer 用量,足以跑十到二十次完整的 /impeccable 走查。10 月 31 日截止后,该技能回归正常 credit 计费。这是一个测试窗口,趁免费期把 /impeccable 接进 CI 流程,验证误报率和团队能接受的修复成本,再决定 11 月起是否纳入常规预算。
方案 C:人机混合(AI 初筛 + 人工终审)
/impeccable 检查的是「设计师会 flag 的问题」,layout、type、contrast、accessibility 四项并行跑完即出报告。四项全绿不碰人工队列;任何一项不过,结构化报告(维度、元素、具体违规点)推入人工 triage。人的工作从逐像素过全部页面,收缩为只看被 flag 的异常项。
分界点:/impeccable 过不了才进人工队列
路由规则是硬的:四门全过即 auto-approve,没有灰度地带。5000 credits 在 10 月 31 日前意味着每个 PR 都能跑一次全量检查;过了这个窗口,Max 订阅每月 4000 bonus credits 的池子决定了你不可能对每次 commit 都跑。经济学一变,「每次提交都跑」退化为「release candidate 才跑」,混合架构的分界线也跟着后移。
适用场景:品牌一致性、创意方向仍需人拍板
它检查的是已知模式违规,不是「这个新 dashboard 该用 8px 还是 16px 间距」。品牌调性、信息架构取舍、创意方向不在四项维度里,仍是设计 lead 的拍板权。/impeccable 把 80% 的机械劳动并行化,剩下 20% 的审美判断还挂在人身上。
选型决策表:三条路径的适用边界
审查频次 × 团队规模 × 验收标准是否可量化
一句话判断:验收标准可量化、团队无专职设计师、审查频次高于每周两次,默认走 B。一旦涉及品牌色彩体系或创意方向拍板,切 C,分界条件沿前文所述:Agent 未标红的页不进队列,标红的才推给设计师。
系统架构对比(Mermaid 图)
三条路径的数据流与调度差异
三条设计走查路径的数据流与调度差异
从调度视角看,A 的关键约束是 Fix 回环——改完必须重新截图再走一遍,串行深度随问题数线性增长。B 把回环拆成四个独立子任务,彼此无依赖,调度器一次分发、汇总收口。C 在 B 的基础上多了一条人工支路,但这条支路的输入被 Agent 预过滤过,设计师看到的只是标红页,不是全量截图。
可今天就做的两件事:一,在仓库 CI 里加一条 /impeccable 触发规则,MR 含 UI 变更时自动跑四项检查,把 5000 credits 的窗口期吃满;二,建一个「未通过项」Figma 看板,只放 Agent 标红的页面给设计师,把串行那段从流程里拿掉,省出来的时间去做 Agent 做不了的创意判断。
参考文献
- Aravind Srinivas on X:/impeccable 上线公告
- Perplexity Computer 技能使用指南(Academy)
- How to use Computer Skills(Help Center)
延伸入口
- 原文归档:tobemagic.github.io/ai-magician…
- 公众号:计算机魔术师
本文由 AI图鉴自动抓取并翻译,版权归原作者所有;如需查看原文请点下方链接。
Operational objective: to make the interface created by AI non-false
The Open Source Skills developed by @pbakaus is now in the skills market of Computer...
Current card points: Quick generation, slow acceptance check, slow check-in becomes an artificial chain bottleneck
The generation end has been rolled to seconds. Cursor, V0, Bolt can spit out a react component with layout, colour and spacing in 10 seconds. It's stuck at acceptance check. Design to check that traditional processes are pure serials: a designer screen-by-screens the design specifications to check whether layout alignment, font level, contrasts meet the AA threshold of WCAG 2.1, and if there is any missing aria attribute. A medium-sized page with manual check-ups usually last 1.5 to 3 hours, the results also depend on the status of the person on the day. Ten minutes output, two hours shift.
Tradition bottlenecks
It checks out, type, describe and accessability. The numbers themselves do not constitute news, as per 5,000 credits free quota per user by 31 October. The skills market for Perplexity Computer has previously contained more than 40 built-in skills, and communities have merged 12 open-source skill packages covering finance, law enforcement, products, etc. What really deserves to be broken down is the architecture judgement: where is the boundary point when the look-out moves from a serial manual process to an Agent parallel subtask?
Option A: Designer manual check (traditional path)
Process: Screenshot → pixel-by-pixel check → → → modify → 像 像 Quantification
In the traditional path, a front-end component is fixed from generation to delivery. After the developer completes the page, the designer crosses a map of the Figma script by region: is the space 8px multiple, is the font step aligned to typographic scale, and has the contrast passed the WCAG AA 4.5:1, is the focus and screen order? For each deviation found, marked in the Figma comment area or in the Slack line, the developer changes and intercepts another one and circulates to "no more."
The timing of the round depends on the complexity of the page. A medium-complex form page, from the screening to the completion of the usual 2 to 3 rounds, depending on the schedule of the developers and designers. It is common practice in the industry to line up the sprint for the last two days, which falls naturally at the end of the ante, and is delayed.
Go check and always line up the end.
Bottlenecks: serial, dependent, inconsistent standards, non-compatible
The problem is not the "someone's going" thing, but its structure.
The whole chain is serial. Interception, visualization, labelling, re-profiling and re-interception, each of which relies on the output of the previous step. Designers don't work, the link stops. The two designers look at the same page, and the judgement may differ as to "the distance of 12 or 16" because the design system document is 12, but the actual project has changed to 16 to fit a component library.
More critically, there is no parallel. You cannot take "check all the space" down to three people at the same time, because the distance determination requires context: This margin relative to which parent container, and whether this padding is covered by the global design token. context has to be in a person's head.
It's a traditional design for a serial link.
When the generation side presses "do a page" to dozens of seconds, the acceptance check side is still measured on an hourly basis, and the bottlenecks shift from production to testing. /impectable to remove layout, fonts, contrasts, accessibility into parallel subtasks, changing the towering structure of this link instead of an additional free quota.
Option B:/impectable skills (pure Agent path)
Mechanism: 4 check dimensions to be split into parallel subtask, Computer automatic schedule
/impectable to decompose a design search into four parallel subtasks: layout (spacing, grid alignment), font (heavy, hierarchy, line height), contrast (WCAG AA/AAA threshold verification), accessibility (ARIA label, focus order). Upon receipt of an interface code or a screenshot, the Computer distributes four items as sub-Agent's simultaneous implementation and then produces a report with recommendations for restoration. Developers do not need to wait until the designer has finished reading the screenshot and four checks have been completed in the same round.
Designed to move from a serial manual process to a parallel Agent subtask, this is a change in architecture rather than an extra free quota.
/impectable parallel check schedule
Boundaries: "The Designer's Problem" without creative judgment.
It doesn't generate interfaces, it tells you where your interfaces are like AI trash. However, the "AI garbage" has been narrowed down to the quantization zone, with a contrast of less than 4.5:1 and a lack of aria-label. It won't tell you "this emotional tone on the front page" or "information architecture gets users lost in three seconds." It's linter, not critic.
Designers remain the final stage in situations where visual rhythms, brand consistency or narrative logic need to be judged. /impeccable covers the minimum line of "can we go online" and does not cover the "should we design it this way" judgement line.
5000 Credits quota Technical Meaning and Time Window
Perplexity Max subscriptions consist of approximately 10,000 credits per month, and Pro contains approximately 4,000. The 5,000 scale is close to Pro's one month of Computer usage, enough to run 10 to 20 full /impectable searches. After the deadline of 31 October, the skill reverts to normal credit charges. This is a test window, which is used to connect /impectables to the CI process free of charge, to verify the rate of error and the repair costs that the team can accept, and to decide whether to include it in the regular budget starting in November.
Option C: Manpower mix (AI initial screening + manual final review)
/impectable examines the "Flag Problems of Designers" and reports after four parallel runs. Four are completely green and do not touch manual queues; any of them, however, is pushed into manual triage by structured reports (dimensional, element, specific non-compliance points). A person works from pixels to page, constricting to an anomaly that is covered by flag.
Partition point: /impectable before entering manual queue
The route is hard: four doors are over, auto-approve, no grey area. By October 31st, 5,000 credits meant that every PR could run a full check; after this window, Max subscribes to a pool of 4000 bonus credits per month, which makes it impossible for you to run for each part of the world. As economics changes, "release candidate every time you submit", the boundaries of the hybrid structure move back.
Appliance scenario: brand consistency, creative direction still need to be boarded
It checks known patterns, not "this new dashboard should be 8px or 16px space". Branding, information architecture trade-offs, creative orientations, not within four dimensions, remain the right to design the board. /impectable to parallel 80% of mechanical labor, with 20% of aesthetic judgment hanging on people.
Selected decision sheet: the applicable boundary of the three paths
Review frequency x team size x acceptance criteria for quantization
One sentence: acceptance criteria can quantization, the team does not have a full-time designer, the frequency of review is higher than twice a week, and B is defaulted. Once brand colour systems or creative direction boards are involved, cut C, the dividing conditions follow the previously mentioned: Agent does not wait for unred pages and only red ones are pushed to designers.
System structure comparison (Mermaid figure)
Discrepancies between data flows and movements on three paths
Discrepancies between data flow and movement control in three designs of routed path
From a dispatch point of view, the key constraint of A is the Fix loop -- the change must be repeated and the serial depth increases with the linear number of questions. B Disassembly the loops into four separate subtasks, without dependence on each other, and dispatchers are distributed and assembled at one time. C has added an artificial feeder based on B, but this feeder is pre-filtered by Agent, and the designer sees only red pages, not full screenshots.
But there are two things to do today: first, add a trigger rule of /impectable in the warehouse CI, and MRs include four automatic running checks on UI changes, and full the window period of 5,000 credits; and second, build a "unpassed" Figma board, with only Agent marked pages to designers, to remove the string from the process and save time for Agent to make creative judgements.
References
- Aravind Srinivas on X:/impectable online announcement
- Academy
- How to use Computer Skills(Help Center)
Extension entrance
- Original archive: tobemagic.github.io/ai-magician...
- WeChat Official Account: Computer magician
Auto-fetched and translated by AI Atlas. All rights belong to the original author.