Agent Plugins Marketplace
← All plugins

pf-design-guide

Design guide — component selection, interaction patterns, AI experience patterns, Figma design creation

Claude Code2 Skills

By UXD TeamLicense: MIT7 GitHub starsUpdated last week

Directory evidence

Runtimes
Claude Code
Parsed components
2 skill or MCP entries
Source updated
Sep 16, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install pf-design-guide for Claude Code

Installs for the current user
claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install pf-design-guide@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/rh-uxd/ai-helpers

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/patternfly/pf-design-guide/.

Plugin files

plugins/patternfly/pf-design-guide/
├── .claude-plugin/plugin.json
├── skills/pf-figma-design-mode/SKILL.md
└── skills/pf-screenshot-mapping/SKILL.md

Included Skills2

pf-figma-design-modeskills/pf-figma-design-mode/SKILL.md

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

pf-screenshot-mappingskills/pf-screenshot-mapping/SKILL.md

Maps screenshots and UI mockups (any fidelity) to PatternFly 6 layout and building-block components. Output uses PF Component Mapping (regions, PF6 direction including structure and behavior, doc links) and PF Gaps & Recommendations (structural gaps/stretches and design-system follow-ups). Omits branding and visual styling (logos, colors, typography, border radius, shadows, component shape). Use when the user shares a UI image or asks whether a screen can be built with PatternFly, which PatternFly components to use, or for a PatternFly component pass on a wireframe, lo-fi, or third-party UI reference.

Plugin manifests1

plugins/patternfly/pf-design-guide/.claude-plugin/plugin.json
{
  "name": "pf-design-guide",
  "description": "Design guide — component selection, interaction patterns, AI experience patterns, Figma design creation",
  "dependencies": [
    "pf-mcp"
  ],
  "author": {
    "name": "UXD Team",
    "url": "https://www.patternfly.org"
  },
  "repository": "https://github.com/rh-uxd/ai-helpers",
  "license": "MIT",
  "keywords": [
    "patternfly"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[pf-design-guide on Agent Plugins Marketplace](https://pluginsmp.com/plugins/pf-design-guide)