Shape of AI AI Product UX Pattern Library (Seven Major Categories: Wayfinders/Inputs/Tuners/Identifiers/Governors/Trust/Dark Patterns + Design Guidelines)

This is Emily Campbell’s *Shape of AI* — a"parts catalog" for AI product interfaces. It does not talk about “how users chat with AI” (that is the job of NNGroup AI Product and Conversational Interface Design (20 articles · 6 conversation types / 4 degrees of anthropomorphism / sycophancy / intelligence over human-likeness / explainable AI citations and disclaimers / no fluff straight-to-answer truncated pyramid / 3 types of prompt suggestions · CARE framework · 4 uses of prompt controls / GenUI vs Vibe Coding · return of buttons and checkboxes · Promptframe · designing interfaces with prompts / 4 roles of AI assistants · creative partner P&G 776-person experiment · initial review of ChatGPT Agent · Google AI Mode · why users switch between GenAI and search)); instead, it breaks down the interfaces of mainstream AI products (ChatGPT/Claude/Perplexity/MidJourney/Notion/Jasper/Grammarly/GitHub Copilot/Figma…) into individual reusable UI patterns, telling you “what this part is called, what problem it solves, when to install it, and what happens if you install it wrong”.

How to use this booklet: When you encounter a specific problem while designing an AI product (for example, “users don’t know what to ask when facing a blank box”, “how to make users trust that the AI isn’t making things up”, “after an image is generated the user wants to change only one hand”), come here to look up the corresponding pattern. Each pattern comes with Why + When to use / not use + real-world examples.

One-sentence map of the 7 categories (ordered by the chronological sequence of user-AI interaction):

Wayfinders — Before the user speaks, give them signposts (how to use the product)

Inputs — When the user speaks, feed intent + context to the AI

Tuners — After results come out, let the user fine-tune / restructure them

Identifiers — Always tell users “this is AI, not a human”

Governors — Keep the user’s steering wheel + explainability while the AI works

Trust indicators — Build trust at the privacy / data / authenticity level

Dark matte hidden patterns — Questionable gray-area designs (know which ones not to copy)

Three core principles that run through the whole booklet — memorize them first:

The blank input box is the number one killer of AI products. Most patterns (the entire Wayfinders category + Suggestions/Templates/Madlibs) are aimed at fixing “users don’t know what they can do, don’t know how to phrase it”.

Generative AI = a gun that “shoots the arrow first then draws the target”. It is hard for users to state their needs clearly in one go, so patterns of “progressive disclosure + reversible edits + don’t overwrite the original” (Inpainting/Variations/Regenerate/Sample response/Inline action) are extremely valuable.

Transparency = trust = money. Source citations, footprints, data toggles, watermarks and other “transparency parts” look like costs in the short term, but are brand moats in the long run; conversely, Dark matte patterns that treat transparency as a way to shift blame bring short-term gains but long-term losses in trust.

1. Wayfinders: Before the user speaks, give them signposts

Problem solved by the entire category: AI tools have many features, but users (especially new users) facing an empty input box don’t know what they can do, don’t know how to phrase it. These patterns put up signposts at the very front of the interaction, reducing the friction of “not knowing where to start”.Difference from Inputs: Wayfinders are “teaching you how to use it”, Inputs are “the box itself that you use”.

1.1 Follow up mechanism

What it is: After the user’s first input and before the AI gives the final result, the AI asks one or two short clarifying questions(not shoving a long questionnaire at them), confirming the direction of understanding before proceeding. What it solves: Users can’t state their needs clearly in one sentence → the AI easily goes off track. Follow-up questions break “vague big requests” into “small steps users can answer easily”. Why / When to use: Suitable for complex, open-ended, easily misunderstood tasks (writing articles, making guides, planning). The key is brevity + providing example options + showing the action plan along the way, so users feel “the AI is collaborating with me” rather than “the AI is interrogating me”. Counterexamples / Risks: Don’t turn it into a complex flow or open-ended chain of questions — that’s more tiring than just typing directly; if you can provide quick options (reference sources, specific parameters), don’t make users phrase things themselves. Examples: Jasper splits complex prompts into several follow-up steps and generates gradually; Perplexity automatically gives follow-up suggestions to help you clarify when your question is unclear; Writer.com lets you define an outline first before generating.

1.2 Nudges

What it is: A small reminder that tells users at the right moment “the AI can also help you do this” (generate a summary, optimize a sentence, organize into a list). What it solves: Most users only use a small subset of an AI’s features,and hidden features go undiscovered. Why / When to use: Three scenarios — onboarding for new users (prompt in the editor “I can help you complete this paragraph”), feature promotion (prompt after enough notes are accumulated “you can now auto-categorize”), efficiency improvement (proactively suggest mid-task “would you like to generate a pivot table?”). The core is dynamic triggering based on current operation context. Counterexamples / Risks:Only suggest one thing at a time, don’t bombard with features. Notion/Grammarly’s prompt lists are comprehensive, but piling too many on is overwhelming; bad timing (pushing unrelated features while writing) is also distracting. Examples: GitHub Copilot shows prompts directly in the text box; Grammarly reminds you to improve your writing; Google reminds you after a search that you can dig deeper with AI; MidJourney places operation tools directly below images.

