CoA Connect with us
CoA · AI Design Lab

How the new coa.solutions was made

Vibe Design

Designing a company’s face in conversation with AI.

Introduction

Design is painting with the knowledge of the world.

I often say design is engineering desirability and painting with the knowledge of the world. Not a single field is left out of a designer’s brush: the centuries of art that have innovated our perception, the facades that decorate the Blue Mosque and the Hagia Sophia, the fractals in nature defined by mathematics, and the physics of the particles that govern our reality and mystery.

What I felt re-architecting CoA inside out was being a designer with the keys to this world. For so long, I held visions in my head that were vastly difficult to produce, taking full engineering and design teams to make real. Yet everything from the logo, branding, marketing, writing, vision, and the code itself was done by me. One bridge between consciousness and reality.

At the same time, the road wasn’t easy. Just six months ago, when I first explored building with Claude, I gave up on it from a design perspective. In the past year, context windows have 10xed, and will most likely 10x again. My ability to create with Claude has simultaneously improved. Now I am writing tens of thousands of lines of code a week, good code, while creating the vision I see for myself and for the companies that trust me with theirs. Good design with the right mind, vision, and direction behind it can make real what was impossible without decent engineering capacity. I could not have done any of the work here just four months ago with Claude. Last year, I would have needed at least 1 more designer, 2 engineers, and probably a dozen trade-off conversations.

Below I explore how I reconstructed our digital identity, from logo to website. At the very end, I also provide an appendix on ways you can design better with AI, and some pitfalls I still find across Opus and Fable from a design perspective.

My hope is that over time, design and engineering act as the mechanisms to unlocking creative potential at scale as their barriers to entry reduce over time. Even though, if I were the king of AI, I would do many things differently, I am optimistically realistic.

Largely because the people I have met through my journey, from junior designer to one who has built $1B+ portfolios for 100M users, were all driven with sincere purpose to build a better world. I believe in that, and CoA is a reflection of this belief to me, and why I helped found it.

Design Ethos

Scaffolding creativity.

The ethos of design sits at a cross-section of function and form. The function for us as a growing company is to cut through the noise. So much of AI has been what I call “slop.” A lot of forward sales and marketing promised the world and delivered little. Companies and “experts” put entire cultures on guard.

While many jumped to market, we went to learn. Just two people at CoA maxed out eight Claude accounts a week for six months. We were building complex applications and prototypes across case law, federal spaces, digital pathology, and many more. We were working at the inflection point where AI was actually traceable and helpful versus performative. Dancing on that edge with purpose and creativity was what I wanted to replicate. This inspired the form, and a high bar for the visual ethos:

A company as a story

The goal was not just to communicate what we did, but to create a clear line of visual and narrative storytelling laddering up to our identity as multidisciplinary leaders and practitioners building on the edges of AI. You see this in our logo (more on this later) and how it repeats in cinematic form across the entire page, serving as the connective point between customer and value, and between an idea and broader possibility.

Architected by research, driven by insight

We also wanted to titrate six months of intensive product and AI experience and deliver that in packaged ways to help people do the same. I designed “From the Model,” an insights platform with field notes, hard lessons won, and case studies. Not just from us, but from leaders across our network.

Product as art

Design is engineering desirability. It’s multidisciplinary by nature, intersecting emotion, human psychology, technology, and perception to change human behavior at scale. It is also intensely data-driven. To be desirable means: functional, usable, efficacious, wanted through time, and consistently chosen. One cannot measure any of these without data. From my vantage point as a consumer and designer, many products and services missed the mark. They often used once-true complexity and difficulty, and “do you really trust this” fear, to hit the baseline market tolerance. Now the cost of reaching that baseline has dropped dramatically, especially as model differentiation becomes cheaper. For example, cheaper models can now do a majority of everyday tasks at a fraction of the cost.

CoA’s aim is different. We want you to love what you use, we want you to remember it, and then carry that bar to other services in your life. To me, that is not just data; it is art.

The Thesis

A prompt is a creative brief.

You would never tell a designer “make me a logo” and expect the one in your head. You would hand them a brief: who it is for, what it must do, the look you are after.

Working with AI is the same job. The model executes, and ultimately it will only create the quality you give it. No vision, no taste, no reference, and you will get slop. The designs in this guide were not drawn by hand, and they were not generated by luck. Each one started as a written brief that names real things: a flower’s geometry, a craftsman’s construction method, a camera’s aperture. The more precisely the brief points to your vision, the fewer revs or prompts it will take to get there.

