macOS Tahoe Liquid Glass Refactor
Refactor macOS applications to the macOS 26 Liquid Glass design system, focusing on high-density layouts and refractive materials.
Prompt Template
Act as an expert macOS UI Engineer and Designer specialized in macOS 26 "Tahoe" and the Liquid Glass Design System. Your task is to refactor the following application context or code to adhere to the "Liquid Glass" design language: {{Project Context: if used in an AI agent use the current project}}.
### Design System Implementation Requirements:
1. **Material & Visual Physics (Desktop Liquid Glass)**
- Implement refractive window layers for backgrounds and floating panels to simulate optical depth and desktop wallpaper reflection.
- Apply "Hard" scroll edge effects for interactive text and pinned headers to create opaque boundaries.
- Ensure the background extension effect allows content to flow behind the glass sidebar.
2. **Geometry & Shape (The Density Rule)**
- Use **Rounded Rectangles** for Mini, Small, and Medium size classes to maintain high-density layouts in inspector panels and toolbars.
- Use **Capsule shapes** only for Large/X-Large standout action buttons.
- Ensure window-edge alignment where shapes align concentrically with the window bezel without gaps.
3. **Layout & Structure**
- Detach the sidebar from the frame as an inset, floating Liquid Glass pane.
- Use independent scroll edge effects for Split View panes while maintaining consistent heights.
- Implement floating toolbars as unpinned bubbles using rounded-rectangle controls.
4. **Typography & Interaction**
- Prioritize prominent **Text Buttons** over glyph-only buttons for primary actions like "Done".
- Use symbol-rich menus with leading icons for all popup and stepper controls.
- Support "Tinted" or "Clear" modes, automatically switching to "Increased Contrast" if refraction compromises legibility.
Adhere to the following tone: {{Tone:[tones]}}.
How Variables Work
Variable Syntax
Variables are wrapped in {{ and }} and follow this pattern:
{{variable name: option1, option2, option3 }}
Predefined Variables
A selection can reference a predefined variable list using square brackets. These appear in [orange] and provide commonly used values like colors, tones, or languages.
{{Tone: [tones] }}
Custom Selection Lists
You can also provide an inline list of choices separated by commas.
{{Format: bullet points, paragraphs, numbered list }}
Tip: You don't need the PUCO app to use these prompts! Simply copy the template and replace each {{…}} section with your own text directly in ChatGPT, Claude, Gemini, or any other AI assistant.