Variant Workflow

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

1. Export from Variant
2. Convert to React (strict copying)
3. Deploy to Vercel
4. Verify it looks identical
5. Test on mobile
6. Done!

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

Phase 7: Production → Social Videos (NEW)

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)

1. Copy everything - Every style, every value, every gradient
2. Only change syntax - class → className, that's it
3. If it looks different - You changed too much, copy more strictly
4. 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

• Screenshot Variant preview
• Screenshot deployed site
• Compare side-by-side
• Check: gradients match
• Check: spacing matches
• Check: animations work
• Check: no new boxes/cards

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