We Love Claude

We Love Claude — Complete UI Map & Site Blueprint

Power-user reference. Every element of the UI, not just features.

Version: 1.1 — April 30, 2026 (sidebar order corrected; /search re-flagged as modal; /whats-new route removed) Purpose: Comprehensive map of every screen, option, and feature across all Claude surfaces. This document serves as the scaffold for a multi-page wiki that helps users discover and navigate every part of Claude's interface. Built by: Claude Computer Control audit of the live product Coverage status: See Appendix A — Surface Coverage Tracker

Table of Contents

1. Global Layout

ID Element Description
GL-01 Left sidebar Collapsible navigation panel. Full labels when expanded, icon-only when collapsed. Toggle via the sidebar button (top-left).
GL-02 Main content area Centre panel that renders the active view (chat, settings, projects, etc.).
GL-03 Top bar (in-conversation) Shows conversation title (clickable — dropdown), Share button (right).
GL-04 Bottom bar (sidebar) User avatar, name, plan badge (e.g. "Max plan"), download app button, and settings chevron.
GL-05 Menu bar (Desktop app) macOS: Claude, File, Edit, View, Window, Help.

2. Sidebar Navigation

The sidebar is the primary navigation hub. It contains these sections in order:

ID Item Icon Route Description
SB-01 New chat + /new Starts a fresh conversation.
SB-02 Search Magnifying glass (modal — link is href="#") Opens the search modal. The route /search is not a destination on web.
SB-03 Chats Chat bubble /recents Browse all past conversations.
SB-04 Projects Folder /projects View and manage project workspaces.
SB-05 Artifacts Grid/modules /artifacts/my Gallery of all saved artifacts.
SB-06 Code </> /code Claude Code on the Web (Research Preview).
SB-07 Customize Briefcase /customize Manage skills and connectors.
SB-08 Design Pen tool /design Claude Design (Research Preview).
SB-09 More — — Bottom-of-nav button revealing further sidebar items.
SB-10 Starred / Recents — — Recents list of conversations with hide toggle. (No standalone Starred section observed in the live sidebar 2026-04-30.)
SB-11 User profile Avatar + name — Bottom-left. Shows name, plan. Click opens Settings.

3. Home / New Chat

Route: /new

The landing screen when you open Claude or click "New chat".

ID Element Description
HC-01 Greeting Personalized message: e.g. "Back at it, Vijay" with the Claude asterisk icon.
HC-02 Message composer Central text input: "How can I help you today?" See Section 4.
HC-03 Quick-action tabs Row of shortcut buttons below the composer. See Section 4.3.
HC-04 Disclaimer Footer text: "Claude is AI and can make mistakes. Please double-check responses."

4. Message Composer

The message input area appears both on the home screen and within conversations.

ID Element Location Description
MC-01 Text input Centre Multi-line text area with placeholder text.
MC-02 Plus button (+) Bottom-left of input Opens the Plus Menu.
MC-03 Model picker Bottom-right of input Shows current model + thinking mode. See 4.1.
MC-04 Voice mode button Far right Microphone/waveform icon to activate voice input.
MC-05 Send button Far right (appears when text entered) Arrow icon to submit the message.

4.1 Model Picker

Trigger: Click the model name (e.g. "Opus 4.7 Adaptive") in the composer.

ID Option Description
MP-01 Opus 4.7 "Most capable for ambitious work" — currently selected (checkmark).
MP-02 Sonnet 4.6 "Most efficient for everyday tasks."
MP-03 Haiku 4.5 "Fastest for quick answers."
MP-04 Adaptive thinking Toggle switch. "Thinks for more complex tasks." When on, displays "Adaptive" label next to model name.
MP-05 More models Expands a submenu with older models.
MP-05a Opus 4.6 Legacy model option.
MP-05b Opus 3 Legacy model option.
MP-05c Sonnet 4.5 Legacy model option.

4.2 Plus Menu (Attachments & Tools)

Trigger: Click the + button in the composer.

