一键导入
visual-ralph
Visual Ralph 编排:用 $ralph 加上内置的 visual verdict 与像素 diff 证据,从生成参考、静态参考或在线 URL 目标出发实现前端 UI,直到实现匹配,并沉淀出可复用的设计系统。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Visual Ralph 编排:用 $ralph 加上内置的 visual verdict 与像素 diff 证据,从生成参考、静态参考或在线 URL 目标出发实现前端 UI,直到实现匹配,并沉淀出可复用的设计系统。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
oh-my-kimi 的目录入口,包含面向 Kimi CLI 的 agent、skill、hook 与 MCP 套件,衍生自 oh-my-* 谱系。
面向密钥、注入、authz/authn、不安全 IO、依赖与数据外泄风险的安全评审
证据驱动的追踪通道,在 Kimi 的 Agent 工具中编排互相竞争的 tracer 假设
LLM Wiki —— 跨会话持续累积的 markdown 知识库(Karpathy 模型)
面向作家的 agentic 记忆系统 —— 跟踪人物、关系、场景与主题
跑只读的深度仓库分析,返回一份带置信度排序的综合结论,附具体文件引用、清晰区分证据与推断。当用户说 'analyze'、'investigate'、'why does'、'what's causing',或在提任何改动方案之前需要跨文件的有据解释时使用。
| name | visual-ralph |
| description | Visual Ralph 编排:用 $ralph 加上内置的 visual verdict 与像素 diff 证据,从生成参考、静态参考或在线 URL 目标出发实现前端 UI,直到实现匹配,并沉淀出可复用的设计系统。 |
当用户希望 Codex 通过 Visual Ralph 循环来构建或重做前端 UI 时使用本 skill:已批准的生成参考、静态参考,或来自在线 URL 的基线作为目标,Ralph 负责实现,Visual Verdict 用可测量的判定驱动迭代,而不是仅靠主观描述。
从生成参考、静态参考或在线 URL 出发,构建可测量的前端交付循环:
用户描述 / 在线 URL -> 已批准的视觉参考 -> $ralph 实现 -> Visual Ralph verdict + 像素 diff -> 可复用的设计系统。
对于在线 URL 克隆请求,Visual Ralph 接管已迁移的 $web-clone 用例。不要把新的 URL 驱动的网站克隆工作路由到 $web-clone;把 URL、视口、保真度要求与交互说明都保留在 Visual Ralph 循环里。
这是一个编排 skill。它组合已有的 skills,自身不应当引入运行时命令、依赖或应用级假设。
$frontend-ui-ux 或 designer 通道。$ralph 并附 Visual Ralph verdict 指引。在做任何技术栈相关选择之前,先检查本地证据:
不要在没有仓库证据支持的情况下硬编码 React、Vue、Tailwind、Playwright 或任何其他技术栈。
对于在线 URL 请求,在 Visual Ralph 工件里捕获或记录 URL 派生的参考,并把视口、内容状态、交互约束保留下来。不要调用 $web-clone;该独立 skill 已硬弃用。
在线 URL 参考工件必须包含:
对于生成式的 UI 概念,用 $imagegen 从用户的 UI 描述产出参考。
Prompt 要求:
ui-mockup,除非另一种 imagegen 分类明显更合适,在 oh-my-kimi CLI / runtime 下运行、且生成参考是某个活跃的 Ralph 风格循环的一部分时,在调用内置图像工具之前先排入一个 continuation checkpoint:
kimi-omk imagegen continuation <session-id> --artifact <slug-or-filename> --generated-dir "$CODEX_HOME/generated_images/<session>" --work-dir ".omk/artifacts/visual-ralph/<slug>"
这个 helper 会记录 .omk/state/sessions/<session>/imagegen-pending.json,并复用已有的 Stop-hook 后续队列。它的存在是因为内置图像生成可能必须立刻结束 assistant 的本轮回合;下一次 Stop checkpoint 应当恢复工件回收,把生成的图像拷贝进工作区,并跑必要的视觉 QA / verdict 门,而不是依赖手动 $ralph 再次提示。
对于绑定到项目的实现,把已批准的参考拷贝到工作区,例如 .omk/artifacts/visual-ralph/<slug>/reference.png。永远不要让实现参考只留在 $CODEX_HOME/generated_images/... 里。
在参考生成或 URL 派生参考捕获完成后停下,并请用户批准一张参考图 / 状态,或请求定向的重新生成 / 捕获调整。
批准之前:
$ralph,批准之后,被确认的图像或 URL 派生基线成为视觉真理来源。任何重大设计转向、替换参考或改变设计方向都需要用户显式请求。
$ralph 实现调用 $ralph 时附上:
批准后 Ralph 可以自主迭代。它应当编辑代码、跑应用、截图,并持续改进直到匹配已批准的参考,或出现真正的阻塞。
每一次视觉迭代:
vision agent 做图像理解。score < 90,把 differences[] 与 suggestions[] 转成下一次编辑计划。必需的 verdict 形状:score、verdict、category_match、differences[]、suggestions[]、reasoning。
当不匹配的诊断很难时,生成像素 diff 或 pixelmatch overlay 来定位热点。像素 diff 不替代 Visual Ralph verdict;它只帮你把视觉热点翻译成具体编辑。
把最终 diff 证据与参考 / 截图工件一并记录,让结果可被审计。
如果视觉匹配没有被编码成仓库原生的可复用工件,实现就不算完成。视项目情况,这可能意味着 CSS 变量、theme token、Tailwind 配置、组件 variant、Storybook story、设计文档,或已有的等价物。
至少捕获相关的:
优先复用已有的 token / 组件模式。如果仓库已经有可扩展的设计系统层,不要再引入一个新的。
下面全部为真之前不要宣告完成:
>= 90。$ralph "Implement the approved frontend reference.
Reference: <workspace-reference-image-or-url-derived-artifact>
Source URL (if URL-derived): <url and permission/scope note>
Viewport/content state: <viewport, route/state, seed/login assumptions>
Interaction parity notes: <visible controls and known exclusions>
Route/surface: <route or component>
Screenshot command: <command and viewport>
Use the Visual Ralph verdict step before every next edit; pass threshold score >= 90.
Use pixel diff only as secondary debug evidence.
Extract reusable design tokens/components for colors, spacing, typography, radii, shadows, and key variants.
Run build/lint/test before completion.
Do not make major design pivots unless explicitly requested."
Task: {{ARGUMENTS}}