Search
Figma · For frontend developers
Skills
Sort:BestMost starsTrending todayTrending this weekTrending this monthNewestRecently updatedName
| # | Skill | Repository | Stars | Used in | Tokens | Auto-check | Licence | Updated |
|---|---|---|---|---|---|---|---|---|
| 49 | Reproduces and adjusts web layouts from Figma, Claude Design exports, screenshots, or an existing project style with high visual fidelity and proportional verification. | pavel-molyanov/ | 297 | — | ~1.4k | Automated safety check: Pass | MIT | 1 mo ago |
| 50 | A skill your agent uses when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual… | noemuch/ | 156 | — | ~2.4k | Automated safety check: Pass | MIT | 4 mo ago |
| 51 | Implement application views from design images (screenshots, mockups, wireframes) using Ignite UI Web Components, with the igniteui-cli and igniteui-theming MCP servers for component discovery… | IgniteUI/ | 170 | — | ~4.6k | Automated safety check: Pass | MIT | 2 days ago |
| 52 | Write a six-section prose description (purpose, props, anti-patterns, composition, accessibility, examples) for a Figma component's description field so LLMs read it via MCP. | murphytrueman/ | 206 | — | ~4.7k | Automated safety check: Pass | MIT | 17 days ago |
| 53 | 53.Sync Icons Sync icons from the Figma file into icon and open a PR by dispatching the figma-icon-sync-code-connect.yml GitHub Actions workflow. | wanteddev/ | 117 | — | ~1.9k | Automated safety check: Pass | MIT | yesterday |
| 54 | A skill your agent uses when the user says "done", "ship it", "finish", "complete", "archive", or otherwise indicates the current design is ready to be shipped. | noemuch/ | 156 | — | ~1.7k | Automated safety check: Pass | MIT | 4 mo ago |
| 55 | Install and integrate Ignite UI Web Components packages into React, Angular, Vue 3, LitElement, or vanilla JS/HTML apps, detecting the framework and applying framework-specific setup (package… | IgniteUI/ | 170 | — | ~1.4k | Automated safety check: Pass | MIT | 2 days ago |
| 56 | 56.Figma Design-to-code workflow for Figma designs. An agent skill from epam/ai-dial-chat. | epam/ | 504 | — | ~997 | Automated safety check: Pass | Apache-2.0 | today |
| 57 | 57.Figma Implement an already chosen Figma target faithfully while verifying unrepresented behavior, states and responsive gaps. | 3x-haust/ | 198 | — | ~474 | Automated safety check: Pass | MIT | 6 days ago |
| 58 | Builds Angular views from Figma designs with Ignite UI for Angular, supporting Indigo.Design kits, third-party kits, and plain frames. | IgniteUI/ | 599 | — | ~6.4k | Automated safety check: Pass | MIT | yesterday |
| 59 | Frontend component patterns, composition, design token integration, barrel file organization, error handling, and Figma-to-code workflow. | TheSoftwareHouse/ | 284 | — | ~2.6k | Automated safety check: Pass | MIT | 5 days ago |
| 60 | Inspects Figma designs through the figma CLI and Figma's MCP server to read variants, spacing, tokens and layouts and to extract assets for implementation. | asgeirtj/ | 69k | — | ~936 | Automated safety check: Pass | CC0-1.0 | today |
| 61 | Convert Figma designs to GenerateBlocks V2 format for WordPress | wpgaurav/ | 136 | — | ~850 | Automated safety check: Pass | No licence | 5 days ago |
| 62 | 62.Figma MCP Use the Figma MCP server to translate a Figma design into a Vue page or component layout. | Mystic-Stars/ | 517 | — | ~388 | Automated safety check: Pass | Unknown | today |
| 63 | 适用：根据已批准任务、产品规则、原型或 Figma 输入生成、审计或执行 Version 1 UI 行为 Spec。不适用：替代产品决策、实现 UI、操作系统原生界面或探索未定义流程。触发词：UI Spec、行为契约、plan-spec、spec-writer、spec-auditor、app-operator、Marionette 验收。 | bladeofgod/ | 116 | — | ~1.4k | Automated safety check: Pass | MIT | 1 mo ago |
| 64 | 64.Dsds Update Update an existing DSDS spec based on implementation changes, Figma updates, or written instructions. | somerandomdude/ | 116 | — | ~1.2k | Automated safety check: Pass | Apache-2.0 | yesterday |
| 65 | 65.Figma Professional Figma design analysis and asset export. An agent skill from sundial-org/awesome-openclaw-skills. | sundial-org/ | 663 | — | ~1.7k | Automated safety check: Notes | No licence | 7 mo ago |
| 66 | Responsive (mobile + desktop) layout workflow. An agent skill from epam/ai-dial-chat. | epam/ | 504 | — | ~2.7k | Automated safety check: Pass | Apache-2.0 | today |
| 67 | 67.Using Bridge A skill your agent uses when any Bridge command is invoked (make, fix, done, setup, drop, status) or any Figma / design-system / compiler / Bridge workflow topic is raised. | noemuch/ | 156 | — | ~1.4k | Automated safety check: Pass | MIT | 4 mo ago |
| 68 | Create React components, hooks, or utilities following the modlet pattern. | bitovi/ | 121 | — | ~2.1k | Automated safety check: Pass | MIT | 1 mo ago |
| 69 | 69.Figma Access Figma design files using native pi tools — read LLM-ready summaries, explanations, implementation context, screenshots, components, styles, variables, and design tokens. | emanuelcasco/ | 106 | — | ~1.5k | Automated safety check: Pass | MIT | 1 mo ago |
| 70 | Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code. | coinbase/ | 506 | — | ~4.9k | Automated safety check: Pass | Apache-2.0 | 4 days ago |
| 71 | Add a new component to the design-system library, or formalize an existing one — scaffold its colocated .spec.json, classify its tier, author a Storybook story, and link it to Figma. | mqtt-viewer/ | 134 | — | ~936 | Automated safety check: Pass | GPL-3.0 | 3 days ago |
| 72 | 72.Vibe Design Vibe Coding 流水线第 4 步:视觉设计准则。design.md 是【用户提供】的网站视觉设计系统 (Google DESIGN.md / awesome-design-md 格式),本 skill 不画图、不生成视觉,而是 【承接 + 结构化 + 校验】用户提供的视觉来源,固化成标准 design.md,作为下游 vibe-prototype 出图与 vibe-implement… | idiotLeoLYJ/ | 140 | — | ~2.3k | Automated safety check: Pass | No licence | 1 mo ago |
| 73 | Bridge Figma MCP output to Stellar Lab code conventions. An agent skill from stellar/laboratory. | stellar/ | 112 | — | ~520 | Automated safety check: Pass | Apache-2.0 | yesterday |
| 74 | Implement a Figma→code handover doc — apply the listed changes to Svelte components, update their colocated .spec.json and stories, and get pnpm ds:validate green. | mqtt-viewer/ | 134 | — | ~853 | Automated safety check: Pass | GPL-3.0 | 3 days ago |
| 75 | Update an existing Blade component (web only) using Figma designs and knowledgebase documentation | razorpay/ | 656 | — | ~1k | Automated safety check: Pass | MIT | yesterday |
| 76 | 76.Uui Themes Helps work with UUI themes including generating theme tokens from Figma, working with skin packages, and connecting external themes. | epam/ | 248 | — | ~1.4k | Automated safety check: Pass | MIT | 12 days ago |
| 77 | Identify the right Ignite UI Web Components (igniteui-webcomponents, grids, charts, dock manager, React wrappers) for a UI requirement and point to official docs, examples, and API references. | IgniteUI/ | 170 | — | ~4.6k | Automated safety check: Pass | MIT | 2 days ago |
| 78 | 78.Figma Use This skill should be used when the user asks to "create a Figma design", "design in Figma", "make a Figma mockup", "create an app icon", "design UI", "render JSX to Figma", "export from Figma"… | shepherdjerred/ | 112 | — | ~946 | Automated safety check: Pass | GPL-3.0 | today |
| 79 | 用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时，也应与 axhub-commentary 组合。 | lintendo/ | 130 | — | ~630 | Automated safety check: Pass | MIT | 1 mo ago |
| 80 | Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the… | textura-agency/ | 135 | — | ~1.4k | Automated safety check: Notes | Unlicense | yesterday |
| 81 | Visually verify component changes in Storybook using the agent-browser CLI tool | razorpay/ | 656 | — | ~1.1k | Automated safety check: Pass | MIT | yesterday |
| 82 | Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). | tech-leads-club/ | 7k | — | ~2.9k | Automated safety check: Pass | Apache-2.0 | 2 days ago |
| 83 | Builds Ignite UI Web Components views from Figma designs, supporting Indigo.Design kits, third-party kits (Material 3, Fluent 2, shadcn/ui, Untitled UI, in-house), and plain frames. | IgniteUI/ | 170 | — | ~7.2k | Automated safety check: Pass | MIT | 2 days ago |
| 84 | Recreate a UI screenshot, mockup, or design image as production-quality React + TypeScript + Tailwind code with near-pixel-perfect visual fidelity. | buildfastwithai/ | 785 | — | ~2.9k | Automated safety check: Pass | MIT | 19 days ago |
| 85 | Detect and fix AI design slop — the convergent look that shows up across AI-generated landing pages and dashboards (purple/indigo gradients, rounded-2xl everywhere, three-box feature grids, bento… | KartikLabhshetwar/ | 2.4k | — | ~2.5k | Automated safety check: Pass | Unknown | today |
| 86 | 86.Figma Expert Figma design expert for components, auto-layout, design systems, and developer handoff | RightNow-AI/ | 18k | — | ~928 | Automated safety check: Pass | Apache-2.0 | 3 mo ago |
| 87 | Guides design, implementation and review of Shift interface work: shared Base UI wrappers, Tailwind v4 theme tokens, Figma matching and accessible interaction states. | shift-editor/ | 350 | — | ~2.5k | Automated safety check: Pass | Apache-2.0 | today |
| 88 | 为 iPolloWork 新插件或插件工作区复用 UI 组件、颜色、字体及交互规范。按 Figma 成熟状态和代码清单优先采用已确认组件，区分宿主 React 与独立 HTML/iframe 的接入方式；适用于插件表单、导航、浮层、反馈、状态和进度设计及实现，不改变用户作品的视觉风格。 | Devin-AXIS/ | 6.8k | — | ~1.3k | Automated safety check: Pass | Unknown | yesterday |
| 89 | 한국 신입 취준생·재직자를 위한 분야별 포트폴리오 구성과 프로젝트 기술서 작성 스킬입니다. An agent skill from modu-ai/moai-cowork. | modu-ai/ | 306 | — | ~1.9k | Automated safety check: Pass | Apache-2.0 | 2 days ago |
| 90 | Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). | davila7/ | 33k | 1 repo | ~2.9k | Automated safety check: Pass | Apache-2.0 | today |
| 91 | 适用：读取 Figma 或根据节点实现 Flutter UI，包括 Token 反查、Auto Layout、组件 Variant、Asset 和视觉验证。不适用：替代产品决策，或从像素推断设计稿不可见的数据行为。触发词：Figma URL、node-id、design-to-code、视觉还原、Auto Layout、design token。 | bladeofgod/ | 116 | — | ~270 | Automated safety check: Pass | MIT | 1 mo ago |
| 92 | Convention DESIGN.md pour design systems AI-friendly. An agent skill from TheBeardedBearSAS/claude-craft. | TheBeardedBearSAS/ | 107 | — | ~1.1k | Automated safety check: Pass | MIT | 27 days ago |
| 93 | Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. | sickn33/ | 47k | 2 repos | ~2.7k | Automated safety check: Pass | MIT | 2 days ago |
| 94 | Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. | JetBrains/ | 366 | 5 repos | ~833 | Automated safety check: Pass | Apache-2.0 | 3 mo ago |
| 95 | Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity… | plugin87/ | 1.6k | — | ~585 | Automated safety check: Pass | MIT | 3 days ago |
| 96 | 96.Code Writing Guides code implementation through proportional context reading, focused changes, verification, and fresh reviews. | pavel-molyanov/ | 297 | — | ~1.4k | Automated safety check: Pass | MIT | 1 mo ago |
