メニュー
Diff Figma designs to identify what changed and generate code update checklists. Use when syncing code with updated designs or reviewing what changed between iterations. Requires Figma MCP.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Integrate @patternfly/design-comments into React apps for on-page design feedback, pinned comment threads, GitHub Issues sync, and Jira linking. Use when adding design comments, review overlays, or removing the commenting system from a PatternFly React project.
Check Figma designs against PatternFly v6 standards for colors, typography, spacing, and component usage. Use when validating a design before handoff, auditing existing mockups for compliance, or reviewing design token usage. Requires Figma MCP.
Identify PatternFly icons in Figma mockups and provide the correct React import statements. Use when implementing a design from Figma, verifying icon usage in a prototype, or finding the correct icon imports for React components. Requires Figma MCP.
Find raw color values (hex, rgb, hsl) in code and suggest PatternFly design token replacements. Use when auditing stylesheets for hardcoded colors or enforcing token compliance.
Audit designs against the PatternFly 6 token architecture and bridge Figma styles to PF semantic tokens. Use when validating token usage, mapping Figma variables to PF tokens, or checking designs for token compliance.
Apply Red Hat's AI design language to AI-powered features — chatbots, assistants, generation UIs. Use when building AI experiences that should follow Red Hat brand and UX patterns.
| name | figma-changes |
| description | Diff Figma designs to identify what changed and generate code update checklists. Use when syncing code with updated designs or reviewing what changed between iterations. Requires Figma MCP. |
| version | 3.1.0 |
Track Figma design updates and generate code checklists for PatternFly.
FIGMA_CHANGELOG.md - Internal design team changelog with all updates RELEASE_NOTES.md - Consumer-facing release notes figma-updates-[date].md - Detailed checklist with token changes
See report-templates.md for full template examples.
For each component update, focus on:
Assign each update one of three statuses:
✅ Design-only - Figma documenting what's already in code ⚠️ Code update needed - Design is ahead of code 🔍 Needs verification - Unclear if code matches design
Check if there's a related GitHub issue
Compare design tokens with code
Check recent git commits (last 2 weeks)
See references/troubleshooting.md for detailed decision tree and automation commands.
Include:
Create token comparison tables:
| ✓ | Token | Current | New | Where Used |
|---|---|---|---|---|
| [ ] | --pf-c-button--BackgroundColor | #0066CC | #004080 | Button background |
List files that need updating:
Button.scss - Update color tokensButton.md - Update documentationButton.test.tsx - Update snapshotsBe Specific - Use exact token names and values Link Everything - Figma, PatternFly.org, GitHub Prioritize - High (breaking, a11y), Medium (updates), Low (docs) Note Context - Always include the Figma page/section
Code Update Needed:
### Button - 2026-03-16
**Status**: ⚠️ Code update needed
**By**: Sarah Designer | **Page**: Component Library
Primary button color updated for better accessibility (WCAG AA).
Token: `--pf-c-button--m-primary--BackgroundColor`
Change: `#0066CC` → `#004080`
Design-Only:
### Card - 2026-03-10
**Status**: ✅ Design-only
**Related**: Issue #915 (closed)
Figma updated to match PatternFly 6.0.0. No code changes needed.