ID Menu Item Submenu Description
PM-01 Add files or photos — Opens file picker for uploads (images, PDFs, documents, etc.).
PM-02 Take a screenshot — Captures a screenshot to attach to the message.
PM-03 Add to project Project list submenu Assigns the conversation to a project. Lists all available projects.
PM-04 Add from GitHub — Attach files from a connected GitHub repository.
PM-05 Skills Submenu: installed skills, "Manage skills", "Add skill" Invoke or manage Claude skills (e.g. skill-creator).
PM-06 Connectors Submenu: toggle individual connectors on/off, "Manage connectors", "Add connector", "Tool access" Enable/disable connected apps for this conversation. Connectors include: Gamma, Gmail, Google Calendar, Notion, Supabase, Vercel, etc.
PM-07 Research — Activates deep research mode for the query.
PM-08 Web search Toggle (checkmark) Enable/disable web search. When active, Claude can search the internet.
PM-09 Use style Submenu: Normal, Learning, Concise, Explanatory, Formal, "Create & edit styles" Choose a response style for the conversation.

4.3 Quick-Action Tabs

Row of shortcut buttons below the composer on the home screen.

ID Tab Icon Description
QA-01 Write Pen Starts a writing-focused conversation.
QA-02 Learn Graduation cap Starts a learning-focused conversation.
QA-03 Code </> Starts a coding-focused conversation.
QA-04 From Calendar Google Calendar icon Pull context from Google Calendar (requires connector).
QA-05 From Gmail Gmail icon Pull context from Gmail (requires connector).

4.4 Voice Mode

Trigger: Click the waveform/microphone icon in the composer.

Activates voice input and output. Voice options are configured in Settings > General > Voice settings (Buttery, Airy, Mellow, Glassy, Rounded).

4.5 Incognito Mode

Trigger: Click the ghost icon in the top-right corner of the main area.

Enables incognito mode where conversations are not saved to history.

5. In-Conversation View

Route: /chat/{conversation-id}

5.1 Conversation Header

ID Element Description
CH-01 Title Clickable conversation name. Click to inline-edit/rename.
CH-02 Dropdown arrow Opens a menu: Star, Rename, Add to project, Delete.
CH-03 Share button Top-right. Opens sharing dialog to create a public link.
CH-04 Sidebar toggle Top-left icon to expand/collapse the sidebar.

5.2 Message Bubbles

ID Element Description
MB-01 User message Displayed in a darker, slightly indented bubble with italic text.
MB-02 Assistant response Displayed in the main content area with full markdown rendering (bold, lists, headings, code blocks).
MB-03 Code blocks Syntax-highlighted with a copy button in the top-right corner.

5.3 Response Action Buttons

Appear below each assistant response on hover or after completion.

ID Button Icon Description
RA-01 Copy Overlapping squares Copies the full response to clipboard.
RA-02 Thumbs up Thumb up Positive feedback on the response.
RA-03 Thumbs down Thumb down Negative feedback; opens a feedback form.
RA-04 Retry Circular arrow Regenerates the response.

5.4 Adaptive Thinking Indicator

When adaptive thinking is enabled, a collapsible label appears above the response showing a summary of the thinking process (e.g. "Synthesized ethics and governance frameworks for mobile meeting prep"). Click the > arrow to expand and view the full thinking trace.

5.5 Artifacts Panel

When Claude generates an artifact (code, document, website, etc.), a split-panel appears on the right side of the conversation showing the rendered artifact with a preview, edit, and code-view toggle.

5.6 Sharing

Trigger: Click "Share" in the conversation header.

Creates a publicly shareable link to the conversation. The share dialog allows toggling public access on/off.

6. Chats Page

Route: /recents

ID Element Description
CP-01 New chat button Top-right, + New chat.
CP-02 Search Search bar: "Search your chats..."
CP-03 Select mode "Select" link to enter multi-select mode for batch operations.
CP-04 Chat list Scrollable list of conversations showing title, timestamp, and project name if applicable.

7. Projects

7.1 Projects List

Route: /projects

ID Element Description
PL-01 New project button Top-right, + New project.
PL-02 Search Search bar: "Search projects..."
PL-03 Sort by Dropdown: Activity (default), and other sort options.
PL-04 Project cards Grid of cards showing project name, description (if any), and last updated time.

7.2 Project Detail View

Route: /project/{project-id}