1.3 Suggestions

What it is: Example questions/tasks presented as 3–5 clickable options next to the input box; clicking one generates the corresponding response. A dedicated fix for the “blank canvas” problem. What it solves: Users don’t know where to start when facing an empty box; it also lets users try the product at zero cost and immediately feel what it can do. Why / When to use:The most useful are “dynamic in-conversation suggestions”(combined with current context, e.g. Copilot sees the code you wrote and suggests “generate unit tests for this segment”), which are far more precise than generic opening suggestions. Good suggestions can also teach users stealthily — after clicking “write a thank-you note” the AI gives a refined version, and new users incidentally learn how to refine instructions. Counterexamples / Risks:Irrelevant suggestions are a cardinal sin(pushing “travel planning” to someone who has no intention of traveling). Users may accept random suggestions the first time, but after that they expect the system to understand them; frequent irrelevance will make people ignore the feature entirely. Solution = personalize based on preferences and conversation context. Note that suggestions under Meta/LinkedIn posts are sometimes aimed at driving engagement / feeding training data, with uneven quality. Examples: Jasper/OpenAI’s classic “icebreaker” interface; Character.ai gives example prompts to help users build their first bot; MidJourney displays prompts others used to generate images to lower the barrier.

1.4 Templates

What it is:Structured task frameworks that users can fill in or that the AI pre-fills. Users don’t need to write a 500-word prompt from scratch; they only fill in a few variables to get a first draft. What it solves: Tasks with multiple parameters that require complex prompt syntax are too hard for new users → templates turn them into “fill-in-the-blanks”. Why / When to use: Most cost-effective when tasks have fixed formats, clear parameters, and high repetition frequency (marketing copy, emails, reports, flowcharts). Can be as flexible as “complex workflow frameworks” or as simple as “Mad Libs fill-in-the-blanks”. After generation, users can continue to adjust. Counterexamples / Risks:Don’t let templates promise things they can’t deliver (FigJam templates can only generate basic flowcharts but are marketed as able to produce wireframes → disappointment). Solution = clearly mark the capability boundary of templates, focus on doing a single function well. Examples: Copy.ai displays parameters directly in the prompt box after selecting a template (incidentally teaching users why that information is needed); Zapier uses structured templates for step-by-step guidance; Hypotenuse image templates support variable linking for batch image generation.

2. Inputs: Feed user intent + context to the AI

Problem solved by the entire category: How to accurately pass "what the user wants" together with the "surrounding context" to the AI.Core insight (the Token layering entry): AI understands you through tokens (the smallest language units); different word choices lead to drastically different results ("I left" vs "I slipped away" vs "I fled"). This category of patterns helps users assemble these tokens more accurately and with less effort.

2.1 Open input

What it is: A natural language chat box — the core parent pattern of AI interaction (ChatGPT/Claude/Gemini all use it). Why / When to use: Extremely low barrier, flexible, accessible to everyone; it is the industry standard entry point. Counterexamples/Risks:It is itself the source of the "blank canvas effect"— too open, so novices don't know what to say; natural language is ambiguous and easily misinterpreted; it may also cause users to inadvertently leak sensitive information. Therefore Open input is almost never used alone, and must be backed by Wayfinders (templates/icebreakers/prompts). That is why half of this entire booklet is dedicated to patching its gaps. Examples: Google drew on ChatGPT but only expands the chat interface after the user submits their first request (to avoid cognitive overload right at the start); Jasper sets clear boundaries for prompts to lock user attention onto writing tasks.

2.2 Auto Fill

What it is: An AI version of Excel's drag-to-fill — extending one prompt to an entire column/multiple records(e.g., automatically looking up the founding date for every company in a database). Why / When to use: For batch extraction/organization of structured data, it demonstrates AI value immediately (customer success managers can fill in QBR data with one click). Counterexamples/Risks:Data in spreadsheets is often far more sensitive than that in chat boxes(proprietary/personal data), so security is the top priority; and AI may fill in incorrect values. Solution =show a preview of a few sample entries for user confirmation before filling the entire column + provide source links + do not feed proprietary data to public models + do not overwrite existing data. Examples: Notion database AI applies one prompt as an attribute to all records; Google Sheets added context-based generation on top of its original auto-fill; Attio smart columns fill automatically without prompts.

2.3 Inline action

What it is: Select an existing piece of content on the page and directly perform small-scope operations on it (change tone, shorten, add comments),without regenerating the entire piece. It positions AI as a "copilot" rather than an "execution machine". Why / When to use: Users can iterate precisely — only change the parts they are unsatisfied with, keep the parts they are happy with, simulating the natural language habit of "pointing at this sentence and talking about it". Suitable for copy polishing, code editing, and document formatting adjustments. Counterexamples/Risks:Most tools directly overwrite the original text without version records, so if the edit goes wrong it cannot be recovered; there is also a lack of traceability (users cannot understand why AI made that change). Solution = confirm before overwriting + introduce version management. Examples: ChatGPT quotes selected text in replies; GitHub Copilot provides inline suggestions for any line of code; Grammarly/HubSpot perform inline rewriting as soon as text is selected.

