# Pf Figma Design Mode

> Create and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.

- **Type:** Skill
- **Install:** `agentstack add skill-rh-uxd-ai-helpers-pf-figma-design-mode`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [rh-uxd](https://agentstack.voostack.com/s/rh-uxd)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [rh-uxd](https://github.com/rh-uxd)
- **Source:** https://github.com/rh-uxd/ai-helpers/tree/main/plugins/patternfly/pf-design-guide/skills/pf-figma-design-mode

## Install

```sh
agentstack add skill-rh-uxd-ai-helpers-pf-figma-design-mode
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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).

2. Load prerequisite skill
   - Invoke the `figma-use` skill instructions first.

3. 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.

4. 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.

5. 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.

6. 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](https://github.com/rh-uxd)
- **Source:** [rh-uxd/ai-helpers](https://github.com/rh-uxd/ai-helpers)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-rh-uxd-ai-helpers-pf-figma-design-mode
- Seller: https://agentstack.voostack.com/s/rh-uxd
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.