ID Element Description
PD-01 Back link "← All projects" navigation.
PD-02 Project title Large heading with the project name.
PD-03 Three-dot menu Project settings and management options.
PD-04 Star/favorite Toggle bookmark for the project.
PD-05 Share button Share the project with collaborators.
PD-06 Message composer Same chat input as home screen, scoped to the project.
PD-07 Conversation list List of past conversations within the project.
PD-08 Right sidebar: Memory Shows project memory (auto-generated after a few chats). Privacy indicator: "Only you".
PD-09 Right sidebar: Instructions Custom instructions that apply to all conversations in the project. + button to add.
PD-10 Right sidebar: Files Knowledge base files uploaded to the project. Shows capacity usage bar. + button to add files.

8. Artifacts Gallery

Route: /artifacts/my

ID Element Description
AG-01 New artifact button Top-right, "New artifact".
AG-02 Tab: Your artifacts Shows all artifacts you've created or saved.
AG-03 Artifact cards Grid of cards with visual previews of the artifact content, title, and last-edited time.

9. Claude Code on the Web

Route: /code

A separate interface for agentic coding tasks, labeled "Research Preview".

ID Element Description
CC-01 Header "Claude Code — Research preview" branding.
CC-02 New session Creates a new coding session.
CC-03 Routines Manage automated routines.
CC-04 Project filter Dropdown: "All projects" to filter sessions.
CC-05 Session list Grouped by date (Today, Older). Each session shows title and status icon.
CC-06 Code input Prompt input with placeholder: "Find a small todo in the codebase and do it".
CC-07 Select a repository GitHub icon + link to choose a repository to work on.
CC-08 Environment selector "Default" dropdown for selecting the execution environment.
CC-09 Model picker Shows model (e.g. "Opus 4.7 1M").
CC-10 Desktop download banner "Try Claude Code on desktop — Download" dismissible banner.

10. Claude Design

Route: /design

A separate interface for visual design, labeled "Research Preview by Anthropic Labs".

ID Element Description
CD-01 Header "Claude Design — Research Preview by Anthropic Labs".
CD-02 Project type tabs Prototype, Slide deck, From template, Other.
CD-03 New project form Project name input + "+ Create" button.
CD-04 Design system setup "Set up design system" button and description.
CD-05 Content tabs Recent, Your designs, Examples, Design systems.
CD-06 Search Search bar for finding designs.
CD-07 Design cards Grid of design project cards with thumbnails.
CD-08 Footer links Docs, User profile, Organization.
CD-09 Sharing note "Anyone in [org] with the link can see your project by default."

11. Customize

Route: /customize

Landing page with two main cards: "Connect your apps" and "Create new skills".

11.1 Skills

Route: /customize/skills

ID Element Description
SK-01 Skills list Left panel listing Personal skills with expand/collapse.
SK-02 Search & Add Search icon and + button at top of the skills panel.
SK-03 Skill detail view Right panel showing: name, on/off toggle, "Added by" (e.g. Anthropic), Trigger type (e.g. "Slash command + auto"), description, and a rendered preview of the SKILL.md content.
SK-04 File tree Expandable file structure within a skill (SKILL.md, agents/, assets/, etc.).
SK-05 Three-dot menu Additional options per skill.

11.2 Connectors (Customize)

Route: /customize/connectors

ID Element Description
CN-01 Connector list Left panel grouped by status (Web, Not connected). Lists: Gamma, GitHub Integration, Gmail, Google Calendar, Notion, Supabase, Vercel, Google Drive.
CN-02 Search & Add Search icon and + button.
CN-03 Connector detail Right panel showing: name, type label (e.g. "Interactive"), Disconnect button, three-dot menu, description text.
CN-04 Tool permissions Expandable sections: Interactive tools, Read-only tools, App-only tools. Each tool has three permission states: Allow (checkmark), Ask (hand), Block (slash). Group-level dropdowns available.

12. Search

Route: /search (or triggered from sidebar)

A dedicated search interface that searches across all past conversations, projects, and content.

13. Settings

Route: /settings (redirects to /settings/general)

Settings is accessed via the user profile area at the bottom of the sidebar. It contains 8 tabs in the left sidebar.

13.1 General

Route: /settings/general

Profile Section

