We would like to contribute new features for the AI cards to better support the AI team's needs. These include a "selected" state that communicates to the user the currently selected card, and more subtle designs for the AI visuals.
From Micheal Douglas: "Based on feedback from both @acutler and @Mike_Abbink, we adjusted the design of our cards to tone down the prominence of AI, considering our UI is entirely AI-driven. As a result, we treat recommendations and saved prompts differently. They also influenced the hover state with the blue outline, as a way to hint AI, without overdoing it with gradients on hover etc.
Perhaps a way to get around this on the ProductiveCard you shared, there could be a separate controls, e.g. to turn the AI gradient on/off as the slug placement can vary (ours is at the page level to explain overall usage), and show a non-fill with the AI border to indicate something not saved/added."
The solution
Ideas:
Create a new component (like AICard) that captures all the AI-related controls and variants for the card
Add more options for the "slug" control in the ProductiveCard that covers the more subtle designs
Add more controls to the current ProductiveCard, such as "selected" or "without slug icon" or "without AI background"
The problem
We would like to contribute new features for the AI cards to better support the AI team's needs. These include a "selected" state that communicates to the user the currently selected card, and more subtle designs for the AI visuals.
From Micheal Douglas: "Based on feedback from both @acutler and @Mike_Abbink, we adjusted the design of our cards to tone down the prominence of AI, considering our UI is entirely AI-driven. As a result, we treat recommendations and saved prompts differently. They also influenced the hover state with the blue outline, as a way to hint AI, without overdoing it with gradients on hover etc.
Perhaps a way to get around this on the ProductiveCard you shared, there could be a separate controls, e.g. to turn the AI gradient on/off as the slug placement can vary (ours is at the page level to explain overall usage), and show a non-fill with the AI border to indicate something not saved/added."
The solution
Ideas:
Design
Link to Figma
Coded prototype video
[Link to video]
Owner/main maintainer(s)
Lily Peng
Second/backup maintainer(s)
Micheal Douglas
Product/offering
IBM Command Center / IBM Security Gen AI capabilities / "Project Maven"
Business priority
None
Code of Conduct