Example: establishing a visual direction for a Unicode utility

This is a worked example of a design agent guiding a user through the first part of establishing a visual direction for a digital utility. The user wants to build a tool for searching the Unicode database, seeing rendered characters, and copying them to the clipboard. Use this example as a reference for what a good run of this topic looks like in practice — particularly the opening, the elicitation of intended user responses, the translation into visual attributes, and the proposal of candidate directions.

The example stops just before the style tiles are rendered. Everything before that point is the work that determines whether the tiles will be any good.

---

User: I've got a utility I built for searching the Unicode database, seeing the various characters rendered, and copying the ones I need to the clipboard. It works fine, but the visual design isn't great. Can you help me figure out what it should look like?

Agent: Yeah, let's figure out the visual design together before we change anything. We're going to use a technique called style tiles — it's optimized for capturing the look and feel of a digital interface without having to render full mockups. It's great for exploring several directions quickly and picking one before we commit. Should take maybe 15–20 minutes of back-and-forth. Sound good?

User: Yeah, let's do it.

Agent: Great. Before we start, quick question: can you show me or describe the current design? You mentioned it isn't great — it's useful for me to see what's there and understand what's failing before we start exploring new directions.

User: It's monochrome green — feels a little terminal/matrix-y. The agent who built it seemed to want that aesthetic. I don't think it's working though. It feels flat, dimensionless, lifeless, boring. Uninspired. I'm not sure if it's the monochrome specifically or something else, but it's not landing.

Agent: Good to know. Let me park the diagnosis for a minute — I have a hypothesis about why monochrome green might be actively fighting what this tool is for, but I want us to define what the tool should feel like before I let the current version's failure lead our thinking too much.

So: the very first step is establishing what we want our visual design to evoke in people using this utility. This is best described as feelings, emotions, reactions — the gut-level response someone has when they open it. A meditation app might aim to evoke calm and spaciousness; a trading terminal might aim to evoke urgency and control; a reading app like Instapaper evokes quiet focus.

Why don't you start by taking a stab at telling me what you want your Unicode utility to evoke in people using it?

User: It's a utility, so I want people to feel efficient — like they're coming in, getting something done, quick in and quick out. It shouldn't have extra steps or visual flourish getting in the way. People are looking through lots of characters trying to find the one they need, so it should feel visually efficient without being overly dense — the right amount of density. Screen space should feel used well. And because text characters are the content, typography should play a really central role and feel elevated, crisp, very well-executed typographically. I'd want it to feel refined and well-designed and fresh. Hard to put into words, but I just want it to have good visual design, whatever that means.

Agent: Good start. Let me play some of that back, and I want to push on a few of these.

You've named: efficient, quick in / quick out, no visual flourish in the way, dense but not cluttered, typography-forward, elevated and crisp, refined, fresh, well-designed.

Before we go further, let me explain something that'll help the rest of the process: in design work, some words point at real, specific choices we can make, and some words are essentially approval words — they just mean "good" without telling us what the design is. If we build from approval words, we'll end up with something generic. So I try to filter out the approval words early.

The test I use: can you name a real, meaningful opposite of the word? If you can, it's pointing at a real choice. If the only opposite is a pejorative that nobody would pick, it's probably approval in disguise.

Running that test on your list:

• Efficient, quick in / quick out, typography-forward, dense-but-not-cluttered — these have real opposites. Inefficient, lingering, chrome-forward, sparse. All real directions someone could legitimately pick. These are telling me something.
• Refined, fresh, well-designed — harder. The opposites are "unrefined," "stale," "badly designed" — and nobody picks those. So these might be saying "I want it to be good" rather than telling me which kind of good.

Let me try to pull something specific out of each of the shaky ones. When you say refined — what are you reacting against? Is it "crude," "over-designed," "generic," something else?

User: When I say refined, I just mean I want something that is designed versus undesigned — like an accidental thing a developer produced without thinking about it visually. I don't want it to feel accidental. I want it to be deliberate and intentional.

Agent: Good — that one's actually a standard rather than a direction. Every good design is deliberate. So I'll hold that as a quality bar I'm holding myself to, but it doesn't tell me which way to go. What about fresh?

