Implement Figma Designs
Independent PiSkill directory guide. The original skill remains hosted by OpenAI Skills.
What is Implement Figma Designs?
Turns a Figma design into production code while reusing the repository's components, tokens, assets, responsive patterns, and accessibility conventions.
Compatible tools
Related skills
Figma Code Connect Components
Maps Figma design-system components to real code components so agents can preserve established implementation patterns instead of generating disconnected UI markup.
Microsoft Frontend Design Review
Reviews frontend implementations for visual hierarchy, spacing, responsiveness, interaction quality, consistency, and accessibility using evidence from the current interface.
Figma Design System Rules
Creates repository-specific design-system rules from Figma and code evidence, covering tokens, components, naming, layout, accessibility, and implementation constraints.
Frontend Design
Helps an agent design distinctive, production-ready web interfaces with deliberate typography, layout, color, motion, and visual direction instead of generic template styling.
Web Design Guidelines Review
Reviews interface code against Vercel's web interface guidelines covering accessibility, forms, keyboard behavior, focus states, animation, typography, images, and performance.
Image Generation
Guides image generation and editing for project assets such as illustrations, mockups, textures, sprites, product visuals, and transparent-background graphics.