Vx0
A prompt-to-app tool that actually speaks our design system.
Public vibe-coding tools generate generic React. Vx0 is the internal version that knows our components, tokens and APIs, so a prompt comes out looking like it came from our team.
team
Me + 2 Staff Engineers
timeline
From early 2026, in-use.
focus
Skills/instruction, interface
role
Lead Designer
Home. Oneprompt box, a model picker, and starter templates built on the Volvo Cars Web Design System.
01
Why generic AI tools were not enough
Ask any AI code generator to make a button and you get generic Tailwind and shadcn. Ask it to build a car configurator and you get a toy wired to fake data. Fine for a demo, useless for us.
The deeper problem is access. Market teams without Figma, GitHub or an IDE never reach our contextual design and coding agent. So they turn to public vibe-coding tools, and ship landing pages that look nothing like Volvo.
Every one of those off-brand prototypes is a small tax: rework, inconsistency, and a design system that quietly stops being the source of truth.
Speed is easy. Speed that stays on-brand is the actual problem.
02
What is Vx0?
Product teams wait weeks to see an idea running as code. v0, Lovable and Bolt promise to close that gap, but they generate generic React. They cannot see our design system, internal packages or internal APIs.
Vx0 is the answer we proposed and built: an internal prompt-to-app tool that understands the inside of our stack.
Ideate within guardrail of our design system and visual language.
Either with or without a Figma frame.
/ Knows our system
Tools give the model live access to the Design System, the component library, the Federated Graph and other gateway APIs.
/ Runs real code
Generated apps execute in Azure Dynamic Sessions, not a sandboxed toy. What you see is what would actually run.
/ Ships out cleanly
When a prototype is worth keeping, users eject to GitHub and continue in the real codebase.
Build. Every value resolves to the closest VCDS token (var(--v-color-*)) instead of arbitrary CSS.
03
My role
Vx0 began as a side project in early 2026: two principal engineers and me. They owned the runtime and the model plumbing. I designed how it looks and how it knows our design language.
I was the main creator and editor of the visual and design-system skills that teach the agent our system, and I designed the tool's interface, from the prompt entry to the catalog of shared builds.
A model is only as good as what it knows about us. I wrote and tested a set of skills, compact instruction files the agent loads at build time, that give it real knowledge of our visual system. Four of mine carried the most weight.
Make the output feel like it came from our team, not from a generic model.
#skill: volvo-web-colors
Any color request resolves to the nearest brand token. Unique Volvo Web’s constraints and foreground/background/elevation combination across surface, text, border and state.
Why it matters. No arbitrary hex. Generated UI inherits the palette and stays theme-able.
#skill: data-viz
Encodes the chart library that I created for the organization: bar, line, donut and combo types, axis and label formatting, and an accessible categorical color sequence.
Why it matters. No more Recharts demo styling. Every chart comes out on-brand and legible.
#skill: layout-spacing
Layouts snap to the grid instead of guessing padding. Contextual guidance of using spacing tokens on specific layout.
Why it matters. Spacing reads as designed, not improvised. Our spacing guideline varies across consumer websites and internal toolings.
#skill:deck-visual-system
Builds multi-slide layouts from the internal presentation templates, with the right type styles plus title and content structures. Works with a Notion link.
Why it matters.Why it matters. Non-designers produce decks that look like ours.
05
Vx0 in action
Prompt to app. A brief becomes a running build
Ideation within guardrail of our Design System. Example of an AI-powered feedback form for an internal B2B product, built on Vx0.