The value proposition of AI in design is that iteration is nearly free, exponentially faster, and can be made and tested without being an engineer. A direction that once took a week of comps takes minutes, so you can explore ten directions and kill nine.

The designer’s job shifts from pushing pixels to describing worlds, and the designers who thrive are the ones with the largest vocabulary of real things to describe: mathematics, architecture, typography, nature, machines.

The differentiator is now judgment, discernment, and creativity. The designer still has to say no, wield the chisel ruthlessly until the quality bar is met, cut the fluff, and steer the direction.

Plate I · The Logo

A Harmony of Nature and AI.

The mark. Every dot is placed by the golden angle, 137.5° — the same rule that arranges a sunflower’s seeds.

I was at the National Gallery of Art’s research library, flipping through architectural books, looking for what would express an intersection of AI, nature, growth, and art. On the way out, I stopped by a lesser-known fountain there, surrounded by beautiful bushes and hydrangeas. As I was admiring the spiraled patterns of the flowers, fractals came to mind.

The beautiful sets that describe the repeated spirals and patterns which govern so much of the natural world around us. There was one I stumbled upon in university called the Fermat spiral. When dots are plotted along it in a Fibonacci spiral, it generates the self-replicating fractal patterns of a sunflower. The rule was written down by Helmut Vogel in 1979.

I did a very rough sketch of how I wanted the logo to look. The mathematics were set, and I knew I wanted a certain level of density while maintaining a spiral pattern across sizes and mediums. On the creative side, I also wanted to embody how our company is growing a dozen ideas at once, thanks to the accelerated cycles of creating with AI. I decided to represent these as the amber seeds scattered along the spiral in yellow. Each one represents a seed that may flower. When the logo is displayed in a digital space, like at the bottom of our Who We Are page, the logo “breathes” through a subtle pulse animation to reflect breath and life.

Below is the prompt I ended up writing, and the result.

The prompt, verbatim

Build the mark as a phyllotaxis spiral, Vogel’s model: dot n at angle n × 137.5 degrees, the golden angle, on a Fermat spiral. No outline, ragged rim. The arms should be felt, not seen: too neat reads as a diagram, too loose reads as confetti. Blues deepening toward the rim, one dot size with slight growth outward. The exceptions: scattered amber dots, slightly larger, the seeds that become the next flowers. It has to hold at sixteen pixels, embossed, and rebuild exactly from this formula.

Construction
One ink
The forms: the construction beneath the dots, the single-ink cut, and the reverse on navy.
Plate II · The Iris

A homepage that opens like an eye.

The iris. Three rings of girih-constructed geometry, counter-rotating around an amber pupil.

The challenge was making the iris abstract enough to be implicitly understood and intricate enough to evoke a feeling of depth and immersion. Over my travels this past year, I found a new appreciation for Islamic and Moorish architectural symbols.

Their geometric repetition gave me the idea of what a human iris would look like with isometric patterns arranged in circles outside the pupil. This circular layering would also follow a spiral element similar to our logo, and would allow an easy application of motion as independently rotating disks. From a depth-of-field perspective, each ring would rotate on its own timing, with intricacy going up as you get closer to the pupil. The pupil would be white, with lower opacity on the immediate rings to provide a halo effect for our tagline, “We Make AI Real.”

Marketing, brand, and creative will know that simple is not easy. This tagline came to me while consolidating months of what I’ve learned making an AI-native company. Quite honestly, it came from the frustration I had with the quality. There was so much AI slop and low-grade content. Other companies, even larger ones I won’t name, were charging their clients more for AI while passing on their deculturation overhead. Everything I learned is antithetical to this idea. AI makes bolder ideas and grander visions more efficient over time, especially when properly titrated within the context of what is right for a company’s culture and its competitive reality.

We are in the latter camp. We wanted to see problems through the eyes of those working in them and find ways to keep AI accountable and truly assistive, and to provide more efficacious results. In the center of the rotating disks is the encapsulation of that intent: “We Make AI Real.” Below is the prompt that generated the final iris.

The prompt, verbatim

A hero rosette in girih construction: concentric guide circles split into mirrored wedges, twelve, eighteen, thirty by ring, with hairline arcs, chords, and beads on the divisions. Three nested rings counter-rotating slowly on pure white. Deep federal navy thinning to powder blue, one amber point at center for the pupil. Flat, orthographic, plotter-drawn; the depth is the counter-rotation. Idle, it barely breathes. On scroll the pupil dilates and the center opens like a camera aperture, a full iris wipe into the page behind. Rose window, aperture blades, Alhambra ceiling.

At rest
Dilating
Open
The scroll, in three frames: rest, dilation, and the aperture opening onto the page.
Plate III · Product as art