2.4 Madlibs fill-in-the-blank input

What it is: Define the task structure once (fixed template + reserved variables), then only fill in the variables for repeated calls to ensure consistency. It is the underlying input mechanism for Templates and Workflows. Why / When to use: When task parameters are known, input is structured, and the task needs to be repeated many times(e.g., syncing PRDs and meeting minutes to CRM). It can aggregate fragmented information scattered across multiple systems into one place, with built-in formatting/citations/fixed details. Counterexamples/Risks:Overuse makes content formulaic(external communications feel impersonal); templates that are too rigid cannot adapt to flexible needs. Solution = leave room for manual adjustment. Examples: PRD templates aggregate customer feedback/technical inputs in one place; Gong meeting records are automatically organized and synced into Salesforce.

2.5 Remix / Blend

What it is: Take multiple sources (text/images/documents),recombine them + add new parameters to generate breakthrough new results. "Like writing new lyrics to a familiar melody". Why / When to use: Expands the play boundary of open conversations — analyzing the day's news to extract common themes, uploading an old resume + LinkedIn profile for AI to reposition personal branding, cross-style mashups. It gives users experimental space where "it doesn't have to be perfect in one go, you can approach it over multiple rounds". Counterexamples/Risks:Each new input added increases processing complexity, and results may become messy. Solution = provide specific clickable options ("shorter" "more detailed") to help users understand model behavior + transparently show how inputs affect results. Examples: MidJourney's /blend combines the most prominent features of multiple images into one; Notion inline prompts remix and generate text.

2.6 Summary & 2.7 Synthesis (a close pair of cousins)

What Summary is: Condenses long content into key points (meeting follow-ups, quick document skimming).Low risk, can be integrated by default(e.g., automatic summaries for video transcripts, news aggregation). What Synthesis is: Not just compression, but reorganizing, categorizing, and structuring information from multiple sources(e.g., clustering a pile of sticky notes into themes, turning a data table into a chart). Difference between the two: Summary focuses on "making it shorter", Synthesis focuses on "reorganizing multiple sources + changing form". Why / When to use: Both reduce cognitive load. Synthesis is especially suitable for open canvases (Miro/FigJam clustering sticky notes by theme/emotion), data visualization, and cross-modal scenarios (combining video + articles into a course). Common risks:Oversimplification that loses context / AI misinterpretation. Solution = label every summary as "AI-generated", provide traceable citation paths, and note that "this is only an overview, not a replacement". Synthesis has an additional hidden risk: in canvas scenarios, AI has difficulty communicating its own limitations, and users may make decisions based on incorrect generalizations. Examples: Slack summarizes long threads; Perplexity synthesizes multiple references into a single insight; Shopify merchant insights synthesize large datasets into conclusions + charts.

2.8 Token layering

What it is: Like building with Lego,intentionally combining tokens to express intent precisely; and it supports progressive disclosure — starting with a simple prompt and gradually adding tokens to tune, rather than writing everything at once. Why / When to use: Key to lowering the learning curve — letting AI suggest tokens based on context (users only need to select), which both reduces initial burden and helps users optimize step by step. Listing weighted tokens to control style in image generation is a typical example. Counterexamples/Risks:Iteration costs real credit/quota, and too much trial and error can make people frustrated and give up; the relationship between tokens and parameters has a learning threshold for novices. Examples: Adobe Firefly open box + clickable style/structure/reference token panel (made into deletable chips); Grammarly uses fixed follow-up prompts to capture tokens such as tone/audience; MidJourney's /shorten shows the relative weight of each word.

III. Tuners: After results come out, let users fine-tune or reconstruct

Problem this entire category solves: First generations are rarely perfect. This category of patterns lets users constrain inputs or refine outputs without rewriting prompts from scratch every time. Boundary with Inputs: Inputs are about "how to feed it the first time", Tuners are about "how to twist the dials after feeding".Relationship with parameters/filters runs through the entire category: Parameters adjust weights (tone/style), Filters set hard boundaries (source/format).

3.1 Filters & 3.2 Parameters (understand as a pair)

