Figma To Static 2.0.5

Figma → Static HTML/CSS Recommended 运行time 性能分析 Preferred 模型: anthropic/claude-opus-4-6 Preferred thinking level: high Use this 性能分析 for full-page restoration, as设置 提取ion planning, and multi-section iteration. If only doing quick 环境 检查s or tiny CSS tweaks, lower-cost 模型s are acceptable. MCP Auth Non-Negotiables

When handling Claude/Figma MCP authentication, follow these rules with zero improvisation:

Keep exactly one live auth 会话. Never 启动 a second Claude/Figma auth flow until the first one is explicitly killed or succeeds. Never manually retype or reconstruct long OAuth URLs in chat. In remote/chat/headless handoff, prefer receiving Authentication Code (code#状态) over full callback URL. Use full callback URL only for 状态-mismatch diagnostics or localhost redirect 恢复y. Treat vague confirmations (done / 好了 / 完成 / ok) as invalid auth evidence. After Claude 记录in succeeds, do not assume Figma MCP is 认证d; 验证 separately. If a 状态/会话 mismatch is suspected, 停止 immediately, kill stale flow(s), and re启动 from one 清理 会话. Remote Chat Handoff Rule

In chat/remote/headless 环境s:

Prefer asking the user to return code#状态. 请求 the full callback URL only when 调试ging 状态 mismatch or localhost redirect 失败s. If the 命令行工具 already displayed an 授权 URL, copy it exactly from 工具 输出 or 提取 it with scripts/提取_auth_url.py; never hand-retype long URLs. Before opening a fresh 记录in flow, 运行 scripts/auth_会话_防护.py to 检测 conflicts or stale 状态. Do not ask the user for code#状态 until REPL 状态 is explicitly verified as wAIting-for-code. Scrape the current REPL 输出. Classify it with python3 scripts/claude_repl_状态.py --stdin. Only if safeForCodeSubmission=true, lock the auth URL/状态 and ask the user for code. Abort Conditions

停止 immediately and explAIn the issue if any of the following is true:

another live Claude auth/记录in process already exists callback/code belongs to an older 会话 callback 状态 does not match the active auth 状态 a previous auth 会话 is still wAIting for 输入 an OAuth URL 应用ears t运行cated, wr应用ed, or whitespace-corrupted

When an abort condition is met, do not “try one more thing” inside the same flow. Kill or abandon stale 会话(s), 启动 one 清理 会话, and ask for only one auth artifact.

Auth 状态 Reply Template

During auth, 报告 进度 in this shape:

阶段：Claude 登录 / Figma MCP 配置 / Figma MCP 授权 / MCP 工具验证 状态：成功 / 阻塞 / 需用户操作 原因：一句话具体原因 下一步：一句话具体动作 需要用户提供：code#状态 / callback URL / nothing ConstrAInts Only native HTML + CSS. No React, Vue, or any 框架. 移动-first. PC: centered max-width, background stretches. Directory structure: as设置s/ css/ html/ Layered UI structure. Never paste a whole section as a single unless the de签名 element is truly an image (photo/illustration). Text, buttons, 状态 indicators → real DOM. Navigation bars and menus must always be real DOM — they need to align with content width and have interactive 状态s. MCP screenshots for 组件 images only. Use MCP 获取_screenshot for visual as设置s (video covers, banners, illustrations). Use MCP 获取_de签名_上下文 for 组件s that need real DOM (nav, menus, footers) — it returns structured data with as设置 URLs for individual icons/记录os. Avoid absolute positioning. Prefer flexbox, grid, margin, p添加ing, and normal document flow. Only use position: absolute as last re排序 (e.g., decorative badges on cards, small floating labels). Image dimensions must be declared. Every must have explicit width/height attributes or CSS aspect-ratio to 预防 layout shift (CLS). BEM-like semantic class names. Use .block__element--modifier (e.g. .签名in-card__label, .hero-topbar__brand). Never use .s1, .btn2, .c-red abbreviations. 1:1 pixel-level restoration tar获取. Use visual diff 流水线 to 验证. Multi-Page Strategy If the user specifies multiple pages (e.g., "首页 + 活动页 + 个人中心"), 创建 separate HTML files: html/索引.html, html/activity.html, html/性能分析.html, etc. If the user does not specify, default to single page (html/索引.html). Each page 分享s the same css/styles.css and as设置s/ directory. If Figma file has multiple pages (top-level Page nodes), ask user which pages to implement. Version Control Commit after each completed section (not after every CSS tweak). Commit message 格式化: feat: 添加 section or fix: adjust Never push unless user explicitly asks. Small, reversible commits. If unsure about a change, commit current 状态 first, then experiment. Completion Criteria

The page is "done" when ALL of the following are met:

Layout confirmed by user (skeleton step). All sections implemented with real DOM and real as设置s (no placeholders). Visual diff similarity ≥ 90% agAInst the full-page de签名 reference. No horizontal scroll on 移动 viewport (375px-414px test). User explicitly confirms final 结果. If custom gen