Design To Code Loop

Apply brand tokens from templates into SPA CSS.

Skill metadata

Source	Bundled (installed by default)
Path	skills/creative/design-to-code-loop
Version	1.1.0
Author	VibeOS
License	MIT
Platforms	linux, macos, windows
Tags	design, tokens, css, popular-web-designs, nextjs, ui, figma
Related skills	popular-web-designs, design-md, claude-design, figma-edit, internet-starter, ship-web-service, browser-e2e, desktop-local-preview, saas-mcp-onboarding

Reference: full SKILL.md

info

The following is the complete skill definition that VibeOS loads when this skill is triggered. This is what the agent sees as instructions when the skill is active.

Design → Code Loop

Cursor-style design-to-code without an IDE Design sidebar: pick a popular-web-designs brand (or Figma / screenshot brief) → extract CSS variables → patch into the SPA → verify with browser / desktop preview.

When to Use

• After internet-starter / fullstack scaffold, before polish
• User asks for “make it look like Stripe / Linear / Vercel”
• Bridging a screenshot brief or Figma link into concrete CSS tokens

Prerequisites

• A brand template under popular-web-designs/templates/<brand>.md or a Figma file URL with MCP enabled or a screenshot to analyze
• Target app with a CSS entry (app/globals.css, styles.css, etc.)
• Optional: design-md if the deliverable is a formal DESIGN.md instead
• Optional Figma: vibeos mcp install figma + OAuth (see saas-mcp-onboarding)

How to Run

Path A — brand template (default)

1. Choose a brand (e.g. stripe, linear.app, vercel).
2. Extract tokens:

python3 skills/creative/design-to-code-loop/scripts/extract_design_tokens.py \
  skills/creative/popular-web-designs/templates/stripe.md \
  -o ./tokens.css

3. Merge into the SPA: read_file the app CSS, patch to import or paste :root { --color-… } from tokens.css. Paste the Google Fonts <link> from the CSS comment into layout.tsx / HTML head.
4. Apply roles: map --color-* to buttons, headings, backgrounds (do not leave unused token dump — wire primary CTA + body at minimum).
5. Smoke: browser_navigate + browser_vision, or desktop /preview (desktop-local-preview).
6. Optional formalize: export a DESIGN.md via design-md if the user wants a durable token spec.

Path B — Figma MCP

1. Enable Figma MCP (read-first): vibeos mcp install figma → login → new session.
2. Paste the Figma file/selection URL; use MCP inspect tools (skill figma-edit).
3. Write a short design-notes.md with hex colors, font stacks, spacing.
4. Run the extractor on that notes file or hand-build :root tokens and patch — same merge/verify steps as Path A.
5. Prefer MCP over computer_use for Figma.

Path C — screenshot / live page

1. User drops a screenshot, or browser_navigate to a reference URL.
2. browser_vision / vision_analyze: list primary/background/text/accent hex
   • font mood (sans/serif) — do not invent colors not visible in the image.
3. Save findings as markdown with **Name** (\#hex`)lines soextract_design_tokens.py` can parse them, then Path A steps 3–5.

Quick Reference

Step	Surface
Brand vocabulary	popular-web-designs
Figma file	MCP figma + figma-edit
Screenshot / page	browser_vision / vision_analyze
Extract CSS/JSON	extract_design_tokens.py
Formal spec	design-md
Taste / variants	claude-design
Verify	browser-e2e / /preview

Procedure

1. Prefer one brand per pass — do not mix Linear + Stripe tokens.
2. Keep token names from the extractor; rename only when colliding with existing CSS variables.
3. After patch, run network/health checks unchanged — design must not break /health.
4. Stop when primary page matches brand colors/fonts in a snapshot; iterate with patch, not full rewrites.

Pitfalls

• Do not invent hex values — only use extracted, Figma, vision, or DESIGN.md tokens.
• Do not add a core “design” tool or IDE Design sidebar; this skill + patch is enough.
• Proprietary fonts in templates have CDN substitutes in VibeOS notes — use those.
• Figma mutations only when the user asks and write tools are enabled.

Verification

• tokens.css contains ≥5 --color-* variables.
• Primary page uses at least background, text, and accent from tokens.
• Browser/desktop preview shows the brand accent on a CTA or link.