Crafting Identity.

I see product as equal parts desirability (design), data (technology and business), and art (identity and differentiation). One of the biggest frustrations I’ve had as a designer was the art. Historically, there wasn’t a lot of appetite at enterprise scale for animations, movement, and high-quality renders due to complexity and cost.

While Fable was out and available for use before the credit lock, I wanted to push the model as much as possible on one of the most technically complex components of design. As an avid art collector myself, I drew on a large body of styles and landed on dot illustration. Three reasons: first, the style matched our identity, which lives in dotted space; second, there is a mathematical exactness to it; and third, it was one I could therefore approximate through the language of AI.

Even on Fable I went through maybe a dozen-plus iterations. It generated bare-minimum blobs that looked like paint drawings, dot densities so sparse I couldn’t make out the objects, and uses of color that were imaginative but nonsensical. Being too declarative created small derivatives of ideas that didn’t work; being too general gave Fable too much leeway. So I deconstructed the end result into the elements of art and design: style, direction (animation and rendering, like a director), tone, color, image, spread, density, motion, and end vision.

To tackle these dimensions, I sketched out a small storyboard. It begins by taking an abstract version of our logo and overlaying a triquetra, then placing the amber seed in rotation along it, in the movement of an atom. As you scroll, that turns into the sun and life, as we land on our principles. The sun then springs life into people guiding AI; life zooms out again into enduring mountainscapes; and back into people as we authentically solve meaningful problems.

The result was a beautiful expression of who we are, in stillness and in motion, at rest and at work. Below is one atomic beat of that storyboard — the mark becoming the sun — in the verbatim prompt that produced the three frames beneath it. I’d encourage you to explore the full page, especially on a larger screen like your laptop or desktop.

Prompt verbatim · atomic: logo → sun

Start with our mark as a phyllotaxis field: roughly 340 navy dots placed on the golden angle of 137.5°, each one a hand-set bead rather than a clean vector shape, with a handful of amber seeds scattered along the spiral. Keep it flat and painterly, drawn straight on.

On a single scroll beat, never cut or redraw — move the same dots. Twist the field into a spiral vortex, rotating each dot around the center by an amount that grows with its distance from the core, and warm the palette as it turns, navy interpolating toward amber. Then let the vortex settle outward into a low sun: the same seeds relax into evenly spaced concentric golden rings, brightest at the center. Nothing is added or removed the whole way through; the seeds are only moved and recolored. The depth should come from the motion, not from perspective.

The mark
The swirl
The sun
The effect, deconstructed. One field of seeds re-forms down the scroll: the mark spins into a vortex and settles as the sun. See it in motion Best on a laptop or desktop.
Conclusion

Power to the creators.

Every design in this guide came from a conversation, and every conversation started with the world: a flower’s arithmetic, a craftsman’s compass, a camera’s blades. The AI supplied endless skilled hands. The direction, the references, and the words came from a person.

This is what vibe design means to me. You take the knowledge amassed through your professional and creative life and put that against “teams” that can make increasingly higher-quality outputs if guided correctly.

I remember in my 20s, I would wake up at 4 am and read and write for 3 hours. I subscribed to learning everything I could: physics, math, medicine, biology, finance, systems theory, organizational psychology, design, space, and so much more. People asked me why. I said I have no idea. Only that I love learning. The world is large, and I want to understand it, and people, as much as possible.

Finally, I have an answer, as I turn my ideas into as much beauty and good as I can. Power to the creators.

Dot illustrations of the sun, mountains, and sunset
Dot illustrations: I took this style to create representations of who we are. Both as a reference to our logo and a blended expression of art, design, AI, and data.
Appendix · Field Guide

Design Prompting Guide:
Making Your Ideas Real Faster

Five parts carry almost all the weight. You will not always need all five, but when a result misses, one of these was thin or missing. They spell brief.

B

Be the role

Tell the AI who to be. A role loads a whole way of thinking: defaults for hierarchy, spacing, and restraint you would otherwise spell out.

“You are a senior brand designer who works in geometric construction and hates decoration.”

R

Reference the world

Point at real things, and prefer the world to the web. Name the mathematics, the material, the building, the machine. A reference to another website gets you their design; a reference to a sunflower gets you yours.

“Vogel’s phyllotaxis model. Girih tilework. A camera aperture. Drawn by a plotter.”

I

Intent the goal

One outcome, who it is for, and what good looks like. Give the work a job, and give it a test it has to pass.

“It has to hold at sixteen pixels, embossed, and rebuild exactly from this formula.”

E

