Figma Design Token Exporter
Extracts design tokens from Figma files using the Figma REST API v1 and transforms them into platform-specific formats via Style Dictionary. Supports CSS custom properties, Tailwind config, and iOS/Android native tokens.
Browse reusable instructions for your AI tools. Copy and customize a prompt, or download a skill for a supported agent.

Extracts design tokens from Figma files using the Figma REST API v1 and transforms them into platform-specific formats via Style Dictionary. Supports CSS custom properties, Tailwind config, and iOS/Android native tokens.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Apple Human Interface Guidelines for content display components.
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.
Apple Human Interface Guidelines for layout and navigation components.
Apple Human Interface Guidelines for platform-specific design.
Apple Human Interface Guidelines design foundations.
Apple Human Interface Guidelines interaction and UX patterns.
Use when generating branded HTML pages and components from a design system. Creates standalone HTML components and composes them into full pages with embedded CSS, responsive design, and brand integration.
Package sketch design findings into a persistent project skill for future build conversations
Sketch UI/design ideas with throwaway HTML mockups, or propose what to sketch next (frontier mode)
Generate UI design contract (UI-SPEC.md) for frontend phases
Generate appealing, high-quality iOS and Android app icons following each platform's design guidelines. Handles specifications, safe zones, export formats, and platform-specific requirements.
Run the full Figma design-to-code workflow — extract, prototype, verify — all in one command. Use when a story has a Figma URL and you want to turn a design into a verified prototype. Trigger on "figma all", "full figma", "extract and prototype".
Extract design context, tokens, and screenshots from a Figma URL. Saves figma-extract.md and reference screenshots. Use after requirements phase when a Figma URL is in the story. Trigger on "extract figma", "figma design", "get figma". Do NOT use for general Figma browsing, viewing designs withou...
Design and render graphics on HTML5 Canvas — illustrations, diagrams, UI mockups, and interactive visual elements.
Convert any UI to a polished dark mode — semantic color tokens, system preference detection, and smooth transitions.
Generate consistent icon sets in SVG — line icons, filled icons, duotone, and multi-size PNG exports for apps and websites.
Build complete design systems — component tokens, Storybook stories, Figma variables, and living style guides.
Try another platform, a broader search, or fewer filters.
Explore all resourcesResource formats: Prompts are ready to copy into a conversation. Skills install into the compatible agent shown on their page.
How it worksInclude the instructions, intended platforms, author, and license. Submissions are reviewed before publication.