docs(generative ui): draft of a generative ui/compass intro page #4854
Conversation
| - **Additional components and component variants**: | ||
| - [links needed] | ||
| - **Design tokens**: New design tokens that enable: | ||
| - Glass-like visual effects (glassmorphism) |
There was a problem hiding this comment.
For reference, these are the global glass design tokens - 4 for light and 4 for dark. And there is an explanation of what they do in this PR. This is everything we have currently at the global token level.
| - Glass-like visual effects (glassmorphism) | ||
| - Background and border gradients | ||
| - Additional smooth animations | ||
| - Background image explorations |
There was a problem hiding this comment.
| - [links needed] | ||
| - **Design tokens**: New design tokens that enable: | ||
| - Glass-like visual effects (glassmorphism) | ||
| - Background and border gradients |
There was a problem hiding this comment.
Hero gradients are in the compass component, the "thinking" shadow vars are in a global/common stylesheet. The rainbow gradient border colors are hard-coded in the global/common stylesheet.
janwright73
left a comment
janwright73
left a comment
There was a problem hiding this comment.
I like the draft - suggestions are about reordering some of the content.
|
|
||
| The Compass effort is actively in progress. Components are being built, evaluated, and refined based on feedback. The design is continuously evolving as we learn more about generative UI patterns and their practical applications. | ||
|
|
||
| **Important**: Compass is best suited for use as a POC in other proof-of-concept generative UI use cases. It is **not yet production quality code** and should be used for exploration and experimentation purposes only. |
There was a problem hiding this comment.
I suggest moving this notice up in the document, right after the ## PatternFly's exploration: Compass section. After we explain what compass is, tell them when to use it.
| ### AI-enabled seed app | ||
|
|
||
| We are creating an AI-enabled seed app that you can use to create your own PatternFly Compass-based POC. The seed app includes the Compass layout fully wired out with all styles set up, providing a solid foundation that you can build on top of. It can be leveraged with AI tools like Cursor or Claude Code to build out your own POC, making it easier to experiment with generative UI patterns and explore new use cases. [link needed] |
There was a problem hiding this comment.
suggest moving this section up in the document - right after the 'Important: Compass is best suited for ' and before the ### What Compass includes section. This tells the user how to use it. Then we can explain what is included and how we plan to continue development (or status).
nicolethoen
force-pushed
the
about_generative_ui
branch
from
020ede1 to
9ece314
Compare
edonehoo
left a comment
edonehoo
left a comment
There was a problem hiding this comment.
added some thoughts & a little general content review, with some questions interspersed.
main questions/thoughts I have now:
- are we calling Compass a component/extension or neither?
- should this guide be in more of a present tense, or is it purposeful to be speaking towards the future?
- do you think this doc (or at least the Compass parts) might make more sense as design guidelines, on the /compass page? Or do we plan to have more concrete/typical design guidelines built out for Compass
- Related to previous point - should we combine the /compass demo with this page? Similar to how https://pf-org--pr-4854-site.surge.sh/topology/about-topology does it
| subsection: Generative UIs | ||
| --- | ||
|
|
||
| # PatternFly + Generative UIs |
There was a problem hiding this comment.
| # PatternFly + Generative UIs |
|
|
||
| ## What is generative UI? | ||
|
|
||
| Generative UI is an emerging approach to user interface design that leverages artificial intelligence to dynamically create and adapt interface elements based on context, user needs, and data. Unlike traditional static interfaces, generative UIs can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. |
There was a problem hiding this comment.
| Generative UI is an emerging approach to user interface design that leverages artificial intelligence to dynamically create and adapt interface elements based on context, user needs, and data. Unlike traditional static interfaces, generative UIs can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. | |
| Generative UI (GenUI) refers to a user interface design approach where AI is leveraged to dynamically create and adapt UI elements based on context, user needs, and data. Unlike traditional, static UIs, GenUI can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. |
we don't have to go with "GenUI", I just see it being used commonly in industry articles and NNG. I'm going to leave comments throughout as if we want to abbreviate with genUI when referring to the concept, but feel free to override that if it's not the direction we'd like to head.
|
|
||
| Generative UI is an emerging approach to user interface design that leverages artificial intelligence to dynamically create and adapt interface elements based on context, user needs, and data. Unlike traditional static interfaces, generative UIs can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. | ||
|
|
||
| ## PatternFly's exploration: Compass |
There was a problem hiding this comment.
| ## PatternFly's exploration: Compass | |
| ## What is Compass? |
| Generative UI represents a significant opportunity for PatternFly to explore new patterns, layouts, and styles that support AI-driven interface generation. PatternFly has been calling this proof of concept Compass. It investigates how the design system can evolve to support generative UI use cases. | ||
|
|
||
| **Important**: Compass is best suited for use as a POC in other proof-of-concept generative UI use cases. It is **not yet production quality code** and should be used for exploration and experimentation purposes only. |
There was a problem hiding this comment.
| Generative UI represents a significant opportunity for PatternFly to explore new patterns, layouts, and styles that support AI-driven interface generation. PatternFly has been calling this proof of concept Compass. It investigates how the design system can evolve to support generative UI use cases. | |
| **Important**: Compass is best suited for use as a POC in other proof-of-concept generative UI use cases. It is **not yet production quality code** and should be used for exploration and experimentation purposes only. | |
| Compass is a unique proof-of-concept that explores how GenUI can be supported in PatternFly. It is an evolving solution that includes custom patterns, layouts, and styles that best support AI-driven GenUI. **Compass does not yet contain production quality code** and is currently suited for exploration and experimentation purposes only. |
| ### AI-enabled seed app | ||
|
|
||
| We are creating an [AI-enabled seed app](https://github.com/gitdallas/patternfly-react-seed/tree/compass_theme) that you can use to create your own PatternFly Compass-based POC. The seed app includes the Compass layout fully wired out with all styles set up, providing a solid foundation that you can build on top of. It can be leveraged with AI tools like Cursor or Claude Code to build out your own POC, making it easier to experiment with generative UI patterns and explore new use cases. |
There was a problem hiding this comment.
| ### AI-enabled seed app | |
| We are creating an [AI-enabled seed app](https://github.com/gitdallas/patternfly-react-seed/tree/compass_theme) that you can use to create your own PatternFly Compass-based POC. The seed app includes the Compass layout fully wired out with all styles set up, providing a solid foundation that you can build on top of. It can be leveraged with AI tools like Cursor or Claude Code to build out your own POC, making it easier to experiment with generative UI patterns and explore new use cases. | |
| ### Compass seed app | |
| To explore and use Compass for your own proof-of-concept, you can use the [AI-enabled Compass seed app](https://github.com/gitdallas/patternfly-react-seed/tree/compass_theme), which includes a fully wired-up Compass layout, with default styles already set up. This resources quickly creates a solid foundation that you can build on top of to fit your own needs. It's compatible with AI tools like Cursor or Claude Code, which you can use to explore a range of use cases, experiment with GenUI patterns, and build out your own implementation. |
do we want this doc to be in a more hypothetical/future tense? Or are we planning to release everything in a more complete form, where we can speak about it in a definitive present-tense like I'm suggesting?
There was a problem hiding this comment.
& idk if it's correct to say Compass seed app
There was a problem hiding this comment.
The compass seed app is only sort of ready - and really (at least for now) it's living in a branch of the patternfly-react-seed repo. Once it is hardened a bit more, i'll revisit this section.
| ### What Compass includes | ||
|
|
||
| The Compass POC introduces several new capabilities: | ||
|
|
There was a problem hiding this comment.
| | Feature | Description | Usage | | |
| | --- | --- | --- | | |
| | Design token | glass-tokens | Used to apply glass-like visuals to .. | | |
| | Design token | gradient-tokens | Used to apply gradients to backgrounds and borders.| | |
| | Layout | Compass layout | A UI layout that places controls above, below, and on both sides of a primary content area. | |
just jotted down a loose thing, but do you think it would be helpful to contain the new features in something similar to this, or would it be more confusing?
I would place the demos line above this table for easier access: "To explore Compass and its features, explore our full-page demo with card view and table layouts.
| ### Accessibility focus | ||
|
|
||
| Accessibility has been a major focus throughout the Compass exploration. As generative UIs introduce new interaction patterns and visual styles, ensuring these experiences remain accessible to all users is paramount. |
There was a problem hiding this comment.
| ### Accessibility focus | |
| Accessibility has been a major focus throughout the Compass exploration. As generative UIs introduce new interaction patterns and visual styles, ensuring these experiences remain accessible to all users is paramount. | |
| ### Accessibility focus | |
| Accessibility has been a major focus throughout the Compass exploration. As generative UIs introduce new interaction patterns and visual styles, ensuring these experiences remain accessible to all users is paramount. |
might be better to integrate this into the "What is Compass?" section - but do we plan to expand with more specific details than is here now?
There was a problem hiding this comment.
I mostly and making sure this got it's own bullet point because the new glass visuals and background images have made many people raise concerns that we are not considering A11y - which just isn't true! I don't know if it'll expand beyond this promise that we are considering it.
| ### Accessibility focus | ||
|
|
||
| Accessibility has been a major focus throughout the Compass exploration. As generative UIs introduce new interaction patterns and visual styles, ensuring these experiences remain accessible to all users is paramount. | ||
|
|
There was a problem hiding this comment.
| ### Get started |
do you think a get started section would make sense? containing this react-flow info, but also the seed app info
There was a problem hiding this comment.
I want react-flow in it's own section (at least for now) because it's an additive effort that certain stakeholders (nexus) consider high priority for all this compass related work. So this is a call out that it's been part of these investigations and story. I don't think that once the compass theme lives, that the react-flow stuff will remain tightly coupled. It may end up in a developer resources section in the future sort of on its own.
|
|
||
| Some stakeholdres have been experimenting with Generative UI use cases using React Flow. The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. We have created some [documentation and a demo](/patternfly-ai/generative-uis/react-flow) for integrations with PatternFly as a POC for these use cases. | ||
|
|
||
| ### Current status |
There was a problem hiding this comment.
what are the plans for this section? To update it with each release, or to update more frequently than that?
There was a problem hiding this comment.
I think we'll be periodically updating this sort of each sprint. whenever we have new features we want to bring to product POC teams' attention.
|
|
||
| ### Current status | ||
|
|
||
| The Compass effort is actively in progress. Components are being built, evaluated, and refined based on feedback. The design is continuously evolving as we learn more about generative UI patterns and their practical applications. |
There was a problem hiding this comment.
| The Compass effort is actively in progress. Components are being built, evaluated, and refined based on feedback. The design is continuously evolving as we learn more about generative UI patterns and their practical applications. | |
| Compass is still under development, with new components being built, evaluated, and refined based on feedback. As we hear from your experiments and learn more about GenUI patterns, the design of Compass will continuously evolve to support practical applications. |
& add cta for sharing feedback, like we have in some of the other ai docs?
nicolethoen
force-pushed
the
about_generative_ui
branch
from
f8823d2 to
872a3ea
Compare
5 participants
I will update this file with links as soon as each of the referenced docs/pages merge.