메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | pf-ai-experience-patterns |
| description | 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. |
This skill applies Red Hat's official design language for AI-enabled features (last updated February 2026). When building AI features, proactively apply these patterns to create transparent, polished, brand-compliant experiences.
Authoritative source: https://staging.patternfly.org/ai/design-language
Supporting files in this skill:
guidelines/design-rules.md — Detailed iconography, chatbot, color, and animation rulesguidelines/reference-mapping.md — Reference image lookup tables for review findingsreferences/ — 21 extracted visual examples from key pagesreferences/REFERENCE-INDEX.md — Descriptions of each reference imageEvery AI experience must follow these three principles:
Critical: It should ALWAYS be clear when and how AI is being used.
For AI-assisted features (search, generation, editing): Place a transparency notice at the beginning of the experience. Minimum text: "This feature uses AI technology. Do not include any personal information or other sensitive information in your input." Include persistent notice: "Always review AI-generated content prior to use." Reference the Red Hat Privacy Statement.
For virtual assistants/chatbots: Show notice before user interacts and before any content is generated. Include an info icon (ℹ️) with persistent "Always review AI-generated content prior to use." Use AI icon + "AI" tag as visual and verbal indicators.
For AI-generated content: Must include a label AND icon indicating content was created using AI (e.g., Sparkle icon + "AI-assisted results" heading).
Red Hat uses 9 official rh-ui-icon-ai-* icons based on sparkles. Always pair icons with text ("...with AI", "...by AI"). Never create custom AI icons — request via #help-brand. See guidelines/design-rules.md for the full icon list and rules.
All chatbots must use Red Hat's robot icon as their avatar. Use PatternFly non-status color tokens for avatar colors. No gradients on launch buttons or chat message boxes. See guidelines/design-rules.md for full chatbot and chat message rules.
Don't use color coding or gradients to indicate AI. AI features use the same colors as other interface elements. Use premade sparkle animations only — triggered on hover/click, loop once. See guidelines/design-rules.md for full color table and animation rules.
When analyzing a design against Red Hat AI patterns:
Before deciding compliance, inspect the full UI for gradients on AI-related surfaces:
If any of the above uses gradient color, mark as ❌ failed.
Read guidelines/reference-mapping.md to find the correct reference image for each failed check.
Present a results table, then show the reference image for each ❌ item with a brief explanation of what needs to change.
Results table format:
| Category | Status |
|---|---|
| [Check item] | ✅ Compliant |
| [Check item] | ❌ Missing/Failed |
For each ❌ item, show the reference image and explain what needs to change. Always show reference images for failed items so users can visually compare the correct pattern against their current implementation.
Transparency:
Iconography:
rh-ui-icon-ai-* icons (not creating custom ones)Color & Styling:
Brand Compliance:
@patternfly/react-icons package: https://www.npmjs.com/package/@patternfly/react-iconsGuidelines updated February 2026. This skill does not replace AI Assessment, Privacy Impact Assessment, or other required reviews.
Remember: The goal is transparency. Users want to know when they're interacting with AI. Over-communicate rather than under-communicate.
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.
Create and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.