Figma Code Connect Components
Independent PiSkill directory guide. The original skill remains hosted by OpenAI Skills.
What is 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.
Compatible tools
Related skills
Implement Figma Designs
Turns a Figma design into production code while reusing the repository's components, tokens, assets, responsive patterns, and accessibility conventions.
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.
Figma Design System Rules
Creates repository-specific design-system rules from Figma and code evidence, covering tokens, components, naming, layout, accessibility, and implementation constraints.
Image Generation
Guides image generation and editing for project assets such as illustrations, mockups, textures, sprites, product visuals, and transparent-background graphics.
Microsoft Frontend Design Review
Reviews frontend implementations for visual hierarchy, spacing, responsiveness, interaction quality, consistency, and accessibility using evidence from the current interface.
PPTX
Provides a structured workflow for reading, creating, editing, and visually checking PowerPoint presentations, including template-based and from-scratch slide work.