ID Setting Type Description
GS-01 Full name Text input Your display name.
GS-02 What should Claude call you? Text input The name Claude uses in conversations.
GS-03 Profile picture Avatar Clickable to change.
GS-04 What best describes your work? Dropdown Role selection (e.g. "Operations").
GS-05 Personal preferences Text area Custom instructions that apply to all conversations.

Notifications Section

ID Setting Type Description
GS-06 Response completions Toggle Get notified when Claude finishes a response.
GS-07 Emails from Claude Code on the web Toggle Email notifications for Claude Code tasks.
GS-08 Dispatch messages Toggle Push notifications for Dispatch messages.

Appearance Section

ID Setting Type Description
GS-09 Color mode Card selector Light, Auto, Dark.
GS-10 Background animation Card selector Enabled, Auto, Disabled.
GS-11 Chat font Card selector Default, Sans, System, Dyslexic friendly.

Voice Settings Section

ID Setting Type Description
GS-12 Voice Card selector Buttery, Airy, Mellow, Glassy, Rounded.

13.2 Account

Route: /settings/account

ID Setting Description
AC-01 Log out Log out of all devices.
AC-02 Delete account Permanently delete your account (requires cancelling subscription first).
AC-03 Organization ID Displays your org ID with copy button.
AC-04 Active sessions Table showing: Device, Location, Created date, Updated date, with per-session action menus.

13.3 Privacy

Route: /settings/data-privacy-controls

ID Setting Type Description
PR-01 How we protect your data Expandable link Information about data protection practices.
PR-02 How we use your data Expandable link Information about data usage.
PR-03 Export data Button Download all your data.
PR-04 Shared chats "Manage" button View and manage publicly shared conversations.
PR-05 Memory preferences "Manage" link (external) Configure memory settings.
PR-06 Location metadata Toggle Allow Claude to use coarse location data (city/region).
PR-07 Help improve Claude Toggle Allow use of chats to train and improve Anthropic AI models.

13.4 Billing

Route: /settings/billing

ID Setting Description
BL-01 Plan info Current plan name (e.g. "Max plan — 5x more usage than Pro"), renewal date, "Adjust plan" button.
BL-02 Payment Payment method on file (e.g. "Mastercard ****4719") with "Update" button.
BL-03 Extra usage balance Current credit balance with "Buy more" (up to 30% off) button.
BL-04 Auto-reload Auto-purchase credits when balance is low. "Turn on" button.
BL-05 Invoices Table: Date, Total, Status, Actions (View).

13.5 Usage

Route: /settings/usage

ID Metric Description
US-01 Current session Progress bar showing usage within the current session. Resets timer shown.
US-02 Weekly limits: All models Combined usage across all models. Shows reset day/time.
US-03 Weekly limits: Sonnet only Sonnet-specific usage limit.
US-04 Weekly limits: Claude Design Design feature usage limit.
US-05 Daily included routine runs Counter (e.g. "0 / 15") for automated routine runs.
US-06 Extra usage Toggle to keep using Claude after hitting a limit.

13.6 Capabilities

Route: /settings/capabilities

Memory Section

ID Setting Type Description
CA-01 Search and reference chats Toggle Allow Claude to search past chats for context.
CA-02 Generate memory from chat history Toggle Allow Claude to remember context from chats.
CA-03 Memory from your chats Info card Shows when memory was last updated.
CA-04 Import memory from other AI providers "Start import" button Migrate context from other AI tools.

Tool Access Section

ID Setting Type Description
CA-05 Tool access mode Radio buttons "Load tools when needed" (default) or "Tools already loaded".

Visuals Section

ID Setting Type Description
CA-06 Artifacts Toggle Enable artifact generation (code, docs, websites) in a side panel.
CA-07 AI-powered artifacts Toggle Enable artifacts that use Claude's API internally.
CA-08 Inline visualizations Toggle Allow charts, diagrams, and visualizations directly in conversation.

Code Execution and File Creation Section

ID Setting Type Description
CA-09 Code execution and file creation Toggle Enable Claude to run code and create files (docs, spreadsheets, PDFs). Required for skills.
CA-10 Allow network egress Toggle Give the sandbox network access for installing packages.
CA-11 Domain allowlist Dropdown "Package managers only" or custom.
CA-12 Additional allowed domains Text input + Add button Whitelist specific domains for sandbox access.

