[Design] Create AI design assets for upcoming functionality

Problem

We're adding a lot of new AI functionality into GitLab that will require new design assets and perhaps even new UI interaction patterns to help users identify and understand AI interactions.

Why it's important

• We don't always have suitable visuals (icons, illustrations) available for upcoming features
• Current UI lacks clear affordances to distinguish AI elements from human ones
• We are publicly revealing sneak peaks of our products much earlier than before
• If we don't start thinking about this now we could end up with rushed design requests at best and disjointed or poor quality assets at worst
• Prioritizing this work can help us improve and elevate the standard of design at GitLab

Proposed solution

1. Start collaborating on the foundational design symbols and patterns

Why: Enables designers to quickly create assets that stay consistent with these principles.

Pattern	Notes	Links	Open Questions
Sparkles in illustrations	Currently being used to indicate success but may be interpreted by some users as representing AI	Figma Product Illustrations	Should we continue using sparkles for non-AI illustrations?
Using reserved gradients/colors for AI interactions	Marketing has started using some orange/purple gradients to represent AI and it appears to work well. Other apps are also adopting gradients for AI branding/interactions		Do we want to develop a specific gradient/color to help indicate AI in our UI?
What is the role of the sparkle tanuki icon?			We currently are using this as the fallback or generic Duo AI functionality icon. Do we want to keep doing this?

2. Flag upcoming features that will need new design assets

Why: So designers don't end up creating these assets last minute

Feature	Design Assets Needed	Notes	Links
AI Catalog items	Avatar icons: Made by GitLab agents, flows, prompts, MCP Made by user agents, flows, prompts, MCP Community/third-party agents, flows, MCP	Without unique illustrations the lists will become very repetitive and hard to scan. Do we want to allow users to upload their own images? 3rd party MCP integrations might be able to leverage logos What role do our bot avatars play? Do we want to expand them to user-generated agents/flows? Do we need different avatar to represent a flow?	WIP Figma
Agent Platform icons	SVG icons for Agents/Flows to use in buttons and on list cards		gitlab-svgs#449 (closed)
Agent (and Flow?) profile pics	A default profile image for user created agents.	Duo bot avatars
MCP Tools
Explore/AI Catalog nav icon		Do we want to keep using the sparkle tanuki?
Project/Automate nav icon		Do we want to use the same icon as the AI Catalog?

3. Start identifying areas for polishing and levelling up our UI.

Why: To hold design at GitLab to a high bar. This could even include animations/interactions.

Idea	Notes	Links	Open Questions
Skeleton loader for AI generate content	Helps indicate that content is AI generated and why it might take longer to load
Duo loading indicators	AI involves lots of loading events. Shimmer/gradients/pulse/shapes can all help indicate AI actions that align better with "show" instead of "tell" design patterns. Doing this well can also make waiting less annoying
Smoother text streaming	Text streaming is a big part of working with AI. Out of the box it can often feel a bit jarring.

Open questions

• Who should be involved? Who should be the DRI?
• Part of the challenge with interactions in particular will be engineering capacity. Perhaps the Papercuts team could assist?
• How can we better collaborate with Marketing around Duo visuals?