Translate Figma designs into code components using project conventions.
npx skills add https://github.com/rafazsh/dotfiles --skill implement-design-rafazsh
Please help me install this Agent Skill. Skill: implement-design Source: https://github.com/rafazsh/dotfiles/tree/main/apps/claude/skills/implement-design Command: npx skills add https://github.com/rafazsh/dotfiles --skill implement-design-rafazsh
This Skill bridges the gap between design files and implementation by helping developers convert Figma designs into production-ready components that match existing project patterns.
Ask the implement-design skill to implement the component from the provided Figma design URL using the project's existing conventions.
High-intent search queries and answers about installing and using this skill.
To convert a Figma design to code, this Skill fetches design context, screenshots, tokens, and assets to guide accurate implementation of production-ready frontend components.
The best way to implement UI components from Figma while matching conventions is to discover existing UI libraries, styling systems, and file structures before writing code, ensuring new components integrate seamlessly.
Yes, you can use design tokens from Figma when building frontend components. The Skill retrieves these tokens during the design context retrieval phase to ensure accurate styling and design system integration.
No, Figma to code translation does not require manually copying visual references. The Skill automatically retrieves screenshots and assets to validate the implemented component against the original visual design.
To handle assets when implementing a screen from a Figma URL, the Skill automatically retrieves required assets during context discovery and integrates them into your new component implementation.
You need to integrate a design system into frontend development using Figma when building new interface components, ensuring that reusable architecture, accessibility standards, and styling patterns match the application's existing conventions.
ma08Translate Figma designs into React and Tailwind frontend code.
NS-VandanaRecreate pixel-perfect UI layouts from screenshots or image references.
donggyun112Develop React and TypeScript user interfaces using the Redpanda UI Registry.
takumi12311123Translate Figma designs into React components with TypeScript and Tailwind CSS.