Skills Section

ID Setting Description
CA-13 Skills redirect "Skills have moved to Customize" with "Go to Customize" link.

13.7 Connectors (Settings)

Route: /settings/connectors

ID Element Description
CS-01 Browse connectors Top-right button to discover new connectors.
CS-02 Connector list Full list of connected and available connectors with Configure/Connect/Connected status. Includes: GitHub Integration, Gamma, Gmail, Google Calendar, Notion, Supabase, Vercel, Google Drive.
CS-03 Add custom connector Button at the bottom to add a custom integration.
CS-04 Per-connector actions Three-dot menu for each connector with additional options.

13.8 Claude Code

Route: /settings/claude-code

ID Element Description
CCS-01 Referral section "Give Claude, get more Claude" — referral link with Guest pass (shows passes remaining), copy button.
CCS-02 Claude Code info Description and "Install instructions here" link.
CCS-03 Usage info Note about shared subscription usage limits.
CCS-04 Create pull requests automatically Toggle for auto-PR creation when Claude pushes to a branch.
CCS-05 Autofix pull requests Toggle for Claude to auto-monitor PRs for CI failures and review comments.

13.9 Claude in Chrome

Route: /settings/browser-extension

ID Element Description
CIC-01 Default for all sites Dropdown: "Allow extension" / other options.
CIC-02 Blocked sites Manage sites where Claude in Chrome is disabled. "Add websites" button.

14. URL Map

A complete map of all known routes in the Claude web application:

Route Page Section
/new Home / New Chat Section 3
/chat/{id} Conversation View Section 5
/recents Chats List Section 6
/projects Projects List Section 7.1
/project/{id} Project Detail Section 7.2
/artifacts/my Artifacts Gallery Section 8
/code Claude Code on the Web Section 9
/design Claude Design Section 10
/customize Customize Landing Section 11
/customize/skills Skills Manager Section 11.1
/customize/connectors Connectors Manager Section 11.2
/search Search Section 12
/settings/general Settings: General Section 13.1
/settings/account Settings: Account Section 13.2
/settings/data-privacy-controls Settings: Privacy Section 13.3
/settings/billing Settings: Billing Section 13.4
/settings/usage Settings: Usage Section 13.5
/settings/capabilities Settings: Capabilities Section 13.6
/settings/connectors Settings: Connectors Section 13.7
/settings/claude-code Settings: Claude Code Section 13.8
/settings/browser-extension Settings: Claude in Chrome Section 13.9

15. Cross-Reference Index

This index maps common user tasks to the relevant section(s) of the UI.

Task Where to Find It
Change AI model Model Picker in the composer
Enable extended thinking Model Picker → Adaptive thinking toggle
Upload a file Plus Menu → Add files or photos
Use web search Plus Menu → Web search toggle
Deep research Plus Menu → Research
Change response style Plus Menu → Use style
Connect Gmail/Calendar Plus Menu → Connectors, or Settings > Connectors
Create a project Projects List → + New project
Add project instructions Project Detail → Instructions panel
Upload project files Project Detail → Files panel
Star a conversation Conversation Header → dropdown → Star
Share a conversation Conversation Header → Share button
Delete a conversation Conversation Header → dropdown → Delete
Switch to dark mode Settings > General → Appearance → Color mode
Change chat font Settings > General → Appearance → Chat font
Choose voice Settings > General → Voice settings
Set personal preferences Settings > General → Profile → Personal preferences
Check usage limits Settings > Usage
Manage billing Settings > Billing
Export data Settings > Privacy → Export data
Turn on artifacts Settings > Capabilities → Visuals → Artifacts
Enable code execution Settings > Capabilities → Code execution
Use Claude for coding Claude Code on the Web via sidebar
Create a design Claude Design via sidebar
Create a skill Customize > Skills, or Plus Menu → Skills → Add skill
Use incognito mode Incognito button (ghost icon, top-right)
Use voice mode Voice button in the composer
Rename a conversation Conversation Header → click title or dropdown → Rename
Search past chats Sidebar → Search, or Chats page search bar
Manage active sessions Settings > Account → Active sessions
Refer a friend Settings > Claude Code → Referral section

