Agent skill · practicalswan
figma-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.
What it needs
About 11k tokens when loaded.
What this skill does
Build / Update Screens and Views from Design System Use this skill to create or update screens, views, and multi-section UI containers in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. This includes full pages, modals, dialogs, drawers, sidebars, panels, and any composed view with multiple sections. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors. MANDATORY: You MUST also load figma-use before any usefigma call. That skill contains critical rules (color ranges, font loading, etc.) that apply to every script you write. Always include figma-generate-design in the comma-separated skillNames parameter when calling usefigma as part of this skill. If this skill was loaded via an MCP resource, you MUST prefix the name with resource: (e.g. resource:figma-generate-design). This is a logging parameter — it does not affect execution. Skill Boundaries Use this skill when the deliverable is a composed Figma view (new or updated) — full-page screens, modals, dialogs, drawers, sidebars, panels, or any multi-section container — built from design system component instances. If the user wants to create new reusable components or variants, use figma-use directly. If the user wants to write Code Connect mappings, switch to figma-code-connect. Prerequisites Figma MCP server must be connected The target Figma file must have a published design system with components (or access to a team library) User must provide a target Figma file (URL or fileKey). If they don't have one yet, invoke /figma-create-new-file (or call createnewfile) first and reuse the returned filekey. Both usefigma and generatefigmadesign require an existing fileKey. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills practicalswan/figma-generate-design