Pf Figma Design Mode

PatternFly Design Mode

Use this skill for write-focused design tasks in Figma.

Required prerequisites

This skill requires two skills from the official Figma plugin — see the [plugin README](../../README.md) for install instructions.

• figma-use — mandatory before every use_figma call; never skip it
• figma-generate-design — required when the task involves creating a full page or screen from code

Rules:

• Never call use_figma directly without first loading figma-use.
• If the task includes broad screen creation from code, pair figma-use with figma-generate-design.

Approved component sources (strict)

Use components and patterns only from the files listed in references/approved-sources.md.

Rules:

• Do not use components from any other library or file.
• Only use semantic design tokens and spacers from the approved files.
• Do not create ad-hoc replacement components when an approved component/pattern exists.
• If a needed component/pattern is missing in these sources, stop and ask the user before proceeding.

Pattern-first selection (strict)

Whenever possible, prefer larger patterns denoted with the 🧰 emoji.

• Select 🧰 patterns before assembling equivalent UI from smaller components.
• Only compose from smaller components when no suitable 🧰 pattern exists for the requirement.

Page creation behavior (strict)

If the user asks to "make a new page":

• Do not replace, clear, or mutate existing page content as the starting point.
• Create a new top-level frame for subsequent changes.
• Apply all new work to that new frame unless the user explicitly asks to edit an existing frame.

When to use

Use this skill when a request includes one or more of the following:

• "Create this in Figma", "edit this Figma file", "update this screen"
• "Make a new page" or equivalent phrasing for a new screen
• Layout restructuring (auto-layout, spacing, constraints, frame hierarchy)
• Component/variant updates, token/variable binding, or style cleanup
• Figma URL-driven implementation work

Workflow

1. Confirm target

• Identify fileKey and nodeId from the Figma URL when provided.
• Clarify expected output (new frame, edits to an existing frame, component updates).

1. Load prerequisite skill

• Invoke the figma-use skill instructions first.

1. Resolve approved assets with pattern-first priority

• Search and import from the approved PatternFly files only (see references/approved-sources.md).
• Prefer matching 🧰 patterns first, then fall back to smaller components if needed.
• Verify each chosen component/pattern comes from an approved source.

1. Handle page intent

• If request is "make a new page", create a new top-level frame first.
• Otherwise, edit only the user-specified existing frame/scope.

1. Make incremental edits

• Prefer editing existing nodes/components over rebuilding from scratch (except new-page requests).
• Use approved design-system components and variables instead of hardcoded values.
• Apply changes in small batches and verify after each batch.

1. Validate outcome

• Check hierarchy, alignment, spacing, constraints, and variant states.
• Ensure all inserted components/patterns come from approved sources only.
• Confirm 🧰 patterns were used whenever a suitable option exists.

Guardrails

• Reuse approved library assets first; avoid duplicate ad-hoc components.
• Bind variables/tokens where possible (color, type, spacing, radius).
• Keep names semantic and stable for handoff (frames, components, variants).
• If requirements are ambiguous, ask a focused clarification question before making large edits.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: rh-uxd
• Source: rh-uxd/ai-helpers
• License: MIT

Install and usage instructions live in the source repository linked above.