skills.rest
YeaChan05
YeaChan05COMMUNITY
Explore all skills by this author →
GitHub

visual-ralph

Automate frontend UI restyling with pixel-diff verification against approved references.

Updated Jan 4, 2026
Search Tags:#ui#orchestration#iteration#design-system#visual#verdict#pixel-diff
One-click install
npx skills add https://github.com/YeaChan05/Remittance --skill visual-ralph-yeachan05
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-ralph
Source: https://github.com/YeaChan05/Remittance/tree/main/.codex/skills/visual-ralph
Command: npx skills add https://github.com/YeaChan05/Remittance --skill visual-ralph-yeachan05

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates frontend UI delivery by orchestrating approved references, Ralph implementation, and visual verdict evaluation.

Core Features & Use Cases

  • Visual Ralph orchestration of UI restyling across generated, static, or live references.
  • Pixel-diff driven iteration with reproducible design system tokens and components.
  • Non-runtime-commands approach; composes existing skills without app-specific assumptions.

Quick Start

Describe your UI target and run Visual Ralph to iterate until the design matches.

Frequently Asked Questions about visual-ralph

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate frontend UI restyling to match a design reference?▼

Automate frontend UI restyling by orchestrating approved references, iterative implementation, and visual verification. This Skill uses pixel-diff evidence and Visual Verdict scoring to iterate until generated, static, or live URL targets match the approved design.

What is pixel-diff driven iteration for UI delivery?▼

Pixel-diff driven iteration is a visual verification process that compares implemented UI against approved references. It generates reproducible design system tokens and components, using Visual Verdict scoring to measure pixel-perfect replication accuracy.

Can I use this approach to match visuals across live URLs and static files?▼

Yes, the orchestration supports pixel-perfect replication across generated, static, or live URL targets. It avoids app-specific assumptions, allowing you to apply UI restyling and visual verification to various frontend target types.

How does Visual Verdict scoring work for frontend design verification?▼

Visual Verdict scoring evaluates how accurately an implemented UI matches an approved reference. It works alongside pixel-diff evidence to provide measured QA, automating the iterative visual verification process until the frontend design matches.

Do I need runtime dependencies to run pixel-perfect UI replication?▼

No, this UI restyling approach uses a non-runtime-commands method and composes existing skills without requiring runtime dependencies. This avoids app-specific assumptions while orchestrating references and visual verification.

Related Skills

Explore More Design & Creative Skills→
OrinksOrinks
24

visual-ralph

Orchestrate frontend UI delivery by chaining reference targets, Ralph implementation, and Visual Verdict assessment.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced