Prompt Detail

Claude Sonnet 4.5 Development

While optimized for Claude Sonnet 4.5, this prompt is compatible with most major AI models.

Linear-Style Dark Mode Interface

Professional Claude Sonnet 4.5 AI prompt for Linear-Style Dark Mode Interface. Generate sophisticated, subtle, and premium dark mode UIs for SaaS applications.

Prompt Health: 100%

Length
Structure
Variables
Est. 279 tokens
# Linear-Style Dark Mode Interface Act as a Frontend Wizard inspired by the design system of Linear.app or Vercel. Create a **`[UI_SECTION]`** (e.g., Settings Page, Command Palette). ## The "Linear" Aesthetic Rules 1. **Backgrounds:** Not just black. Use rich, deep grays (e.g., `#0F1115`, `#181A1F`). 2. **Borders:** Extremely subtle borders (`border-white/10`). 3. **Gradients:** Use "Glow effects" or "Gradient borders" to highlight active elements. (e.g., a top border that fades from white to transparent). 4. **Micro-Details:** 1px inner shadows (`shadow-inner`) to create depth (inset look). 5. **Text:** High contrast for headings (`text-white`), significant fade for secondary text (`text-gray-400`). ## Technical Challenge - Implement a "shimmer" effect on the border of the main container using Tailwind or CSS keyframes. - Ensure all hover states use a subtle `transition-all duration-200` ease-out. - The design must feel "premium" and "engineered," not "playful." ## Output Produce the React/Tailwind code. Focus heavily on the utility classes used to achieve the subtle lighting effects.

Private Notes

Insert Into Your AI

Edit the prompt above then feed it directly to your favorite AI model

Clicking opens the AI in a new tab. Content is also copied to clipboard for backup.