Generate a new design based on this screen using your own content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: Claude Connector Details
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Claude
- **Category:** Settings
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/69971c3206b034cb75015e68_oiukr2rOwLxn3J6eGHzBhEouBb4xQTgSB0IKyuXgSqE.avif
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.
This is Figma's connector settings page inside what looks like Claude's interface. What hits first is the sheer clarity. A simple left sidebar with Settings categories, and then this beautifully organized tool permissions panel that never feels overwhelming despite listing 12+ tools.
Smart Grouping That Actually Helps
The tools are split into Interactive, Read-only, and Write/delete categories. Each gets its own "Always allow" or "Needs approval" dropdown. Then every individual tool has three toggle states. It's a lot of granular control packed into a layout that stays calm. The warm beige and cream palette keeps everything soft without feeling washed out. Typography is minimal, monospace-style for tool names like `get_screenshot` and `get_variable_defs`, which gives it a dev-friendly feel.
What Makes It Stand Out
The permission hierarchy is the star here. Global controls per category plus per-tool overrides. That's genuinely thoughtful UX. The Uninstall button sits quietly top-right, not screaming for attention. Everything breathes. No cramped rows, no visual noise. Just structured, functional design that respects the user's time.