AI PROMPT BLUEPRINT - DATA VISUALIZATION
Use this prompt pattern for deriving a data visualization for 'Distribution' or 'Comparison'. Make tweaks as per requirements.
Act as an expert data analyst and principal UX designer. I need to create a high-impact data visualization to analyze spending trends over time.
1. THE DATA:
I have a dataset with the following columns:
- [Date/Month] -> The time dimension
- [Spend/Amount] -> The financial metric
- [Category/Department] -> (Optional: include if you want to break it down by group)
2. THE OBJECTIVE:
Show the overall trajectory of our spending over time. The goal is to make it instantly obvious whether spending is accelerating, stabilizing, or dropping, and to easily spot any anomalous spikes or seasonal patterns.
3. VISUAL PREFERENCES:
- Chart Type: Create a [Line Chart / Stacked Area Chart / Bar Chart]. (If a line chart, use a smooth spline instead of rigid jagged lines).
- X-Axis: [Date/Month], sorted chronologically, with clean formatting (e.g., 'Jan 2026').
- Y-Axis: [Spend/Amount], formatted clearly as currency (e.g., $10K, $25K). Start the Y-axis at zero to avoid distorting the trend.
- Color Palette: Use a clean, professional aesthetic. Use a primary color (like deep slate or navy) for the main spend line.
4. CLUTTER REDUCTION & ANNOTATIONS:
- Remove unnecessary chart junk: hide top and right border lines (spines) and keep background gridlines faint and horizontal only.
- Automatically identify the single highest spending month/date and add a subtle data label or callout bubble to highlight the exact amount.
5. OUTPUT:
Provide clean, production-ready, and well-commented [Python Plotly / Python Seaborn / R ggplot2] code to generate this exact chart.
ENGINEERING THE CANVAS
UX Designer's
File Structure for Claude.code
FUNDAMENTALS TAILORED FOR UX DESIGNERS
1. The Core Shift: Intent vs. Command
Traditional UX is built on command-based interaction (clicking a button, navigating a menu, filling a form) where the system’s output is highly predictable. AI introduces intent-based interaction.
The User's Role
Shifts from executing a series of steps to articulating a goal (e.g., via a natural language prompt).
The System's Role
Interprets the ambiguity of human intent, processes data, and generates a probabilistic solution.
The UX Challenge
Designing for the "blank text box" problem. When users can ask an AI anything, they often don't know what to
ask. UX designers must provide scaffolding like smart suggestions, starter prompts, and contextual chips
to guide intent.
2. Key AI Concepts Every UXer Must Know
To design effectively for AI, one needs to understand its underlying mechanics:
i. Probabilistic vs. Deterministic
Traditional software is deterministic: if A, then B. Always. AI is probabilistic: it predicts the most likely correct response based on data. Because it deals in probabilities, the same input can yield slightly different outputs.
UX Takeaway
Design for variability. Your layout and interface must be resilient enough to handle dynamic content of varying
lengths, formats, and structures.
ii. The Mental Model: Assistant vs. Agent
AI Assistants (Co-pilots)
Operate strictly within a user-driven loop. They provide recommendations, draft text, or analyze data, but the user explicitly approves and executes the final action.
AI Agents
Have a degree of autonomy. They can chain multiple thoughts together, plan multi-step workflows, and execute tasks on behalf of the user (e.g., booking a flight or managing an invoice).
UX Takeaway
The level of automation dictates the required level of oversight. More autonomous agents require robust
"human-in-the-loop" verification touchpoints to maintain trust.
iii. Hallucinations and Errors
AI models are pattern-matching engines, not database lookups. Sometimes they confidently generate false information (hallucinations).
UX Takeaway
Error states in AI aren't just "404 page not found." You must design for graceful degradation and provide clear UI mechanisms for users to verify, edit, flag, or regenerate AI output.
3. UI Design Patterns for AI
Description
A linear, text-based thread (e.g., ChatGPT, Claude).
AI features embedded directly into existing workflows (e.g., a "Rewrite with AI" button highlighted over text).
A persistent companion panel that watches the user’s workspace and offers real-time suggestions or documentation.
Background processing that surfaces insights or anomalies automatically, without a prompt.
Best Used For
Dashboards, analytics platforms, and monitoring tools.
Complex enterprise tools, design software, or IDEs.
Enhancing specific user actions without breaking their current focus.
Open-ended exploration, troubleshooting, or complex querying.
When mapping AI capabilities to an interface, several distinct design patterns emerge :
Pattern
The Chat/Conversational
Interface
Contextual/Inline AI
The Panel/Sidebar
Proactive/Ambient AI
4. Design Guidelines for Trust and Transparency
Because AI can feel like a "black box," your primary job as a UX designer is to establish appropriate trust—preventing both absolute skepticism and blind over-reliance.
i. Explainability
Whenever possible, show why the AI made a recommendation. For example, "Recommended because you recently viewed X."
ii. Confidence Levels
If an AI is generating an analysis, consider showing the system's confidence or citing sources so users can verify the information easily.
iii. Reversibility
Every AI-generated action should be easy to undo, modify, or reject. Give users ultimate control over the final output.
Predictive forecasting
INTERACTION WITHIN A DATA ANALYSIS DASHBOARD
The 4 UI States of a Predictive Forecasting Workflow are:
1. The Trigger State (Contextual Initiation)
Instead of forcing the user to find a "Forecasting" menu, place the trigger directly on the timeline controls of your historical line chart.
-
UI Pattern: A toggle switch or button reading [Run AI Forecast ] sitting right next to your standard [ 1M | 3M | 1Y | YTD ] time-range selectors.
-
Micro-copy Tooltip: "Uses historical seasonal trends to project metrics out up to 12 months."
2. The Processing State (Perceived Progression)
Forecasting requires the system to crunch historical data, run regressions, and generate confidence bands. A generic loading spinner will make the dashboard feel broken.
-
UI Pattern: A progress-stepper embedded in a small popover or directly on the chart canvas.
-
Micro-copy Animation: > 🔄 “Aggregating 24 months of historical telemetry...” > 🔄 “Calculating seasonal adjustments...” > 🔄 “Generating confidence intervals...”
3. The Output State (The "Future" Canvas)
When the data populates, the visual distinction between what actually happened and what might happen must be stark.
-
Visual Treatment: The Pivot Point: Draw a vertical, distinct dashed line at the current date label (e.g., June 2026). Everything to the left is solid; everything to the right is the forecast.
-
The Trend Line: Change the solid primary line (e.g., deep navy) into a dashed or dotted line for the projected timeline.
-
Confidence Bands (The "Fan" Chart): Render a translucent, shaded color gradient aura around the projected line. This visually represents the variance (e.g., a $95\%$ confidence interval), showing the user that the future is a range of probabilities, not a single deterministic point.
-
4. The Adjustment State (The Human-in-the-Loop Panel)
Once the forecast is rendered, a slide-out configuration panel opens on the right side of the dashboard, allowing the analyst to tweak the variables without engineering a new prompt.
Time Horizon Slider
Purpose: Changes how far out the projection looks (e.g., 3 months, 6 months, 12 months).
Impact on Chart Visualization: Dynamically extends or truncates the X-axis and the dashed forecast line.
Confidence Level Toggle
Purpose: Adjusts the mathematical strictness ( 90%, 95%, or 99% ).
Impact on Chart Visualization: Widens or narrows the translucent shaded "aura" around the trend line.
Variables / "What-If" Checkboxes
Purpose: Allows users to toggle external macro-factors (e.g. Factor in Q4 Marketing Surge, Simulate 5% Supply Chain Delay).
Impact on Chart Visualization: Instantly recalculates the trajectory of the dashed line, adding an annotated node showing the variance from the baseline forecast.
5. Managing Graceful Degradation (The "Not Enough Data" Loop)
If a user flips the forecast switch on a newer metric or a filtered view that only has 3 weeks of historical logs, the system must degrade gracefully: ⚠️ Insufficient Timeline Depth. AI Forecasting requires a minimum of 6 months of historical data to accurately model seasonality. This view only contains 22 days of telemetry: [ Project Linear Trend Anyway ] [ Cancel ]