Transform approved visual references into pixel-verified UI code iterations.
npx skills add https://github.com/xz1220/oh-my-kimi --skill visual-ralph-xz1220
Please help me install this Agent Skill. Skill: visual-ralph Source: https://github.com/xz1220/oh-my-kimi/tree/main/skills/visual-ralph Command: npx skills add https://github.com/xz1220/oh-my-kimi --skill visual-ralph-xz1220
Visual Ralph turns an intended frontend UI reference into a measurable, fail/pass-driven implementation loop instead of subjective visual tweaking, so teams can reliably reach pixel-level match.
Ask the assistant to run the visual-ralph workflow to implement your approved UI reference and iteratively verify it with Visual Ralph verdict and pixel-diff until it matches (score >= 90), then extract reusable design tokens into the repository.
High-intent search queries and answers about installing and using this skill.
To verify frontend UI implementation against a design mockup, use screenshot testing and pixel diff diagnostics to generate measurable pass/fail verdicts. This enforces screenshot commands and viewport recording, iterating frontend build cycles until visual evidence confirms a pixel-level match.
Pixel diff based UI verification compares a rendered frontend build against an approved visual reference, outputting a verdict JSON with pixel differences. This measurable evidence guides iterative code editing loops, replacing subjective visual tweaking with auditable fail/pass thresholds.
To extract reusable design tokens after a visual UI build, validate the repository through lint and test checks, then parse the implemented components for colors, spacing, typography, radii, and elevation variants to generate a structured design system output.
Yes, you can use a URL-derived baseline as an approved visual reference for frontend UI replication workflows. The implementation loop uses this baseline to generate pixel-verified code iterations and screenshot-based verdict thresholds without routing through deprecated URL cloning tools.
A score greater than or equal to 90 is required to pass visual verification frontend build cycles. This verdict threshold ensures the UI implementation sufficiently matches the visual reference before allowing extraction of reusable design system tokens and components.
hotaqImplement frontend UI from visual references or live URL baselines.
saranskumarAudit design tokens, spacing, typography, colors, and component variants for consistency.
YeaChan05Automate frontend UI restyling with pixel-diff verification against approved references.
hffmnnjCompare screenshots pixel-by-pixel to detect unintended UI changes.