Notes for Website Build

Proposed Site Structure

Each numbered section above maps to a page or major section of the We Love Claude website. The IDs (e.g. GL-01, SB-03, PM-07) serve as stable anchors for internal linking and can be used as HTML id attributes.

Micro-Animation Opportunities

Every interaction documented above (menu opens, toggles, dropdowns, panel slides) is a candidate for a micro-animation or GIF walkthrough. Priority animations:

  1. Model picker dropdown
  2. Plus menu expansion with submenus
  3. Project creation flow
  4. Artifacts panel opening alongside a conversation
  5. Adaptive thinking label expanding
  6. Style selector
  7. Connector toggle
  8. Voice mode activation

Content Priority for V1

  1. Home & Chat — the core experience most users see first
  2. Settings — the most common "where is this?" questions
  3. Projects — power-user feature that's underused
  4. Claude Code & Design — newer features users may not know about
  5. Customize (Skills & Connectors) — advanced configuration

Appendix A — Surface Coverage Tracker

This document currently covers claude.ai (web interface) only. The We Love Claude wiki needs to cover every surface where users interact with Claude. The tracker below shows what has been audited and what remains.

Surface Status Notes
claude.ai (Web) Audited Sections 1–13 of this document. Full UI map complete.
Claude Design Not yet audited Accessed at /design. Section 10 above captures the landing page and project creation, but the full design editor — canvas, toolbar, component panels, export options, collaboration features, design system management — has not been explored. Needs a dedicated deep-dive.
Desktop App (macOS / Windows) Not yet audited Largely mirrors the web UI but includes: native menu bar (Claude, File, Edit, View, Window, Help), Cowork mode, system notifications, keyboard shortcuts, window management, and OS-level integrations. Desktop-only features need to be identified and documented separately.
Mobile App (iOS / Android) Not yet audited Condensed interface with touch-specific interactions, camera integration for image uploads, swipe gestures, mobile navigation patterns, and a different layout from the web. Needs its own audit on both platforms.
Claude Code (CLI) Not yet audited Terminal-based agentic coding tool. Has its own command set, slash commands, hooks system, MCP server configuration, settings files (.claude/settings.json), IDE integrations (VS Code, JetBrains), and keyboard shortcuts. Entirely separate UI paradigm from the web.
Claude in Chrome (Browser Extension) Not yet audited Browser extension with its own overlay UI, page interaction tools, sidebar panel, and settings. Includes: browsing agent for web automation, page summarization, form filling, screenshot capture, and per-site permissions. Distinct from the claude.ai web app.
Claude in Excel Not yet audited Microsoft Excel add-in (beta). Spreadsheet agent that lets users interact with Claude directly within Excel. Includes: task pane UI, cell/range selection, formula generation, data analysis, chart creation, and Excel-specific prompting.
Claude in PowerPoint Not yet audited Microsoft PowerPoint add-in (beta). Presentation agent for creating and editing slides within PowerPoint. Includes: task pane UI, slide generation, content editing, layout suggestions, speaker notes, and design recommendations.
Claude in Word Not yet audited Microsoft Word add-in (beta). Document agent for writing and editing within Word. Includes: task pane UI, drafting, rewriting, summarization, formatting, and document-specific prompting.

ID Namespace Plan for Future Surfaces

To keep IDs unique across all surfaces, each new audit should use a surface-specific prefix:

Surface Prefix Example
Web (current) Two-letter section codes (GL, SB, MC, etc.) GL-01, MC-03
Claude Design (deep-dive) DE- DE-01 (canvas), DE-02 (toolbar)
Desktop App DT- DT-01 (native menu bar)
Mobile App MO- MO-01 (bottom nav)
Claude Code CLI CLI- CLI-01 (slash commands)
Chrome Extension EXT- EXT-01 (sidebar panel)
Excel Add-in XL- XL-01 (task pane)
PowerPoint Add-in PPT- PPT-01 (task pane)
Word Add-in WD- WD-01 (task pane)

Document generated by Claude via computer control audit of claude.ai on April 18, 2026. Updated to include surface coverage tracker and outstanding audit scope.