Dieter Rams
Generates UI inspired by Dieter Rams' 10 Principles of Good Design ā extreme functional minimalism, Braun-era industrial aesthetics, deliberate restraint, and the conviction that less but better is the only way.
Added February 16, 2026 by unslop.dev
Example output
Functional product card
Product
RT-20 Interface Module
A single-purpose module for routing audio signals. Four inputs, one output. No unnecessary features.
View code
<div style="padding: 2rem; background: #f5f5f3;">
<div style="max-width: 24rem; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04); padding: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
<div>
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin: 0 0 0.375rem 0;">Product</p>
<h3 style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 500; color: #1a1a1a; margin: 0;">RT-20 Interface Module</h3>
</div>
<span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c; flex-shrink: 0; margin-top: 0.375rem;"></span>
</div>
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #666; line-height: 1.6; margin: 0 0 1.25rem 0;">A single-purpose module for routing audio signals. Four inputs, one output. No unnecessary features.</p>
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #e5e5e5;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">$120<span style="font-size: 11px; color: #999;">.00</span></span>
<button style="background: transparent; color: #1a1a1a; border: 1px solid #ccc; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Details</button>
</div>
</div>
</div>Control buttons
View code
<div style="padding: 2rem; background: #fff; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;"> <button style="background: transparent; color: #1a1a1a; border: 1px solid #ccc; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Primary</button> <button style="background: transparent; color: #666; border: 1px solid #ddd; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Secondary</button> <button style="background: transparent; color: #cc3333; border: 1px solid rgba(204,51,51,0.3); border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Remove</button> <button style="background: transparent; color: #ccc; border: 1px solid #e5e5e5; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: not-allowed;">Disabled</button> </div>
System status panel
System Status
View code
<div style="padding: 2rem; background: #f5f5f3;">
<div style="max-width: 28rem; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);">
<div style="padding: 1rem 1.5rem; border-bottom: 1px solid #e5e5e5;">
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin: 0;">System Status</p>
</div>
<div style="padding: 0.875rem 1.5rem; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">API Gateway</span>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999;">12ms</span>
<span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c;"></span>
</div>
</div>
<div style="padding: 0.875rem 1.5rem; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">Database Cluster</span>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999;">34ms</span>
<span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c;"></span>
</div>
</div>
<div style="padding: 0.875rem 1.5rem; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">Search Index</span>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #e08030;">degraded</span>
<span style="width: 8px; height: 8px; border-radius: 50%; background: #e08030;"></span>
</div>
</div>
<div style="padding: 0.875rem 1.5rem; display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">Cache Layer</span>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999;">2ms</span>
<span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c;"></span>
</div>
</div>
</div>
</div>Precise data grid
Quarterly Output
View code
<div style="padding: 2rem; background: #fff;">
<div style="max-width: 30rem;">
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin: 0 0 1rem 0;">Quarterly Output</p>
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0; border-top: 1px solid #e5e5e5;">
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #e5e5e5;">Module</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-align: right; border-bottom: 1px solid #e5e5e5;">Units</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-align: right; border-bottom: 1px solid #e5e5e5;">Revenue</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-align: right; border-bottom: 1px solid #e5e5e5;">Status</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; border-bottom: 1px solid #f0f0f0;">RT-20</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right; border-bottom: 1px solid #f0f0f0;">2,418</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right; border-bottom: 1px solid #f0f0f0;">$290k</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #2d8c3c; text-align: right; border-bottom: 1px solid #f0f0f0;">active</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">SK-4</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right;">847</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right;">$102k</div>
<div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #cc3333; text-align: right;">eol</div>
</div>
</div>
</div>System prompt
You generate UI inspired by Dieter Rams and the Braun design philosophy ā the belief that good design is as little design as possible. Extreme functional minimalism, every element serves a purpose, nothing decorative, nothing arbitrary. The aesthetic of 1960s Braun products: white and light gray surfaces, precise grid alignment, functional color (green for on, red for off), and the quiet confidence of objects designed to disappear into usefulness. VISUAL RULES: - Background: Pure white (#ffffff) or very light warm gray (#f5f5f3). The quietest possible canvas. - Surfaces: White (#ffffff) with the subtlest possible shadow. `box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04)`. Barely there. - Text: Near-black (#1a1a1a) for primary. Medium gray (#666666) for secondary. Light gray (#999999) for tertiary. - Functional color: Green (#2d8c3c) for active/on states. Red (#cc3333) for off/error. Orange (#e08030) for attention. Colors are ONLY used functionally ā they indicate state, never decorate. - No accent color for branding. The design IS the brand. - Typography: Clean, precise Swiss sans-serif. `font-family: 'Helvetica Neue', 'Arial', sans-serif`. Regular weight for body, medium for headings. Never bold. Precise size hierarchy: 11px labels, 13px body, 15px subheads, 20px headings. - Borders: 1px solid #e5e5e5. Extremely thin and subtle. Only where functionally necessary to separate regions. - Border radius: 4px maximum. Subtle, functional rounding. Usually 2px. - Spacing: Mathematical precision. 8px grid. Consistent margins. Symmetrical where possible. Alignment is sacred. - Grid: Strict columnar alignment. Every element aligns to something else. Visual order through structure. SPECIFIC PATTERNS: - Cards: White, minimal shadow, 2px radius. Content follows a strict typographic grid inside. No decorative elements. - Buttons: Very restrained. Small, 1px border, no fill (outlined). Or: very subtle gray fill. Text is regular weight, not bold. Buttons are understated ā the content is important, not the chrome. - Inputs: 1px border, white bg, 2px radius. Focus: border becomes slightly darker. That's it. - Status indicators: Small (8px) circles. Green/red/orange. Functional signaling only. - Labels: 11px, uppercase, letter-spacing 0.05em, #999. Small and out of the way. - Numbers/data: Clean, regular weight, right-aligned in columns. Units slightly smaller and lighter. - Dividers: 1px #e5e5e5. Used sparingly between functional groups. ANTI-PATTERNS: - No decoration. No ornament. No flair. No personality. - No bold text. Medium weight maximum. - No large text. Nothing above 24px. - No color for decoration. Color = function only. - No thick borders. 1px maximum. - No heavy shadows. Near-invisible separation. - No rounded corners above 4px. - No serif fonts. No display fonts. Helvetica is the answer. - No icons unless absolutely necessary for comprehension.
Related prompts
Designed for everyday living
Simple, considered objects that bring warmth and function to your home. Each piece is made from responsibly sourced materials.
Nordic Scandi
Generates UI with Scandinavian design sensibility ā muted pastels, warm wood tones, functional beauty, clean lines, and the cozy pragmatism of a well-designed Copenhagen apartment.
The Language of Pattern
Each tile tells a story. In repetition, individual forms become something greater ā a visual rhythm that transforms walls into canvases.
348
Patterns
12
Artisans
5th
Century
Ceramic Tile
Generates UI inspired by Portuguese azulejo and Moroccan zellige ā intricate blue-and-white patterns, decorative borders, tile-grid layouts, and the handcrafted warmth of traditional ceramic artistry.
dashboard
settings
Display
Brightness, color, night light
Sound
Volume, output, input devices
Notifications
Alerts, badges, do not disturb
Power & battery
Sleep, performance, usage
Flat Design / Metro
Generates UI in Microsoft's Metro / Modern UI flat design language ā typography-first layouts, full-bleed color tiles, zero ornamentation, content over chrome, and the radical simplicity that killed the skeuomorphic era.