26.0k

What is a Visual Engineer?

The discipline

A Visual Engineer designs and builds production software directly in code, using visual tools, AI agents, and engineering systems. Creative direction and implementation become one practice.

The shift

The handoff is over.
Design is engineering.

Before

Design → Handoff → Code

Designers define the intention. Engineers reconstruct it in software. Something is lost every time the work changes hands.

Now

Design = Engineering

Creators shape and ship the actual experience through code, AI, and direct visual manipulation. They build the tools that make it, too. The thing you design is the thing that ships.

The practice

What a Visual Engineer does

Software is their creative medium, and they shape the tools as well as the product. Six capabilities define the practice. Other roles go deep on a few. A Visual Engineer reaches across all six.

123456
  1. 1

    Works in the real code

    Real application code, real components, the real design system. Not a picture of the product, but the product itself.

  2. 2

    Authors the creative context

    Writes the references, brand rules, and examples that people and AI agents work from, so every new screen starts on brand instead of drifting from it.

  3. 3

    Explores without disconnecting

    Tries layouts and alternatives side by side, in the running software, instead of in mockups that drift from what ships.

  4. 4

    Understands enough engineering

    Reads a diff, follows a component tree, knows when a change is safe. Enough to review, iterate, and ship with confidence.

  5. 5

    Builds creative tools

    Makes bespoke, often throwaway instruments for the craft itself: a motion tuner, a type playground, a brand asset generator. Engineers build tools for shipping. Visual Engineers build tools for taste.

  6. 6

    Closes the last mile of craft

    Takes the details that usually get cut at handoff (timing, states, edge cases of the visual system) and finishes them in the real product.

The path

How to become one.
From mockup to merged.

Most Visual Engineers start as designers. The move isn’t a career change. It’s five steps closer to the real thing, until what you make is what ships.

  1. Start from the real thing

    Open your team’s codebase, not a mockup.

  2. Get your own copy

    Work safely on a branch nobody else touches.

  3. Shape it visually

    Edit real components, live in the app.

  4. Direct the AI

    Steer agents with your taste and constraints.

  5. Ship for review

    Hand engineers a pull request, not a spec.

The difference

Not a new title.
A wider reach.

Every role you know owns a slice of the path from idea to production and hands the rest to someone else. A Visual Engineer owns all of it.

How to read the table

Shape
Shape the experience
Code
Write production code
AI
Direct AI agents
Tools
Build creative tools
Ship
Ship without a handoff
OwnsSharesHands off
ShapeCodeAIToolsShip

  1. Visual Engineer

    Owns the whole path, from intent to production.

  2. Product Designer

    Defines the experience, then hands it off.

  3. Creative Developer

    Builds expressive, experimental work.

  4. Design Engineer

    Bridges design quality and the frontend.

  5. Frontend Engineer

    Engineers the client-facing application.

Why it matters

From designer who hands off
to creator who ships.

  • Creative autonomy

    Take your work all the way into production instead of waiting for someone else to rebuild it.

  • Better work

    Taste survives implementation. The details you care about reach users exactly as you intended.

  • More leverage

    One person who can design, direct AI, and ship is worth more to any team and can make ambitious ideas real.

Seniority

From the pixel
to the whole system.

Every level ships real work. What grows is the reach: from changing the product, to building the tools that change it, to authoring the creative system that people and agents build from.

  1. Junior

    Ships style changes in the real codebase.

    Adjusts spacing, type, color, and layout directly in production code and gets them merged. That alone is a real win, because the design reaches users without a handoff.

    Understands the styling layer: tokens, CSS, utility classes.

  2. Mid-level

    Builds tools for their own craft.

    Still ships changes, but also makes bespoke, often ephemeral tooling, such as a playground, a generator, or a tuning panel. That tooling helps them explore faster and push the creative frontier of the brand.

    Understands the component layer: how the system composes and where it bends.

  3. Senior

    Shapes the whole creative system.

    Thinks beyond the design system to the brand system. Authors the references, assets, and written context that let teammates and AI agents produce excellent work across the product, the website, and every other surface.

    Understands the full design context an agent can ingest: code, markdown, references, and the philosophy behind them.

Explained

Visual Engineering,
in plain terms.

Do Visual Engineers build their own tools?

Yes. A Visual Engineer designs the product and also designs the tools that build it. That might be a one-off playground for tuning motion, a generator for brand illustrations, or a panel for testing type scales against real content.

These tools are often bespoke and ephemeral: made in an afternoon for one problem, then thrown away. Because the medium is code and agents do much of the building, making the right instrument is now part of the craft, not a separate engineering project.

Why do AI agents make Visual Engineers more important?

AI agents are only as good as the context they are given, and a component library alone is not enough context. Agents increasingly rely on well-structured code, markdown files, and references to decide how something should look, read, and feel.

A Visual Engineer curates that context, from copywriting and typography to spacing, hierarchy, and how fast an interaction feels. The result is that every person and every agent on the team produces work that is on brand by default.

What does a Visual Engineer do day to day?

A Visual Engineer improves the shipped product directly. On a typical day they open the team’s real codebase, explore a few visual directions on the running app, direct an AI agent to handle the repetitive parts, refine the details by hand, and open a pull request for engineers to review.