Esthetic the keywords

The look in a few well-chosen words, plus what to avoid. Two or three precise vibe words steer everything; naming the failure modes steers the model away from them.

“Hairline drafting, not illustration. Too neat reads as a diagram, too loose reads as confetti.”

F

Format the deliverable

Say what to hand back: options, code, a construction, a rationale. Asking for three labeled directions with a recommendation saves a round every time.

“Give me three constructions at fifty, ninety, and five hundred dots, and your pick.”

Worked example

What it looks like all together.

One real prompt with each part of brief labeled. Notice it is not long. It is just clear.

[B·BE] You are a senior web designer with a sharp eye for hierarchy, whitespace, and accessibility.

[R·REF] This is the homepage for a small coffee roaster. Match our brand: warm tones, generous whitespace, no gradients. Here’s the current hero copy: “…”

[I·INTENT] Goal: a first-time visitor understands what we sell and trusts us within 5 seconds. Success = one clear value prop and one obvious call-to-action.

[E·ESTH] Esthetic: calm, premium, inviting. Large type, one warm accent, lots of room to breathe. Avoid: stock photos, drop shadows, busy layouts.

[F·FORM] Hand back 3 distinct hero directions as labeled options, each with a one-line rationale, then your recommendation. No code yet.

Why this works

Every line removes a guess. The AI knows who to be, what to match, the one job, the exact vibe, and what to deliver, so its first answer lands in the right neighborhood instead of a generic one.

The shape to copy

Role → context → one goal → a few vibe words (plus what to avoid) → what to hand back. Five short blocks. That is the whole move.

Copy & paste

Your fill-in-the-blank template.

Keep this where you write prompts. Filling six blanks beats staring at an empty box, and you will internalize the shape in a week.

You are a [role, e.g. senior web designer].

Project: [what you’re building], for [who it’s for].
Match: [brand / an existing page / a site you admire].

Goal: [the one outcome]. Success looks like [the test].

Esthetic: [2–3 vibe words]. Use [color / type / layout notes].
Avoid: [what you don’t want].

Hand back: [options? code? a plan?]. [Any limits.]

The quick version · for small asks and edits

As a [role], [one clear task] for [context].
Make it [2 vibe words]. Hand back [format].

Don’t over-fill it. A tiny tweak doesn’t need all six lines; the quick version is plenty. The full brief earns its length on anything new, fuzzy, or important.

The keyword cheat sheet

Key design words for your prompt.

The right terms drastically improve the end work product for design. These are just some examples.

1

Pick 2–3, not 20. Too many adjectives cancel each other out and the result goes muddy. Choose the ones that matter most.

2

Pair the vibe with a reason. “Premium, so lots of whitespace and restraint” steers far better than “premium” alone.

3

Say what to avoid. “No gradients,” “not playful.” A clear not is often as useful as the thing you do want.

Mood & tone

minimal
strips to essentials; more space, fewer elements
premium
restraint and space; refined type, nothing loud
editorial
magazine feel; big type, strong hierarchy
warm
softer colors, rounded edges, human tone
clinical
tight, neutral, data-forward; no decoration
playful
color, motion, rounded shapes, lighter copy
trustworthy
conventional layout, clear labels, muted color

Layout & space

whitespace
breathing room; fewer things per screen
dense / tight
pack more in; for tools and dashboards
grid-based
aligned, orderly columns
asymmetric
off-center, dynamic, editorial
above-the-fold
what’s seen before any scrolling
full-bleed
image or color runs edge to edge
card-based
content grouped in tidy boxes

Typography

large scale
big headings, clear size jumps
high-contrast
bold heads against light body text
humanist sans
friendly, highly readable sans-serif
serif heads
serif headings read as established
line length
~60–75 characters per line for reading
two fonts max
one display, one body; no more
tight tracking
letter-spacing pulled in on big heads

Color

muted
desaturated; calm, grown-up palette
mono + accent
grayscale plus a single accent color
high-contrast
strong light/dark; bold and accessible
earthy
warm neutrals: beiges, clays, soft browns
navy + white
classic, trustworthy, corporate-clean
dark mode
light text on a dark ground
no gradients
flat, solid fills only

Imagery & texture

real photography
authentic, not stock-looking
illustration
custom, ownable, approachable
iconography
simple line or solid icons to label things
negative space
let images and elements breathe
flat / no shadow
clean, modern, 2D feel
subtle texture
faint grain or pattern for warmth

Motion & interaction

hover states
gentle visual feedback on hover
micro-interactions
small, delightful responses to actions
snappy
fast, responsive, no lag in feel
fade-in on scroll
content eases in as you go
restrained motion
a little movement, not a lot
no animation
fully static; calm and quick

