figma-web-dev-kit

Control Chrome browser tabs directly via Chrome DevTools Protocol (CDP). Use this skill for direct browser-control and debugging tasks: opening tabs, navigating pages, injecting scripts, executing JavaScript, inspecting browser tabs, extracting DOM, or getting page HTML/text. Do not use it for end-to-end UI correctness verification, visual QA, or screenshot evidence reports; use visual-verify for those workflows instead. Triggers on: "Chrome DevTools Protocol", "CDP", "Chrome CDP control", "inject script", "execute JavaScript", "extract DOM", "get page HTML/text", CDP调试, 浏览器CDP控制, 注入脚本, 执行脚本, 提取DOM, 获取页面HTML.

Export Figma design layers to HTML + images based on a natural language description. Use this skill whenever a user provides a Figma URL and wants to extract specific layers, convert Figma designs to HTML, or find and export matching design components from a Figma file. Triggers on: Figma URL + description of what to extract, "从Figma导出", "Figma转HTML", "extract from Figma", "Figma layer export", or any request involving Figma design-to-code conversion.

Refactor selected Figma nodes for web implementation by creating a strong visual-equivalent target HTML first, validating that target HTML, then editing Figma structure to match the target intent while preserving visual intent. Use this skill whenever the user asks to optimize a Figma design for web, make a Figma node more HTML/CSS friendly, convert absolute-looking design structure into Auto Layout/component-like structure, or run /figma-web-refactor. This workflow intentionally does not use repeated figma-to-html regeneration as an optimizer feedback loop because the exporter can fail to express valid Figma structure as flex/grid HTML.

Figma visual inspection for design-to-implementation visual QA. Use this skill only when the task provides a Figma URL or exported Figma HTML and a dev page to compare against, using Chrome CDP and Visual Element Tree (VET) overlays to inspect layout, spacing, style, and annotated evidence. If there is no Figma source, use visual-verify instead. Triggers on: Figma视觉走查, Figma还原度, 设计稿对比, 走查, Figma URL + page comparison, exported Figma HTML + page comparison, visual diff against Figma, compare dev page to Figma, 页面和设计稿diff, 还原度检查, 标注视觉差异.