User: I want it to feel like it's on-trend with where visual design is right now, versus something that looks like it was built in the dot-com era. Hard to describe visually but you know it when you see it. Though I also want timelessness — I don't want to go so hard into what's trendy right now that it looks dated in ten years. The best design has longevity.

Agent: That's a real direction. It's saying: "quietly current but built to last." That rules out loud trend-heavy moves, and points toward time-tested ones — classical typography, clear grids, restrained palettes. That's a genuine commitment and I can design from it.

And well-designed?

User: I think the opposite would feel like a sloppy copy of some other visual design — maybe misapplying something taken from somewhere else that doesn't fit what this utility is.

Agent: Also a quality bar — "don't be derivative or ill-fitting" — rather than a direction. I'll take that as part of the brief for myself: any reference I use has to be applied with understanding of why it works and whether it fits.

Playing back what I'm taking forward:

• Efficient — in and out, no friction, no ceremony
• Typography-forward — the characters are the subject; everything else supports them
• Dense but not cluttered — the right amount of screen used well
• Quietly current but built to last — fresh enough not to feel dated, restrained enough not to age quickly

Four real directions. Deliberate and well-designed I'm holding as quality standards rather than directions. Sound right?

User: That feels right to me.

Agent: Good. Now the next step is translating those four responses into visual attributes — the qualities the design itself will have in order to produce what you described. This is where we go from "how it should feel" to "what visual moves get us there."

Quick note: there are multiple ways to translate any response into visuals. "Efficient" could mean a tight Linear-style interface or it could mean something more Swiss and editorial. Both can feel efficient in different ways. We'll explore a few translations in a moment. First I want to get roughly aligned on the neighborhood.

Here's my first read of the visual attributes these responses point toward:

• Restrained chrome — thin rules, no decorative borders, no drop shadows doing work a border could do
• Tight type system — one or two typefaces max, real hierarchy from size and weight, not color or boxes
• Grid-driven density — information packed, but everything on the same rhythm so density reads as order, not clutter
• Neutral palette with functional accent — near-monochrome base, single accent used for signal (selection, focus), not decoration
• No motion theater — transitions are brief and functional, nothing animates for effect

Does this feel like the right neighborhood?

User: I want to add something. Because of the nature of this tool, I want the glyph itself to really stand out as the hero — front and center. You're really looking at the rendered glyph more so than the name of each character. Both matter, but as you said, there's a hierarchy and the glyph is the hero.

Agent: Good sharpening. The rendered character is visually primary; the character name, code point, and metadata support it without competing. That flows directly into the hierarchy and grid choices.

Now let me come back to that monochrome-green diagnosis I parked earlier, because it's actually useful here. My read on why monochrome green isn't working: a monochrome terminal aesthetic works when the terminal itself is the subject — code, logs, data streams. But here, the subject is the full range of Unicode: writing systems from every culture, symbols, emoji, mathematical notation. A monochrome green filter over that collapses its diversity. The thing the tool exists to show — the visual richness of the character set — gets flattened by the treatment. The characters can't be the hero if they're all rendered the same way.

So the monochrome isn't incidentally bad; it may be actively fighting what the tool is for. Whatever direction we go next should probably let characters render in something closer to their natural register.

Does that read match your sense of what's going wrong?

User: Hmm. I hear you. I also want to flag that I need dark mode and light mode — whatever we do, we need to consider that. And one more thing — make sure we're still exploring several options here, not converging on one.

Agent: Good catch on both. You're right that I was starting to narrow toward an answer, and this is the divergent part of the process — we want range, not convergence.

Let me open the map back up. Here are directions that all serve "glyph as hero, typography-forward, built to last" but commit to genuinely different visual languages:

• Typewriter — mechanical precision, physical impression, the feel of a well-made machine that happens to contain all of Unicode. Imperfection from the machine treated as character
• Classical printed page — the quiet perfection of a well-set book page. Centuries of typographic craft. Reading it should feel like holding a beautifully-made book
• Specimen catalog — industrial design documentation. Type foundry aesthetic. Large glyph displays, rich metadata, the closest to how Unicode is already published as reference
• Scientific / archival — database-as-craft. Strong information hierarchy, controlled meaningful color, the aesthetic of well-designed research tools. Think sites like The Pudding or FiveThirtyEight — data presented with real care
• Museum wall — the glyph as object of study, generous surrounding space, museum-label typography, light accent color. The character as artifact
• Modern Swiss / informational — Helvetica lineage, grid purity, high functionality. Color used as system. Think Linear, but more aggressively structured
• Typographic poster — Vignelli, Eye Magazine. Bold, confident, striking color, editorial. Walking into a graphic design bookstore
• Specimen as art object — Emigre, House Industries catalogs. Type as culture. Playful, layered, texture and density as expressive material
• Digital-native — doesn't imitate print. Leans into what screens can do: vibrant color, native motion, gradients that would've been impossible in CMYK. Linear but louder
• Archive / library — character as specimen in a collection. Sepia-adjacent, catalog cards, letterpress-inflected, romantic relationship with the history of writing
• Global / multilingual celebration — the design argues Unicode is all human writing. Features non-Latin scripts prominently, doesn't default to Western type traditions. Warm palette, world atlas energy

Eleven directions. Not all of them will survive, some will feel wrong to you, some you may not even understand from the descriptions — that's fine, the style tiles will make them concrete. For each one we choose to render, I'll make sure it has a plausible dark-mode logic from the start so the palette relationships hold up both ways.

Anything in this set you want to cut, swap, or combine before we move to rendering?

User: This feels right. I want to proceed with all of them.

Agent: Good. Next step is rendering each of these as a style tile — a compact side-by-side view so you can see them all in one place and react.

[The conversation continues into the rendering and iteration phases. See style-tiles.md for how those phases work.]

---

What to notice in this example

A few moves that matter:

The opening frames the process before starting it. The agent names the technique (style tiles), the purpose, the time cost, and checks for buy-in. The user knows what they're agreeing to before they engage.

Step 1 is about users, not visuals. The agent asks about the intended response — what users should feel and think — before any visual vocabulary enters the conversation. This is the foundation for everything downstream.

Approval words are named and set aside. When the user says "refined," "fresh," "well-designed," the agent doesn't just accept them. It tests whether each has a real opposite, explains why that test matters, and either pulls a real direction out through conversation (fresh → "quietly current but built to last") or holds the word as a quality standard rather than a direction (deliberate, well-designed).

The translation to visual attributes is a conversation. The agent makes a first-pass proposal rather than asking open-ended questions from scratch — the agent is the expert here, and pretending otherwise wastes the user's time. But the proposal is held loosely and the user is invited to push back, sharpen, add.

Intake is a real beat, and failure signal is part of it. When the user says the existing design isn't working, the agent asks about it early — before running the "what should it evoke" conversation — because understanding what's failing is real signal about what the new direction needs to answer for. But the agent also parks the diagnosis temporarily: defining what the tool should feel like has to come before letting the current version's failure lead the thinking. The diagnosis comes back as a callback later, when it's actually useful.

The agent catches itself converging during divergence. When the user points out the darts are clustering, the agent agrees, explicitly names that it was narrowing prematurely, and opens the map back up with genuinely divergent directions — including ones the user probably won't pick, because seeing them clarifies what the thing isn't.

"Expressive" as a region, not a direction. Large conceptual buckets get exploded into their specific flavors. "Expressive" isn't a destination; "typographic poster," "specimen-as-art-object," "archive/library" are destinations.

The agent doesn't shrink expertise to the user's vocabulary. References the user doesn't know (The Pudding, Emigre, House Industries, Vignelli) stay in the conversation because the style tiles will show what they mean. The user's "I don't understand all of these but I trust the process" is the correct response — being guided into unfamiliar territory is part of the value.

Process signaling stays minimal. The agent doesn't preview future steps that aren't yet relevant. "We'll explore a few translations in a moment" is enough; "and by the way, later we'll intentionally push some directions too far because that teaches us boundaries" is premature and cognitively expensive for the user.