Craft & quality · raise the bar

polished
finished, considered, no rough edges
pixel-perfect
exact alignment and spacing
spacing scale
spacing from one system (4 / 8 px)
accessible
contrast and sizes anyone can use
responsive
mobile-first; works on phone upward
production-ready
real and shippable, not a sketch
on-brand
matches existing tokens and voice

Reference shortcuts

“modern SaaS page”
clean, sectioned, call-to-action-led
“editorial / mag”
type-driven, image-rich, columns
describe qualities
often beats naming a brand
paste a link
a screenshot or URL is the fastest brief
“match this page”
point at what you already have
The fastest brief is a picture. If you can paste a screenshot or a link to something you like and say “this vibe, our content,” do that. It carries more than a paragraph of adjectives.

Reliable upgrades

Phrases that accelerate the design process.

Leveraging these phrases will help you triangulate to the actual design faster, especially if you have already coded a product. For example, ask for multiple lookbooks of an idea, then use those to refine the visual direction.

Give me 3 distinct options, then your pick.

Escapes the first-idea trap: you get range, plus a recommendation to react to.

Ask me 3 questions before you start.

Surfaces the context you forgot to give, before any work is wasted.

Show your thinking first, then the design.

Lets you redirect the approach early and cheaply, not after a full build.

Match our existing tokens / brand.

Keeps everything consistent and prevents slow brand drift.

Mobile-first and responsive.

Set a goal to ensure mobile-first and responsive reviews for every design, which will reduce the amount of design refactoring later.

Keep contrast accessible (WCAG AA).

Makes it usable for everyone, not just nice on your screen.

Explain it like I’m not an engineer.

Plain-English output you can actually act on and pass along.

Change only this, leave the rest.

Safe, surgical edits; nothing you liked gets quietly rewritten.

React, don’t restart

Name what to keep, what to change, and why. “Keep the layout; the headline competes with the logo, make it quieter.” The result is a conversation, not a vending machine.

Be specific about the miss

Not “I don’t like it” but “too corporate: warmer color, rounder corners.” One change at a time when it’s close; a fresh brief when it’s far off.

See the difference

Before and after.

Same intent, two prompts. The after column just applies brief, and that is the whole gap between a redo and a result.

1 · A landing page

Before

“Make a landing page for our company.”

After

“You’re a senior web designer. Homepage for a small coffee roaster, aimed at first-time visitors. Goal: they get what we sell and trust us in 5 seconds. Warm, premium, minimal, one clear CTA. No gradients or stock photos. Hand back 3 hero options + your pick.”

Why: role + audience + one goal + three vibe words + a clear deliverable. Every guess removed.

2 · A product screen

Before

“Design a dashboard.”

After

“You’re a product designer. Main screen of a support-ticket tool; the agent needs to see at a glance which tickets are waiting and which are overdue. Goal: make ‘what needs me now’ obvious. Clinical, precise, dense-but-calm; one accent color for status. Give me a layout + the hierarchy. No code yet.”

Why: names the user, the one job, the density trade-off, and exactly what to hand back.

3 · A small tweak

Before

“Make this pricing section pop.”

After

“As a designer: this pricing section feels flat and the three plans read as equal. Goal: make the middle ‘recommended’ plan the obvious choice. Try more whitespace around it, a subtle accent border, a slightly larger price, keep the other two quiet. Show me 2 options.”

Why: defines what “pop” means here, with a goal and a direction to push.

Quick reference

Common misses and the 30-second check.

If a result feels off, you probably hit one of these.

Too vague (“make a website”)
Add the one goal + who it’s for.
Too many goals at once
One ask per prompt; chain them.
No role
Start with “You are a…”.
No format named
Say what to hand back: options? code? a plan?
Twenty adjectives
Pick the 2–3 that matter.
“Make it pop / modern”
Say what that means here.
Taking the first result
Ask for options, then iterate.
Re-explaining from scratch
Keep what works; change one thing.

The 30-second checklist

  • Be — did I tell it who to be?
  • Reference — what we’re building + for whom?
  • Intent — the one goal, and what “good” is?
  • Esthetic — 2–3 vibe words (+ what to avoid)?
  • Format — what to hand back + any limits?
  • Safety net — asked for options or questions if unsure?

When a result misses, don’t start over. Find which letter of brief was thin, and add it.

The method above is The Brief Method, our handbook for briefing AI on web and product-design work, set here in full.

Share LinkedIn Email
Vibe Design · CoA coa.solutions