Synchronize web implementations with Figma designs through automated visual comparison, screenshot capture, and precise correction to achieve pixel-perfect alignment.
Synchronizes web implementations with Figma designs through automated visual comparison, screenshot capture, and precise correction to achieve pixel-perfect alignment.
/plugin marketplace add KreativReason/merged-end-to-end-ai-dpp---e2e-cli/plugin install kreativreason-e2e-pipeline@kreativreason-marketplaceSynchronize web implementations with Figma designs through automated visual comparison, screenshot capture, and precise correction to achieve pixel-perfect alignment.
1. Extract design specs from Figma (via MCP)
2. Screenshot current implementation (via Playwright)
3. Compare systematically
4. Document discrepancies
5. Apply fixes
6. Verify with new screenshot
{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://api.figma.com/v1/"
}
}
}
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
Access Figma via MCP to retrieve:
Use Playwright to screenshot:
// Full page
await page.screenshot({ path: 'full-page.png', fullPage: true });
// Specific component
const element = await page.$('.hero-section');
await element.screenshot({ path: 'hero.png' });
Compare across dimensions:
| Dimension | Check |
|---|---|
| Layout | Alignment, spacing, proportions |
| Typography | Font, size, weight, color, line-height |
| Colors | Background, text, borders |
| Visual hierarchy | Headlines, sections, emphasis |
| Responsive | Breakpoint behavior |
| Interactive states | Hover, focus, active |
{
"discrepancies": [
{
"id": "DESIGN-001",
"element": ".hero-title",
"property": "font-size",
"current": "48px",
"expected": "56px",
"severity": "medium",
"fix": "text-5xl → text-6xl"
},
{
"id": "DESIGN-002",
"element": ".cta-button",
"property": "background-color",
"current": "#3B82F6",
"expected": "#2563EB",
"severity": "low",
"fix": "bg-blue-500 → bg-blue-600"
}
]
}
For each discrepancy:
Components should maintain full width (w-full) without max-width constraints.
Width restrictions belong in parent wrapper divs.
Recommended Wrapper Pattern:
<div class="w-full max-w-screen-xl mx-auto px-5 md:px-8">
<MyComponent />
</div>
Prefer default spacing scale over arbitrary values:
/* Good: Use Tailwind defaults */
gap-10 /* 40px */
/* Avoid: Arbitrary values */
gap-[40px]
Mobile-first responsive:
<div class="flex flex-col lg:flex-row gap-6 lg:gap-10">
{
"artifact_type": "design_sync_report",
"status": "synced|discrepancies|in_progress",
"data": {
"figma_file": "https://figma.com/file/xxx",
"page": "Homepage",
"screenshots": {
"before": "screenshots/before-sync.png",
"after": "screenshots/after-sync.png"
},
"analysis": {
"total_elements": 24,
"matching": 20,
"discrepancies": 4,
"fixed": 4
},
"discrepancies": [...],
"fixes_applied": [
{
"file": "src/components/Hero.tsx",
"line": 12,
"change": "text-5xl → text-6xl"
}
],
"verification": {
"screenshot": "screenshots/verified.png",
"status": "pixel_perfect"
}
}
}
while (discrepancies.length > 0) {
screenshot()
analyze()
fix(top_discrepancy)
verify()
}
Success criteria:
You are an elite AI agent architect specializing in crafting high-performance agent configurations. Your expertise lies in translating user requirements into precisely-tuned agent specifications that maximize effectiveness and reliability.