Differences:Parameters adjust "weights and tendencies"(formal/humorous tone, speed vs quality, resolution);Filters set "hard boundaries"(only cite academic sources, only output specific formats, exclude a certain element). Why / When to use: Corresponding to four user states — focus (limit input sources to improve precision), navigation (limit output format to reduce choices), synthesis (lock strict sources to ensure credibility), browsing (loosen filters to increase diversity). The UX of parameters is evolving from "manually typing complex commands" (MidJourney's --no) to "dropdowns/sliders/natural language". Counterexamples/Risks:Filters——Too narrow a dataset produces absurd results(Google AI was asked "how many stones should I eat a day" and gave a nonsensical answer due to scarce reference data); Parameters —too many constraints stifle creativity, and complex interfaces scare off novices. Solution = layered interfaces (basic options for novices, fine-grained controls for advanced users). Commercial extension (unique to Filters): Tagging licensed content with metadata as "premium filters", using watermarks/blockchain to trace sources — this may become a business model to resolve ethical disputes over training data. Examples: MidJourney negative tokens exclude elements; Jasper speed vs quality toggle; Grammarly audience preset parameters.

3.3 Inpainting local patching

What it is: Only modify a specific area of the content (select a patch in an image to regenerate, adjust the tone of a certain paragraph in text) without touching the rest. AI acts as an editing assistant rather than redoing the whole piece. Why / When to use: Extremely important if you are doing AI interactive narrative/images —reduces the pressure that "the initial prompt must be perfectly worded in one go", allowing step-by-step refinement. The core flow is "identify → apply → adjust → review", where AI gives suggestions and the user makes the call (accept/reject/readjust). Counterexamples/Risks:After acceptance, changes are seamlessly merged into the original, making versions hard to trace(image tools still have zoomed versions/footprint tracing, but most text/code tools do not, so you only discover it's bad after it's done). Solution = draw on Git branching/commits. Examples: Adobe Firefly brush selects areas + displays the selection as a transparent prompt for regeneration; Notion pops up "Ask AI" when text is selected; MidJourney inline selection adjusts prompts.

3.4 Model management

What it is: Lets users choose which model to use for generation. Why / When to use: There are many real reasons users switch models — feature differences (new models are more accurate but more expensive),cost optimization (use cheap old models for drafts, new models for final versions), aesthetic preference, security and privacy, research comparison. The entry point can be in global settings/at conversation start/with every prompt. Counterexamples/Risks:Too many options confuse ordinary users + accountability (unclear model differences → experience gaps) + geopolitical policies (certain models are banned in certain regions, the system must be able to dynamically restrict access). Solution = clearly label the current model version and differences, keep traceable metadata records. Examples: ChatGPT/Claude switch models mid-conversation; MidJourney changes models in prompts and even mixes generation across models.

3.5 Personal voice

What it is: Makes AI output match the user's/brand's tone, intonation, and terminology to ensure consistency. Why / When to use: A hard requirement in professional scenarios — marketing teams maintain brand consistency across people and channels (professional on LinkedIn, lively on Instagram). Multiple voice sets can be saved, input as parameters, and integrated into workflows. It is especially valuable for small and medium teams (saving trivial writing time for core business). There is also imaginative space for non-commercial use: cultural language learning, rehabilitation expression, even "letting family hear your voice when you are not around". Counterexamples/Risks:Ethics + uncanny valley — machines replacing human writers sparks controversy, subtle unnaturalness makes people uncomfortable; over-templating loses authenticity; voice data involves privacy. Examples: Grammarly sets tone parameters; Jasper infers and feeds back on brand tone; Writer.com provides standardized tone templates for enterprises.

3.6 Primary sources & 3.7 References management (a RAG pair)

What Primary sources are: Users upload specific references for AI to use as a basis, with two use cases — as guidance(upload writing samples/reference images to unify style) or as topic sources(upload documents for AI to summarize and analyze).What References are: relies on RAG (Retrieval-Augmented Generation, which first retrieves real external materials before answering) technology to let users view/add/remove the data sources cited by the AI. Why / When to use: both solve LLM knowledge blind spots and hallucinations by "feeding real materials". Adding or removing citations is a lightweight way to guide the AI's direction (narrowing data sources = precise guidance), and can be combined with parameter tuning to adjust tone/technical depth. In enterprise scenarios, data from Productboard+Salesforce+HubSpot is integrated to generate account summaries. Counterexamples/Risks:Poor citation quality directly destroys credibility (Google AI was criticized for citing an incorrect recipe from Reddit);implicit bias + automation bias (users are too lazy to review AI results); confidential data uploaded by third parties may leak or be incorporated into training. Solutions = transparently display sources + clickable links, assign quality scores/labels to sources, remind about copyright before upload (Udio prohibits uploading unlicensed reference music). Examples: Claude supports multiple original sources; Adobe PDF lets you converse directly with documents; Perplexity displays citations while generating, and citations are editable for use in subsequent prompts.

3.8 Workflows

What it is: chains multiple generation steps into an automated process (analyze customer insights → rank by severity → generate knowledge base draft → notify admin for review), compressing hours of work into minutes. Why / When to use: cross-team consistency (a single owner defines prompts for each step and shares them as templates), data integration, splitting "complex multi-step prompts that are hard to return accurate results for in one go" into reliable separate steps. Counterexamples/Risks:Easily designed to be overly cumbersome and hard to maintain + mismatched data formats between steps cause interruptions. Solutions = modular design, visual drag-and-drop interface, each step testable independently, log intermediate results for easier debugging. Examples: Copy.ai multi-step workflows can be saved as templates for sharing; Zapier-style modular step design is well-developed.

IV. Identifiers: Always tell users "this is AI, not a human"

Problem this entire category solves: distinguishes AI features/content from regular features and human-created content apart, so users can tell at a glance that "this is AI-driven". This serves both usability (quick recognition) and trust (avoid mistaking AI for a human / AI content for human-created content).

4.1 Color scheme

What it is: uses color as a visual signal for AI.Current state: purple is the most mainstream (modern aesthetic + early Figma tools led the way + purple is uncommon yet feels familiar like blue); green rose with ChatGPT; gradients are widely used. Why / When to use: a unified color scheme is a low-cost way to convey "this is AI" and build trust. Colors can also be used to distinguish AI content vs human content (Google uses soft tones to separate different conversations). Counterexamples/Risks:Relying only on color is unfriendly to colorblind/cognitively impaired users (must pair with text/icons); if every product uses purple → brands become hard to distinguish (oversaturation). Solutions = multi-dimensional identification + brands highly dependent on AI should build a unique visual language (ReWord sticks to orange).

4.2 Symbols

What it is: AI icon language is converging on three metaphors——✨ Sparkle/star (most common, "magic/enhancement", since around 2020),🔮 Glowing orb (text/chat interfaces, derived from the OpenAI logo and Siri),🤖 Robot (AI agents, popularized by GitHub Copilot). Why / When to use: a unified visual language lets users quickly recognize AI and build predictability (like the hamburger menu or save icon, it will be used long-term). Icon types can distinguish AI use cases (✨ generation vs 🔮 chat vs 🤖 agent).Counterexamples/Risks:Too many products use similar icons → hard to distinguish. Solutions = integrate brand colors/gradients/light motion effects on top of standard icons. Do not use AI icons on non-AI features to avoid confusion.

4.3 Name

What it is: four strategies for naming AI——anthropomorphic characters (Intercom's Fin, Salesforce's Einstein), company name (Ask Jasper), generic function name (Copilot/Assistant), directly calling it "AI" (Notion's Ask AI).Why / When to use: unique anthropomorphic names enhance brand recognition (Siri/Alexa have become iconic); function names (Copilot) intuitively imply an "assistive" positioning.Counterexamples/Risks:Excessive anthropomorphism triggers the uncanny valley, and users cannot tell if they are talking to a human or AI. Solutions =no matter how you name it, clearly mark "this is AI" with badges/text + give clear prompts when switching between human and AI.Examples: Leena labels "Powered by AI" at the bottom of conversations; Character.ai places a c.ai logo next to every message; Intercom adds dual AI labels under Fin's name and on messages.

4.4 Personality

What it is: the AI's worldview and tone style. Defined by two layers——base prompt (sets the overall behavioral framework during initial training, mostly confidential, Anthropic has published theirs) + subsequent training (tunes tone/context awareness). Why / When to use: personality matched to the task reduces friction——life coaches should be encouraging, personal assistants concise; technical support rigorous, creative direction flexible. Users may also want customization (Character.ai/Personal.ai let you set personality for each character).Note the distinction between "AI personality" (how the AI talks to you) vs "user voice" (whether content the AI generates for you sounds like you). Counterexamples/Risks:Too many characters cause brand fragmentation, making it hard for users to form a unified perception. Solutions = even AI for simple tasks must align with core brand values.For those of you building AI companionship/interactive narrative: this is one of the core patterns——Character.ai/Personal.ai's multi-character personality management is your direct benchmark.

4.5 Disclosure

What it is: explicitly marks AI-generated content/AI-involved interactions. Broader than Name, covering data collection consent. Why / When to use: three scenarios——hybrid human-AI products (clearly mark which parts are AI-generated), AI agents transferring to human customer service (clearly prompt the moment of handoff),obtaining consent before data collection (Limitless.ai requires the other party's consent before recording their voice). Treat transparency as a selling point (Intercom/Limitless stand out for this). Counterexamples/Risks:Negative example Meta——no opt-out option, forces users to use AI, gains more training data in the short term but severely damages trust long-term.Trust is currency, hiding things will backfire sooner or later. Examples: Intercom's Fin adds an "AI" label to every message and the label remains after transferring to a human; IA Writer marks AI text in gray (returns to high contrast after user edits); Zoom pops up to notify everyone that AI recording is active.

4.6 Initial CTA

What it is: uses a prominent large input box to invite users to interact with the AI (common on feature introduction pages). Why / When to use: effectively demonstrates product capabilities.A better evolution direction is "contextual guidance"——embed the CTA into flows where the user already has clear intent (Typeform only offers AI assistance when you start building a form), which fits real use better than a standalone big box. Or make it playful (Udio helps you make funny songs). Counterexamples/Risks:A simple input box cannot support complex products → devolves into a gimmick, disappointing users; generation costs are high, and users won't pay if the experience is bad. Solutions = delay introducing AI / pair with templates and example libraries to lower the psychological barrier of "starting from scratch" / clearly state paid value. Examples: ChatGPT/Claude consistently use the large box pattern; Figma's open CTA is paired with relevant template examples; Notion places the CTA at the top of action suggestions on blank pages.

V. Governors: Keep the user in the driver's seat + maintain explainability when the AI works

Problem this entire category solves: lets users maintain agency during AI generation——they can understand the AI's logic, intervene mid-process, and go back to make changes. These are "anti-black-box" patterns, directly corresponding to the trust issue you cannot avoid when building any AI product.and NNGroup AI Product and Conversational Interface Design (20 articles · 6 conversation types/4 degrees of anthropomorphism/sycophancy/intelligence prioritized over human-likeness/explainable AI citations and disclaimers/cut the fluff and get straight to the answer truncated pyramid/3 types of prompt suggestions · CARE framework · 4 uses of prompt controls/GenUI vs Vibe Coding · return of buttons and checkboxes · Promptframe · designing interfaces with prompts/4 roles of AI assistants · creative partner P&G 776-person experiment · initial review of ChatGPT Agent · Google AI Mode · why users switch between GenAI and search) strongly echoes the "explainable AI" section, but here we cover concrete UI components.

5.1 Citations

What it is: when the AI generates content, it embeds source annotations (inline footnotes/hyperlinks), combined with RAG to let users trace and verify. Why / When to use: lets users directly verify reliability, supports exploration and discovery (like a dynamic reference list), drives traffic to content creators. Counterexamples/Risks:Cited sources themselves are unreliable = false credibility (Google AI citing incorrect Reddit recipe); too many citations cause information overload. Solutions = assign quality scores/labels to sources ("academic", "verified"). Examples: Perplexity uses inline citations within sentences, associating each claim with multiple sources; Adobe citations jump to specific locations in the PDF; Fin places citations in footnotes to keep the main text concise.

5.2 Controls

What it is: stop/continue/start buttons during generation. Already a standard pattern. Why / When to use: avoids the frustration of the "spinning hourglass"——stop immediately if you spot it going off track, reset the prompt, no need to wait for useless results to finish; segment long content (ChatGPT pauses and waits for you to click continue). Counterexamples/Risks: regenerating results after stopping may be inconsistent with previous results, causing confusion (solutions = offer "continue generating" instead of "start completely over" + context memory); too many control options intimidate new users. Examples: MidJourney cancels tasks (saves quota/time); Grammarly combines progress prompts with the stop icon.

5.3 Footprints

What it is: records the complete path from prompt to result, allowing traceback of every step, viewing dominant tokens, and cleaning up sensitive information. Why / When to use: builds trust (understand generation logic), supports collaborative review, prevents getting lost during multiple iterations. Can also detect whether content is AI-generated (paired with watermarks/AI DETECT). Counterexamples/Risks: inability to trace back → sensitive information may remain in results; over-reliance on footprints neglects independent proofreading. Examples: MidJourney links back to the previous version at the top of images, saved images retain the preceding keywords; Content Credentials watermarks images by source to verify authenticity.

5.4 Prompt transparency

What it is: lets users understand how the AI processed your prompt behind the scenes. Divided into implicit (only tells you when asked, ChatGPT gives modified versions upon request), explicit (directly displays the prompt used for generation in galleries), and collaborative (AI and user edit prompts together and explain the logic). Why / When to use: both builds trust and teaches users to improve prompting skills (watch how the AI optimizes your input and learn advanced techniques). Counterexamples/Risks:Users get uneasy if they find the AI secretly modified their input (especially without prior notice); too much information is hard for new users to digest; over-reliance on AI optimization leads to not learning. Examples: MidJourney galleries display the prompts behind images, /describe does reverse analysis; Anthropic transparently shows adjustment logic during optimization; Copy.ai directly optimizes prompts in the input box.

5.5 Regenerate & 5.8 Variations (a paired set)

What Regenerate is:Keep the same prompt without changing the input Let the AI try again.What Variations is: generate multiple versions for selection (usually 4 for images, 2–3 for text). Why / When to use: Both speed up convergence to the desired result and help the AI learn user preferences. Variations are especially suited for exploring complex prompts and sparking creativity. Counterexamples / Risks:Directly overwriting the original result = no way to go back and compare (frustrating); meaningless repetition (results are too similar); too many variations / unclear differences → choice paralysis. Solutions = keep generation history + multi-variation comparison interface + a feedback entry for "no suitable option". Examples: Grammarly regenerates alternatives for comparison before replacing; ChatGPT lists variations with attached ratings; MidJourney produces 4 fairly distinct options per prompt.

5.6 Sample response

What it is: Before processing a complex prompt,the AI first provides one sample to confirm it understood correctly, then generates the full output. Why / When to use:Preserves user agency + saves compute — for complex tasks (marketing plans, batch data), first output an outline or single sample for the user to confirm direction, avoiding generating a large batch only to find it went off track. Also preview before overwriting the user’s original content. Counterexamples / Risks: Frequent confirmation in simple tasks will interrupt the workflow; samples that are too simple / too different from the final product feel like a waste of time. Solution = dynamically decide whether to require confirmation based on task complexity. Examples: Notion shows 5 samples before applying a prompt to an entire column; Zapier tests workflow logic with a single data entry; Copy.ai provides multiple rewrite versions for confirmation before overwriting.

5.7 Show the work

What it is: Before execution,clearly show the steps the AI plans to take (data sources → algorithm → expected result), and ask for confirmation before executing high-risk tasks. Why / When to use:A safety baseline for AI Agent products — auto-execute low-risk tasks; for high-risk tasks (modifying code / triggering automations / changing system files), show steps first and request confirmation. Also serves as a learning tool (to understand the AI’s logic). Counterexamples / Risks: Over-displaying steps in low-risk routine tasks feels redundant and delays delivery. Solution = tier tasks by risk + offer basic/expert two-level display. Examples: Perplexity shows the processing steps for search queries; GitHub Copilot first gives an implementation plan and only modifies files after approval; Zapier shows workflow steps before execution.

5.9 Token Transparency

What it is: Reveal the tokens and their weights used by the AI during generation (more foundational than 5.4 Prompt transparency, focused on the smallest language units). Why / When to use: Reverse-engineer generation logic (MidJourney’s /describe shows the tokens behind an image),eliminate unintended bias / copyright sensitivity (discover that results unexpectedly reference protected works), and learn prompt optimization. Counterexamples / Risks:Transparency may expose creators’ works referenced in training → used without compensation; it can only reveal problems, while correction still requires user action (a barrier for novices). Examples: MidJourney’s /shorten shows the relative weight of each word; Udio lists main tokens in audio descriptions; MidJourney embeds part of prompts into file metadata.

VI. Trust indicators: Building trust at the levels of privacy, data, and authenticity

Problem this whole category solves: Give users control and transparency on highly sensitive dimensions such as data privacy, memory control, and content authenticity. AI records more than traditional platforms (especially when it acts as your "digital twin"), so the trust gap is larger.

6.1 Incognito mode

What it is: Borrowed from browser incognito — a private session in which activity is not recorded and not used for training. Why / When to use: Let users quickly submit requests they don’t want in history, and prevent specific information from entering long-term memory. Currently ChatGPT leads with its transparent private mode, with Claude and others following. Counterexamples / Risks:Unclear privacy concepts — users may mistakenly think incognito protects more than it actually does (just like common misconceptions about browser incognito). Platform policies reflect commercial logic: Google disables AI search in browser incognito (because high-cost AI cannot benefit from incognito data); Meta only offers "mute," not real privacy. Examples: ChatGPT enables private chats in the model dropdown + distinctive styling + clear notice of which data is affected; Perplexity’s incognito mode has an icon + explanation.

6.2 Memory

What it is: Let users view, edit, and delete the AI’s memory about them, resetting the relationship like clearing a browser cache. Why / When to use: Consumer trust in AI is currently low, and giving control over memory can significantly improve trust and retention. Support knowledge graph visualization (see what the AI knows), selective memory, one-click clearing (don’t force users to delete their accounts to do this → otherwise you lose users), and multi-identity partitioning (separate memory sets for work/personal). Counterexamples / Risks:Don’t put memory control behind a paywall (every user deserves privacy control);false privacy promises (claiming privacy while still recording — beware the precedent of the Google incognito class-action lawsuit). Examples: ChatGPT lists all memories in settings for deletion; Kin/Personal.ai provide a full knowledge graph that can be added to, modified, or deleted.

6.3 Watermarks

What it is: Various technologies for marking AI-generated content — surface watermarks (visible, easy to remove), steganographic watermarks (invisible, hidden in pixels/spacing), machine-learning watermarks (SynthID, robust against attacks), statistical watermarks,content provenance (C2PA protocol, embedding source into metadata as a "digital fingerprint"). Why / When to use: As AI becomes widespread, distinguishing AI vs. human content becomes critical — helping users filter, protecting creators, and maintaining platform quality.Regulations are pushing this: China requires filenames to include metadata + watermarks; the EU AI Act requires labeling; the 2023 US executive order sets standards. Counterexamples / Risks:Current technologies are fragile (Gaussian blur can break steganographic watermarks); standards are not unified (C2PA only works with broad adoption);false positives harm real creators, false negatives erode trust. Examples: TikTok was first to support Content Credentials metadata labels + automatic/proactive AI watermarking; Adobe Firefly adds watermarks to all generated images; OpenAI uses C2PA to watermark DALL-E content.

VII. Dark matte: Questionable gray-area designs (know what not to copy)

What this whole category is:Designs that are potentially harmful, or at minimum ambiguous — they negatively affect user trust, and their user value is questionable. They are listed not to teach you to use them, but to help you recognize them and avoid them. All three are patterns that "appear to protect users, but may actually protect the company."

7.1 Data Ownership

What it is: The toggle for data sharing, which determines whether user data is used to improve models. Why it counts as dark matte —the default settings hide tricks. Key comparison:Opt-in (default on) — ChatGPT/Substack/GitHub turn data sharing on for you by default (users must actively turn it off);Opt-out (default off) — Figma defaulted it off when launching AI in 2024, reflecting user-first design. There is also the paywall trap: many platforms only give data toggles to paid users, while free users default to sharing ("paying with data"). Why this is gray: Vague rules + a decade-long history of tech companies appropriating data → users naturally distrust it. Solutions (which you should do) = default off, explain impacts in plain language (not legalese), tiered management for enterprise/individuals, and explore models that do not rely on user data at all (Limitless.ai explicitly states it does not use data for training).

7.2 Caveat

What it is: Disclaimers such as "Generated results may be inaccurate, please use caution." Why it counts as dark matte —companies often use it as a tool to shift blame. Why this is gray: Warnings can educate users and reduce blind trust (positive), but warnings alone cannot solve the root problems of hallucinations/bias — they shift full ethical responsibility to the user, becoming an excuse for not improving the product. "Ignoring experience and ethical design to launch quickly, producing biased/incorrect data, cannot be fixed by warnings alone." What you should do: Warnings are the first step, not the finish line. Pair them with strengthened interaction design (guiding high-quality input), multi-dimensional transparency (letting users understand working principles and limitations),and having the company itself bear ethical responsibility (ensuring accuracy and diversity), rather than pushing it all onto users. Examples: GitHub Copilot / ChatGPT / Notion / Google Search all have this kind of small print at the bottom.

7.3 Rating

What it is: Upvote/downvote, star ratings. Why it counts as dark matte —how rating data is used is often opaque. Key distinction between two scenarios:Scenario A (users know they are interacting with a model, and ratings are used to optimize the model) = legitimate;Scenario B (users are unsure whether they are interacting with a model, or whether ratings are being used to assess "whether AI can replace humans") = ethical concern. Why this is gray:If users discover their ratings are being used to train AI to replace human labor, they will be strongly dissatisfied; ratings bring no immediate value, so users feel their data is being unilaterally exploited. Solutions = transparently explain the purpose of ratings (be honest even if it is assessing replacing human labor), give immediately useful suggestions after rating ("For better results you can try…"), and teach users to write better prompts. Examples: Upvote/downvote or star ratings on Jasper / Notion / Google / GitHub / ChatGPT / Julius.

VIII. ProductsAIGuidelines: Overall design guidelines for AI products (needs hierarchy + 10 considerations + success criteria)

This is the "master framework" of Shape of AI, helping you judge whether an AI feature is actually worth building, and whether it helps or harms people.

8.1 Classify AI features into four categories along the "needs spectrum"

Judge "who this AI feature is helping" — from the ones to be most wary of to the ones most worth building:

Trap doors — hidden data collection — aimed at harvesting data, harming users (default-on data tracking).Red line, do not touch.
Vitamins — entertainment/exploratory — fun but non-essential (AI-generated avatars). A nice-to-have add-on.
Augmenters — efficiency boosters — help people complete tasks faster (automated meeting summaries). The core value zone.
Access enablers — accessibility aids — help people overcome barriers (speech-to-text for the hard of hearing). Highest value.

8.2 10 considerations for designing AI products (checklist)

Avoid deception (no dark patterns) / Maintain transparency / Reduce personal data collection / Clearly communicate risks and limitations / Give users feedback and correction mechanisms / Core functions do not depend on AI (basic operations can still be completed if AI fails) / Improve accuracy (test to reduce bias) / Enhance accessibility / Comprehensively test across different users and scenarios / Be user-centered (AI adapts to users, not the other way around).

8.3 How to measure "design success" (sample success criteria)

Data is not forced to be provided; collection and use are transparent and visible.
Users can freely choose whether to use AI, and features are clearly labeled.
AI is not the only way to complete tasks (core operations can still be completed if AI fails).
Results are adjustable; users can manually correct or give feedback.
Tested across different user groups, suitable for multiple environments.
Adding AI significantly improves efficiency, rather than adding extra burden.
Has multimodal capabilities (voice/text/vision).

Quick-reference index: Which pattern to check when you encounter a problem

Your problem	Check
User faces an empty box and doesn’t know what to ask	Suggestions 1.3 / Templates 1.4 / Open input 2.1
User can’t articulate their needs in one sentence	Follow up 1.1 / Sample response 5.6 / Token layering 2.8
Want users to discover hidden features	Nudges 1.2
After results come out, the user only wants to change a small part	Inpainting 3.3 / Inline action 2.3
Want to give users multiple versions to choose from	Variations 5.8 / Regenerate 5.5
How to make users believe the AI is not making things up	Citations 5.1 / References 3.6 / Show the work 5.7
How to clearly label "This is AI, not a human"	Name 4.3 / Disclosure 4.5 / Symbols 4.2 / Color 4.1
Set a persona/role for the AI (companionship/narrative)	Personality 4.4 / Personal voice 3.5
Batch process structured data	Auto Fill 2.2 / Workflows 3.8 / Madlibs 2.4
Privacy/data/memory control	Incognito 6.1 / Memory 6.2 / Data Ownership 7.1
Authenticity marking for AI-generated content	Watermarks 6.3 / Footprints 5.3
Safety gates before high-risk operations	Show the work 5.7 / Sample response 5.6
Which designs not to copy (gray area)	Entire Dark matte category (7)

Sourced from Emily Campbell's 『Shape of AI』 AI product UX pattern library (reference/will-design-notes, all 49.md files read, 2025-08 snapshot). This article takes the perspective of a "reusable UI pattern component library"; for the conversational interface research perspective (6 conversation types / no fluff / 4 degrees of anthropomorphism / sycophancy / GenUI), see NNGroup AI Product and Conversational Interface Design (20 articles · 6 conversation types / 4 degrees of anthropomorphism / sycophancy / intelligence prioritized over human-likeness / explainable AI citations and disclaimers / no-fluff straight-to-answer truncated pyramid / 3 types of prompt suggestions · CARE framework · 4 uses of prompt controls / GenUI vs Vibe Coding · return of buttons and checkboxes · Promptframe · designing interfaces with prompts / 4 roles of AI assistants · creative partner P&G 776-person experiment · initial review of ChatGPT Agent · Google AI Mode · why users switch between GenAI and search), the two complement each other. Original screenshots are kept in sources (due to paths containing Chinese characters and spaces and being gitignored, this article uses text to describe pattern forms).