Figma Generate Library

当工作依赖于用户实时浏览器会话或可见的渲染状态，而不是静态抓取时使用，尤其是在浏览器调试上下文或 DevTools 选择的元素或请求、登录仪表板或 CMS 流程、localhost 应用、上传、下载、媒体检查、DOM 或 iframe 检查、Shadow DOM，或看起来像软 404、身份验证墙、反机器人检查或速率限制的浏览器故障时。

Component consistency audit covering state coverage, hierarchy, patterns

Prioritized redesign action plan covering quick wins, medium effort, major rework

Design system bootstrapping and token generation. Takes project context and outputs ready-to-use design tokens, Tailwind config, and CSS variables.

Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.