Figma Implement Design

figma/mcp-server-guideOfficial

Takes a Figma design file and generates production code with pixel-perfect accuracy. You give it a Figma URL or mention implementing a component, and it handles the translation using design tokens and proper structure. The skill explicitly knows its boundaries: if you're editing nodes directly in Figma, it hands off to figma-use; if you're building full screens in Figma from code, it switches to figma-generate-design. Requires the Figma MCP server to be connected. The workflow focuses on 1:1 visual parity rather than interpretation, which is useful when you need implementation to match designs exactly rather than getting a developer's take on what the design probably meant.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.

10

skills.sh installs

4K

GitHub stars

2.2K

last updated

Aug 21, 2026

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Frontend Development

1generating-flexipageforcedotcom/sf-skillsUse this skill when users need to create, generate, modify, or validate Salesforce Lightning pages (FlexiPages). Trigger when users mention RecordPage, AppPage,4Kskills.sh installs

2generating-custom-tabforcedotcom/sf-skillsUse this skill when users need to create or configure Salesforce Custom Tabs. Trigger when users mention tabs, navigation tabs, object tabs, web tabs, Visualfor3.9Kskills.sh installs

3chartstarchild-ai-agent/official-skillsInteractive web charts: line, bar, candle, scatter, with HTML and screenshot output. Use when visualizing data for analysis or BI (e.g. plot BTC vs gold last ye3.9Kskills.sh installs

4generating-custom-lightning-typeforcedotcom/sf-skillsUse this skill when users need to create Custom Lightning Types (CLTs) for Einstein Agent actions or structured input/output schemas. Trigger when users mention3.9Kskills.sh installs

5inngest-setupinngest/inngest-skillsUse when adding durable execution to a TypeScript project — building retry-safe webhook handlers, background jobs that survive crashes, scheduled tasks, or long3.9Kskills.sh installs

6maui-collectionviewdotnet/skillsGuidance for implementing CollectionView in .NET MAUI apps — data display, layouts (list & grid), selection, grouping, scrolling, empty views, templates, increm3.9Kskills.sh installs