File: C:/Users/fred/.codex/.tmp/plugins/plugins/figma/ui/figma-workbench.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Figma Workbench (Draft Widget)</title>
<style>
:root {
--bg1: #071022;
--bg2: #101b36;
--panel: rgba(10, 18, 35, 0.82);
--border: rgba(148, 163, 184, 0.18);
--text: #e5edf9;
--muted: #97a8c7;
--good: #34d399;
--warn: #fbbf24;
--bad: #fb7185;
--accent: #60a5fa;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: ui-sans-serif, system-ui, sans-serif;
color: var(--text);
background:
radial-gradient(80rem 60rem at -10% -10%, rgba(96,165,250,.22), transparent 45%),
radial-gradient(50rem 40rem at 110% 0%, rgba(244,114,182,.18), transparent 55%),
linear-gradient(160deg, var(--bg2), var(--bg1));
padding: 16px;
}
.shell {
max-width: 980px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 14px;
}
.panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
backdrop-filter: blur(8px);
box-shadow: 0 20px 45px rgba(0,0,0,.28);
padding: 14px;
}
.hero {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
h1 { margin: 0; font-size: 18px; }
p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.pill {
border-radius: 999px;
border: 1px solid var(--border);
padding: 6px 10px;
color: var(--accent);
background: rgba(96,165,250,.08);
font-size: 12px;
white-space: nowrap;
}
.section-title { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; color: #cbd5e1; }
.workflow {
display: grid;
gap: 8px;
}
.step {
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px;
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 10px;
align-items: start;
background: rgba(255,255,255,.02);
}
.step .idx {
width: 24px; height: 24px; border-radius: 999px;
display: grid; place-items: center;
background: rgba(96,165,250,.15);
color: #bfdbfe; font-size: 12px; font-weight: 600;
}
.status { font-size: 12px; }
.status.good { color: var(--good); }
.status.warn { color: var(--warn); }
.status.bad { color: var(--bad); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; }
.badge {
display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
font-size: 11px;
}
.k { color: #c4b5fd; }
.w { color: var(--warn); }
.g { color: var(--good); }
.notes { font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 800px) {
.shell { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="shell">
<div class="panel hero">
<div>
<h1>Figma Workbench (Draft)</h1>
<p>Plugin UI concept for design-to-code execution, parity review, and rule setup. In v0 this can be metadata-only.</p>
</div>
<div class="pill">figma-mcp • draft enablement model</div>
</div>
<div class="panel">
<h2 class="section-title">Workflow Checklist</h2>
<div class="workflow">
<div class="step"><div class="idx">1</div><div><strong>Get design context</strong><div class="notes">Fetch exact node context before code generation.</div></div><div class="status good">done</div></div>
<div class="step"><div class="idx">2</div><div><strong>Get screenshot</strong><div class="notes">Use screenshot as source of truth for parity.</div></div><div class="status good">done</div></div>
<div class="step"><div class="idx">3</div><div><strong>Implement using project tokens</strong><div class="notes">Map Figma output to existing design system components.</div></div><div class="status warn">in progress</div></div>
<div class="step"><div class="idx">4</div><div><strong>Parity review</strong><div class="notes">Run a screenshot-based comparison and list deltas.</div></div><div class="status bad">pending</div></div>
</div>
</div>
<div class="panel">
<h2 class="section-title">Plugin Commands</h2>
<table>
<thead><tr><th>Command</th><th>Intent</th><th>Route</th></tr></thead>
<tbody>
<tr><td><code>/implement-from-figma</code></td><td>Design → code</td><td><span class="badge g">implementer</span></td></tr>
<tr><td><code>/create-design-system-rules</code></td><td>Bootstrap rules</td><td><span class="badge k">rules agent</span></td></tr>
<tr><td><code>/connect-figma-components</code></td><td>Code Connect templates</td><td><span class="badge w">code-connect agent</span></td></tr>
<tr><td><code>/review-design-parity</code></td><td>Parity QA</td><td><span class="badge">review agent</span></td></tr>
</tbody>
</table>
</div>
<div class="panel">
<h2 class="section-title">Design Targets (Example)</h2>
<table>
<thead><tr><th>Node</th><th>Type</th><th>Status</th><th>Notes</th></tr></thead>
<tbody>
<tr><td>42-15</td><td>Button</td><td class="g">implemented</td><td>Token mapping complete</td></tr>
<tr><td>42-21</td><td>Input</td><td class="w">partial</td><td>Focus ring differs</td></tr>
<tr><td>55-9</td><td>Card</td><td class="bad">blocked</td><td>Missing local chart primitive</td></tr>
</tbody>
</table>
</div>
<div class="panel">
<h2 class="section-title">Generated Rules Snapshot</h2>
<div class="notes">
<p><strong>Components:</strong> use <code>src/components/ui</code> primitives first; add feature wrappers in <code>src/features/*/components</code>.</p>
<p><strong>Styling:</strong> map Figma colors to CSS variables; avoid hardcoded values; preserve spacing scale.</p>
<p><strong>Assets:</strong> prefer Figma MCP-provided SVG/image payloads over new icon packages.</p>
</div>
</div>
</div>
</body>
</html>