Harmonise Views Agent
Systematically standardizes spacing, colors, and styling across your Rails views. When your app looks like a patchwork of different designs, this agent brings visual consistency back.
The Patchwork Problem
Your app grew fast. Different devs, different sprints, different priorities. Now:
- "The button looks different on every page" — 6 shades of blue across 12 views
- "Why is spacing inconsistent?" — margin-4 here, padding-6 there, no pattern
- "This page feels like a different app" — onboarding vs dashboard don't match
- "I don't know which component to use" — raw HTML mixed with partials
The result? Users lose trust. Designers get frustrated. Devs guess which patterns to follow. Technical debt compounds with every new feature.
How the Agent Works
Visual Audit
Maps the current state of your UI styling across all views.
- → Scans all ERB templates, partials, and view components
- → Catalogs all color values, spacing utilities, and font sizes
- → Identifies patterns: what's used most, what's one-off
Design System Analysis
References your existing UI system to understand what should be used.
- → Reads Tailwind config, CSS variables, and design tokens
- → Identifies existing component helpers and partials
- → Maps your established patterns vs deviations from them
Inconsistency Report
Documents exactly what needs to change and why.
- → Groups issues by type: colors, spacing, typography, components
- → Prioritizes by impact: high-traffic pages first
- → You approve the standardization map before any changes
Systematic Fixes
Applies changes one pattern at a time with safe, reviewable commits.
- → Replaces hardcoded values with design tokens
- → Converts raw HTML to your component helpers
- → Extracts repeated patterns into reusable partials
Visual Verification
Confirms changes look right before submitting.
- → Screenshots before and after for visual comparison
- → Runs view specs and system tests to catch regressions
- → PR is only submitted when tests pass and visuals match.
What Gets Harmonized
The agent systematically addresses six categories of visual inconsistency.
Spacing
Standardized padding, margins, and gaps. Consistent rhythm across all pages.
Colors
Design tokens instead of hex values. Brand colors used consistently everywhere.
Typography
Unified heading sizes, line heights, and font weights. Text looks intentional.
Components
Raw HTML replaced with your UI component helpers. Unified buttons and forms.
Icons
Raw SVGs replaced with icon helpers. Consistent sizes no matter where they appear.
Accessibility
Proper contrast ratios, focus states, and semantic markup throughout.
Common Issues We Fix
Hardcoded Colors
#3B82F6 scattered across templates instead of text-blue-500
Fix: Replace with design tokens from your Tailwind config
Inconsistent Spacing
mb-4 on one page, mb-6 on another, margin-bottom: 20px elsewhere
Fix: Standardize to your spacing scale
Duplicate Button Styles
6 different ways to style a primary button across 12 views
Fix: Extract to a shared component helper
Mixed Icon Systems
FontAwesome on the dashboard, Heroicons in settings, inline SVGs elsewhere
Fix: Consolidate to one icon system with helpers
Safety Guarantees
Uses Your Existing System
Works with your current Tailwind config, components, and patterns. No new dependencies.
Approval Before Changes
You review the standardization map and approve the approach before any code changes.
Incremental Commits
One pattern at a time. Easy to review, easy to revert if needed.
Visual Verification
Screenshots before/after every change. You see exactly what changed.
Test Suite Validation
All changes pass view specs and system tests. No visual regressions.
Never Hard-Codes Values
Everything uses design tokens. Rebrand by changing one file, not hundreds.
What This Is NOT
- ✗ Not a redesign. We standardize what you have, not impose new aesthetics.
- ✗ Not adding dependencies. Uses your existing CSS framework and components.
- ✗ Not a big bang refactor. Incremental changes that don't disrupt your team.
- ✗ Not changing functionality. Only visual consistency—behavior stays the same.
Typical Results
Make Your App Feel Like One Product
Visual consistency builds trust with your users. Start with a $1,500 audit to get a full report on your view inconsistencies with prioritized fixes.