Variant Workflow

March 10, 2026 · View on GitHub

Keep your designs pixel-perfect when converting Variant.com exports to real websites.

What This Does

Variant.com makes beautiful designs. But when you convert them to code, AI usually "helps" by:

Cleaning up the CSS
Making it "more organized"
Simplifying gradients
Creating components

Problem: Your site ends up looking like generic boxes instead of your beautiful Variant design.

This skill: Shows you how to copy Variant code EXACTLY, so your site looks identical to the preview.

Quick Start

Step 1: Export your design from Variant (HTML or React)

Step 2: Use this rule when converting:

Copy everything exactly.
Only change: class → className
Don't clean up, don't organize, don't simplify.
Keep every style, gradient, and spacing value.

Step 3: Deploy and verify it looks identical to Variant preview

Real Example

Theory Menu - https://theory-menu.vercel.app

Exported from Variant
Copied exactly as-is
Only changed framework syntax
Result: Pixel-perfect match ✅

The Full Workflow

Phase 1-6: Variant → Production Website

Export from Variant
Convert to React (strict copying)
Deploy to Vercel
Verify it looks identical
Test on mobile
Done!

Read full guide: SKILL.md (7 phases, examples, troubleshooting)

Turn your website into social media content:

TikTok demos (vertical video)
Instagram Reels
Website hero animations
Product showcase videos

Uses Remotion to generate videos from your React site automatically.

Read guide: SKILL.md Phase 7

When to Use This

✅ Use this workflow when:

Converting Variant exports
Working with any design tool exports
Designs keep reverting to "LLM boxes"
Designer says "it doesn't look like my design"

❌ Don't use when:

Writing code from scratch
Working with design systems
Refactoring existing code

Key Rules (Simple Version)

Copy everything - Every style, every value, every gradient
Only change syntax - class → className, that's it
If it looks different - You changed too much, copy more strictly
Trust the mess - Variant's code is "messy" on purpose

Common Mistakes

❌ Wrong: "Let me clean this up"

// Extracted to CSS file
<div className="hero">

✅ Right: "Copy exactly as-is"

<div style={{
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  padding: '47.3px'
}}>

❌ Wrong: "I'll round this value"

padding: '50px' // Rounded from 47.3px

✅ Right: "Keep exact value"

padding: '47.3px' // Exactly as Variant generated

❌ Wrong: "Let me simplify this gradient"

background: 'linear-gradient(135deg, #667eea, #764ba2)'

✅ Right: "Keep exact gradient"

background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'

What You Get

Pixel-perfect Variant → Production conversion
No more design regressions
No more "why doesn't it look like the preview?"
Optionally: Social media videos from your site

Full Documentation

Read SKILL.md for:

Complete 7-phase workflow
Detailed examples (Theory Menu, Canopy)
Troubleshooting guide
Remotion video generation
Animation templates
Testing checklist

Success Stories

Theory Menu

Variant design with geometric shapes, parallax
Deployed in 2 hours
Pixel-perfect match
https://theory-menu.vercel.app

Canopy Menu v2

Failed first attempt (extracted components)
Second attempt (strict copying)
Success ✅

Quick Reference

Converting Variant HTML → React

Change:

class → className
style="..." → style={{...}}
CSS properties → camelCase

Don't change:

Inline style values
Gradient definitions
Spacing numbers
SVG paths
Animation properties

Verification Checklist

If ANY item fails → copy more strictly.

License

MIT

Made for Claude Code / GhostClaw / OpenClaw

Questions? Issues? Open a GitHub issue or join OpenClawOS Telegram