SuperAPI AI 工具集

visual-ralph

前端与建站

查看项目

更新于 10-16 01:14

技能介绍

用途:Visual Ralph 用于按视觉目标构建或改造 Web/App UI。流程为:描述或 URL → 已批准参考 → $ultragoal 实现 → Visual Ralph 判定 + 像素差异 → 可复用设计系统。它接管了迁移后的 $web-clone 用例,URL 克隆时保留 URL、视口、保真度与交互说明,不再单独调用 $web-clone。共享的操作、委派、状态、钩子、团队、取消与验证规则见 templates/AGENTS.md。

适用场景:需要按视觉目标构建或重设样式;实时 URL 或生成的位图稿需要可测量实现与像素级迭代;结果必须留下仓库原生可复用 token/组件,而非仅截图匹配。不适用于持久 DESIGN.md 简报($design)、非视觉后端工作、可直接执行的纯对比修复,或确定性 SVG/代码原生资产。

工作流:1) 摸清仓库:检查包管理器/脚本、前端框架与路由、样式/token 约定、截图工具与可复用组件,仅在仓库证据支持时选择技术栈命令。2) 建立参考:实时 URL 需记录来源 URL 与权限/范围、视口、路由/状态、种子/登录假设、基线截图路径或捕获命令、可见控件一致性说明及排除项(后端/API/认证、个性化数据、爬取、第三方组件);生成概念用 $imagegen,分类 ui-mockup,指定视口/宽高比、表面、布局层级、字体、色彩情绪、精确文本、无 logo/水印/未要求标记,并保证 UI 细节可读可行。OMX 运行时在调用内置图像工具前先排队续接检查点:omx imagegen continuation <session-id> --artifact <slug-or-filename> --generated-dir "$CODEX_HOME/generated_images/<session>" --work-dir ".omx/artifacts/visual-ralph/<slug>"。将批准参考复制到 .omx/artifacts/visual-ralph/<slug>/reference.png。3) 批准门:生成或捕获后停下,取得一张参考图/状态的批准;批准前不得实现或调用 $ultragoal。批准后该图/基线为视觉事实来源,重大转向需用户明确要求。4) 交给 $ultragoal:传入批准参考/基线、URL 与权限说明、视口/内容状态、交互一致性与排除项、用户描述、检测到的前端上下文、截图命令/视口及完成清单。5) 每次编辑前先判定:捕获当前截图,运行 Visual Ralph 判定(必要时用视觉),其 JSON 为权威;score < 90 时把 differences[] 与 suggestions[] 转为下一步编辑计划并重跑。必需键:score、verdict、category_match、differences[]、suggestions[]、reasoning。6) 次级差异证据:像素差异/像素匹配叠加仅用于定位热点并转为编辑,不替代判定;记录最终参考、截图与差异产物。7) 可复用设计系统:用仓库原生 CSS 变量、主题 token、配置、组件变体、stories 或 DESIGN.md 更新来固化匹配,覆盖颜色、间距、字体/字重、圆角、阴影/层级及重要变体/状态,扩展现有模式而非新增并行层。

完成证据与停止条件:未保存批准参考/基线与复现命令(视口、路由、状态、输出路径)、最终判定未达 >= 90、未记录次级差异证据、无可复用 token/组件、等价构建/检查/测试未通过、发生未批准转向或剩余差异未记录时,不得宣布完成。证据无法满足时停在批准门或报告具体阻塞。

交接模板:$ultragoal "Implement the approved frontend reference. Reference: <workspace reference or URL-derived artifact> Source URL and permission/scope: <when applicable> Viewport/content state: <viewport, route/state, seed/login assumptions> Interaction parity and exclusions: <visible controls and known limits> Route/surface: <route or component> Screenshot command: <command and viewport> Run Visual Ralph verdict before every next edit; pass threshold >= 90. Use pixel diff only as secondary evidence. Extract reusable tokens/components for colors, spacing, typography, radii, shadows, and variants. Run the repository's equivalent verification before completion. Do not make major design pivots unless explicitly requested." Task: {{ARGUMENTS}}

限制:资料未提供具体收费、价格、平台支持范围或效果保证;实际命令与参数需以仓库证据和运行环境为准。