Перейти к основному содержимому

Перевод: оболочка страницы на русском; тело навыка (SKILL.md) пока на английском — это исходные инструкции агента.

Design To Code Loop

Apply brand tokens from templates into SPA CSS.

Метаданные навыка​

ИсточникВстроенный (установлен по умолчанию)
Путьskills/creative/design-to-code-loop
Версия1.1.0
АвторVibeOS
ЛицензияMIT
Платформыlinux, macos, windows
Тегиdesign, tokens, css, popular-web-designs, nextjs, ui, figma
Связанные навыкиpopular-web-designs, design-md, claude-design, figma-edit, internet-starter, ship-web-service, browser-e2e, desktop-local-preview, saas-mcp-onboarding

Справка: полный SKILL.md​

к сведению

Ниже полное определение навыка, которое VibeOS загружает при активации. Это инструкции, которые видит агент.

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
  1. 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.
  2. Apply roles: map --color-* to buttons, headings, backgrounds (do not leave unused token dump — wire primary CTA + body at minimum).
  3. Smoke: browser_navigate + browser_vision, or desktop /preview (desktop-local-preview).
  4. 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​

StepSurface
Brand vocabularypopular-web-designs
Figma fileMCP figma + figma-edit
Screenshot / pagebrowser_vision / vision_analyze
Extract CSS/JSONextract_design_tokens.py
Formal specdesign-md
Taste / variantsclaude-design
Verifybrowser-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.