Don’t Say “Build a Beautiful UI” — Use References

“Beautiful” is undefined

When you ask an agent to “build a beautiful UI,” you’ve given it two hard problems: decide what beautiful means to you, then build it. The first step usually fails because beauty is subjective. Without anchors, the model will invent a style you didn’t intend.

Anchor with references

Give the agent specific visual anchors so it doesn’t have to guess. References shrink the search space and align expectations.

• Artists: cite real people or movements (e.g., Dieter Rams, Memphis, Skeuomorphism, Susan Kare, Syd Mead).
• Style guides: Material Design 3, Apple HIG, IBM Carbon, Microsoft Fluent.
• App references: “like the Braun ET66 calculator,” “like Apple Clock,” “like Notion tables.”
• Constraints: color palette, typography, spacing scale, motion tone, device targets.
• Deliverables: ask for a wireframe first, list of components, then a styled pass.

Prompt demos

Demo A — Vague vs. referenced

Build a beautiful dashboard for a finance app.

Design a finance dashboard inspired by Material Design 3 and Bloomberg terminals.
- Deliver a wireframe first: navigation, positions, and data density.
- Then apply styles: MD3 color roles (primary/secondary/tertiary), elevation tokens, and compact density.
- Charts should resemble Bloomberg: dark background, high contrast, mono type for tickers.
- Outputs: component list, wireframe description, then styled HTML/CSS (separate steps).

Demo B — “Act as a design expert” vs. concrete scope

Act as a design expert and make a beautiful landing page.

Design a SaaS landing page in the style of Apple HIG typography and IBM Carbon spacing.
- References: apple.com/mac (hero rhythm), slack.com (section scannability).
- Constraints: two-column grid, 8px spacing scale, max width 1200px, no stock photos.
- Deliver wireframe → copy draft → styled pass. Include alt text for all imagery.

Demo C — “Modern and sleek” vs. movement + palette

Make a modern, sleek, minimal settings page.

Create a settings page in a skeuomorphic style (soft gradients, bevels, tactile shadows).
Palette: #111 background, #fff text, #0ff accent. Typography: monospace only. Use subtle shadows and gradients.
Deliver: IA outline → wireframe → styled markup.

Mini‑demo: the same calculator, different references

Ask for one object — a simple calculator — then swap references. The agent shouldn’t invent “beauty”; it should map your references to UI choices.

1) Braun/Rams minimalism

Design a four‑function calculator like the Braun ET66 (Dieter Rams):
- Low‑contrast plastic body, circular buttons, yellow = key.
- Typeface: DIN‑like grotesk. No shadows. Tight tolerances.
Deliver: wireframe → styled markup. Note which details map to the ET66.

2) Apple HIG (iOS)

Design an iOS calculator per Apple HIG:
- Large tappable targets, San Francisco, dynamic type sizes.
- Clear button roles: numeric (neutral), ops (accent), = (prominent).
- Motion: subtle spring on press.
Deliver: wireframe → styled markup. Include accessibility notes.

3) Bento style

Design the calculator in a Bento style:
- Use tile-like cards with generous gaps; rounded corners and playful color blocks.
- Pastel gradients and soft shadows; emphasize the = tile.
Deliver: explain tile grouping choices, then styled markup.

4) Memphis design (’80s)

Design a playful Memphis‑style calculator:
- Bold shapes, high‑contrast patterns, asymmetry. Bright primaries with black outlines.
- Typography: geometric sans. Exaggerate the = key.
Deliver: wireframe → styled markup. Explain how each choice maps to Memphis.

5) Skeuomorphism

Design a skeuomorphic calculator:
- Subtle gradients and layered shadows to suggest depth.
- Rounded corners, glossy highlights, tactile affordances on keys.
Deliver: semantic HTML → minimal CSS. Accessibility first.

Takeaways

• “Beautiful” is subjective; don’t make the model guess.
• Use concrete references and style guides to set the target.
• Ask for wireframes first; style later.
• Be explicit about constraints and non‑goals.