The work looks like design: layout, hierarchy, type, color, motion, and interaction. The output is production code rather than a mockup or a spec.

What skills does a Visual Engineer need?

A Visual Engineer combines design judgment with working fluency in code and AI. The core skills are visual design and interaction craft; reading and editing components, CSS, and a design system; directing AI agents with clear references and constraints; and enough git and review literacy to ship changes safely.

Deep algorithmic or infrastructure knowledge is not required. Taste, precision, and ownership of the result matter more.

Why is Visual Engineering a new category, and why now?

Visual Engineering is a new category because implementation is no longer the bottleneck in building software. Judgment is. A Visual Engineer only needs to understand the medium of code well enough to direct it. From there, the quality of the result comes down to their taste and their decisions.

Creative work rarely has a single correct answer. Building a cohesive experience means making hundreds of small calls about layout, type, motion, and feel, and seeing each one in the real product while the idea is still fresh. As recently as two years ago, AI models could not keep up with that pace, so people could not produce useful artifacts at the speed creativity demands.

That has changed. Agents can now be directed precisely and make changes fast enough that the creative flow never breaks. This opens the work to a new kind of practitioner: someone confident tackling code, who needs its full expressive range and refuses to be limited by the schemas, vector canvases, and fixed constraints of traditional design tools. Visual Engineering is the name for that practice.

How does a team work with a Visual Engineer?

A Visual Engineer works inside the normal engineering process, not around it. They branch from the team’s repository, make changes on their own copy, and submit pull requests that engineers review and merge like any other code.

Engineers keep ownership of architecture, data, and quality gates. The Visual Engineer owns how the product looks, feels, and behaves.

The canvas

Onlook is the canvas for Visual Engineers: your real codebase, running live, shaped visually and with the AI you already use.

Questions about
Visual Engineering

Read our FAQs

A Visual Engineer designs and builds production software directly in code, using visual tools, AI agents, and engineering systems. Creative direction and implementation become one practice.

Visual Engineering is the practice of designing and building production software directly in code, using visual tools, AI agents, and engineering systems. It unifies creative direction and implementation into a single discipline, removing the traditional design-to-engineering handoff.

No. A Visual Engineer treats software itself as their creative medium. Coding is part of it, but the craft is shaping the shipped experience. That means directing AI, working in real components, and owning the quality of what reaches users.

The roles overlap, and many design engineers already work this way. A Design Engineer typically bridges design and frontend implementation. A Visual Engineer goes further by directing AI agents and visual tools to take an idea from intention to production on their own, without a handoff.

A Frontend Engineer engineers the client-side application: architecture, state, data, and performance. A Visual Engineer focuses on the experience itself: how it looks, feels, and behaves. On most teams they work together, with the Frontend Engineer reviewing and supporting the Visual Engineer’s changes.

A Product Designer defines the experience and usually hands it to engineering to build. A Visual Engineer defines the experience and ships it, working directly in the production codebase so nothing is lost in translation.

Because AI agents removed implementation as the bottleneck. A Visual Engineer understands code well enough to direct agents through it, and the result is shaped by their taste and judgment rather than by how fast they can build. Traditional design tools, built on schemas and vectors, cannot express everything code can, so these practitioners work in code directly.

No. Vibe coding usually means prompting an AI and accepting whatever it generates. Visual Engineering is deliberate: it works inside a real codebase and design system, applies taste and constraints to every change, and ships through code review. The AI is directed, not trusted blindly.

No. Visual Engineers take over the visual layer that used to require a handoff, which frees software engineers to focus on architecture, data, reliability, and the hard problems only they can solve. Every Visual Engineer change still goes through engineering review.

No, but you need enough engineering fluency to review, iterate, and ship changes safely. That includes reading a component, understanding a diff, and knowing how your design system is structured. Visual tools and AI agents do much of the heavy lifting; your judgment does the rest.

Start from the real thing: open your team’s codebase instead of a mockup. Work on your own branch, shape real components visually, learn to direct AI agents with clear references and constraints, and ship your first change as a pull request. Most Visual Engineers start as product designers or design engineers.

Whatever lets them shape real software directly: a code editor, AI agents like Claude and Codex, git for branching and review, and a visual canvas on top of the running app. Onlook is built for exactly this workflow, but the discipline is bigger than any single tool.

A junior Visual Engineer ships style changes directly in the codebase. A mid-level Visual Engineer also builds bespoke tools for their own craft and pushes the creative edge of the brand. A senior Visual Engineer shapes the whole creative system, meaning the brand system and not just the design system. They author the context that lets teammates and AI agents produce excellent work.

A design system covers components and tokens. A brand system covers the full creative ecosystem: copywriting, typography, spacing and hierarchy, motion and perceived speed, imagery, and the philosophy behind them. Senior Visual Engineers make that system legible to people and AI agents across the product, the marketing site, and other assets.

Look for shipped work, not just portfolios of mockups. Strong candidates show visual craft, comfort in a real codebase and design system, a clear method for directing AI, and a track record of changes that were reviewed and merged into production.

Bring your team
to Onlook today

Download Onlook