Figma Design System Rules
Independent PiSkill directory guide. The original skill remains hosted by OpenAI Skills.
What is Figma Design System Rules?
Creates repository-specific design-system rules from Figma and code evidence, covering tokens, components, naming, layout, accessibility, and implementation constraints.
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.
Implement Figma Designs
Turns a Figma design into production code while reusing the repository's components, tokens, assets, responsive patterns, and accessibility conventions.
Microsoft Frontend Design Review
Reviews frontend implementations for visual hierarchy, spacing, responsiveness, interaction quality, consistency, and accessibility using evidence from the current interface.
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.
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.