mcpField
V
visual-ralph

visual-ralph

github.com/yeachan-heo设计与 UI33.7k76 次安装今天更新
代码仓库

关于 visual-ralph

Visual Ralph 是依据获批图片或实时 URL 参考来实现或改版前端界面的技能。它通过量化视觉迭代和验证来指导实现，并将成果整理为可复用的设计令牌与组件。

主要功能

  1. 01依据获批的视觉参考
  2. 02支持实时 URL 和生成的样稿
  3. 03实现前须获得批准
  4. 04通过视觉判定和像素差异迭代
  5. 05记录可复用的设计令牌与组件

适用场景

  1. 01按获批样稿构建界面
  2. 02参照实时 URL 改版页面
  3. 03迭代修正前端视觉差异
  4. 04整理可复用的样式模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yeachan-heo/oh-my-codex --skill visual-ralph

安装后在 Claude Code 中输入/visual-ralph确认已加载。

详细介绍

Visual Ralph 技能

使用 $visual-ralph 从已批准的生成参考、静态图像或实时 URL 基线出发，进行可度量的前端实现。该循环为：

description / URL -> approved reference -> $ultragoal implementation -> Visual Ralph verdict + pixel diff -> reusable design system。

对于 URL 克隆，此技能负责已迁移的 $web-clone 用例；请在此处保留 URL、视口、保真度和交互说明。不要调用独立的 $web-clone。

共享的操作、委派、状态、钩子、团队、取消和验证不变量位于 templates/AGENTS.md。请遵循该来源，而不要在此处重复其规则。

适用场景

  • 用户希望参照视觉目标构建或重新设计 Web/App UI。
  • 实时 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；不要只将其留在 $CODEX_HOME/generated_images 下。

3. 审批门

在生成或 URL 捕获后停止，并获取对一张参考图像/状态的批准（或针对性的重新生成/捕获调整）。在批准之前，不要实现或调用 $ultragoal。批准后，图像/基线即为视觉事实来源；重大转向需要用户明确请求。

4. 移交给 $ultragoal

传递已批准的参考/基线、适用时的 URL 和权限说明、视口/内容状态、交互一致性和排除项、用户描述、检测到的前端上下文、截图命令/视口，以及完成检查清单。活跃的 Ultragoal 执行通道在批准后进行编辑、运行、捕获和迭代，直到匹配或受阻。

5. 每次编辑前给出判定

对于每次迭代，使用视口/状态捕获当前截图，运行 Visual Ralph 判定（在需要时使用 vision），并将其 JSON 视为权威。如果 score < 90，将 differences[] 和 suggestions[] 转化为下一次编辑计划，并在编辑前重新运行。必需的判定键：score、verdict、category_match、differences[]、suggestions[]、reasoning。

6. 次级差异证据

仅使用像素差异/pixelmatch 叠加来定位热点并将其转化为编辑；它们绝不替代判定。记录最终参考、截图和差异工件以便审计。

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."

任务：{{ARGUMENTS}}

评论

支持 Markdown