What Is Vibe Design?

What is vibe design?#

Vibe design means directing the look, feel, and layout of an interface through intent instead of manual construction. You state a business goal, how users should feel, or a reference you like. An AI tool proposes screens, and you steer by reacting to them.

Vendors phrase this slightly differently. Framer's dictionary defines it as "the practice of directing the look, feel, and layout of a user interface" with natural-language prompts. IMG.LY calls it "a creative workflow in which the primary input is intent", where the designer directs and refines while the AI builds. These are vendor definitions, not a standard, and no body governs the term.

Google's own use is the most specific. In its post Introducing "vibe design" with Stitch (March 18, 2026, by Rustin Banks of Google Labs), the company describes Stitch as evolving into an AI-native software design canvas. The post says that when "vibe designing" in Stitch, you can explore many ideas quickly, leading to a higher quality outcome.

Where does the term come from?#

"Vibe design" borrows its structure from vibe coding. Andrej Karpathy introduced that phrase in a post on X dated February 2, 2025, which opens with the line that there is a new kind of coding he calls "vibe coding", where you fully give in to the vibes (as quoted by Wikipedia). The same article reports that Collins English Dictionary named "vibe coding" its 2025 Word of the Year.

The design variant is newer. Google's March 2026 post is the most prominent use of "vibe design" by a major vendor, but it is not settled who used the phrase first, so this page does not name an inventor.

How does a vibe-design session work?#

The steps below follow what Google's Stitch post describes. Other tools differ in detail.

1. Start from intent. Instead of a wireframe, you begin with a business objective, the feeling you want users to have, or examples that inspire you. Google's post frames this as the alternative to starting with a wireframe.
2. Work on a canvas with context. Stitch offers an infinite canvas where ideas can be added as images, text, or code and used as context.
3. Let an agent reason across the project. The post describes a design agent that can reason across the whole project's evolution, plus an Agent manager for pursuing several directions in parallel.
4. Talk to it. Under the heading "Vibe design with your voice", the post describes speaking to the canvas, receiving critiques, and having changes made live, such as trying different color palettes.
5. Link screens into a flow. Static screens can be connected into an interactive prototype and previewed.
6. Export. Designs can move on to developer tools, and the post mentions an MCP server, an SDK, and skills for connecting Stitch to other tools.

The loop is generate, react, refine. The human contribution is judgment about what is right for the product.

Which tools use the term?#

Only claims that the vendor's own page makes are listed here. As of November 2026:

IMG.LY's article also lists Figma's design agent, Lovart, Canva AI, and Adobe Firefly Boards as examples of the category. That is IMG.LY's classification; we have not checked whether those vendors use the term themselves, so we do not say they do.

Vibe design vs vibe coding vs traditional design#

The boundary between the last two columns is not fixed. Stitch's export to developer tools and its MCP server connect the design output to coding agents, which is the point where vibe design feeds vibe coding. How agents consume design context is covered in agentic design.

Why does a vibe need a design system?#

A prompt such as "a playful coffee shop ordering app with warm colors and rounded corners" describes an atmosphere. The model interprets it once. When you ask for the next screen, nothing guarantees it reads the same atmosphere the same way, so colors, radii, and spacing drift. This is the consistency problem that AI UI consistency covers in depth.

The fix is to convert the vibe into explicit rules and reuse them. Stitch's documentation does this directly. On its DESIGN.md overview page, the first of three ways to create the file is to let the agent generate it: you describe the vibe, and the agent translates your aesthetic intent into tokens and guidelines. Stitch then generates a design system covering colors, typography, spacing, and component styles, and summarizes it as a DESIGN.md. The other two paths are to derive it from branding (a URL or image) and to write it by hand.

The same page states the payoff: when a design agent reads your DESIGN.md, every screen it generates follows the same visual rules. Without it, each screen stands alone; with it, they look like they belong together. It also calls DESIGN.md a living artifact, not a static config file. Google's blog post makes the portability point: you can extract a design system from any URL, or use DESIGN.md to export or import design rules to or from other design and coding tools.

In practice this gives vibe design a three-step shape:

1. Describe the vibe. Prompt for the mood, audience, and references.
2. Let the agent write it down. The tool produces tokens and guidelines, saved as a DESIGN.md.
3. Reuse the file. Later screens, other projects, and coding agents read the same rules.

The format has two layers: machine-readable tokens in YAML frontmatter and prose rationale in Markdown. See what DESIGN.md is, the Stitch walkthrough, and how to write one. As of November 2026 the specification is alpha, and the latest @google/design.md package on npm is 0.4.0, so expect changes.

A generated file is a first draft of a system, not a finished one. Reading it, correcting values, and adding do's and don'ts is where human judgment re-enters; the dos and don'ts guide shows how. The viewer at /tool renders and lints an existing DESIGN.md in your browser. It does not generate files, and files are never uploaded or stored.

What is vibe design bad at?#

Vendors and our own reading of the mechanism point to the same limits.

• Consistency without a system. Covered above: unwritten decisions do not carry over from one screen to the next.
• Generic output without references. IMG.LY says vibe design works well when there is something to work from, and that outputs tend toward the generic when there is not. Its example is a brand identity built from nothing.
• Accessibility-critical UI. IMG.LY calls it less suited to accessibility-critical interfaces and says contrast and touch-target requirements need careful manual review. A DESIGN.md can include rules about contrast, but a generated file can contain values that fail them, which is why linting and manual checks still apply.
• Brand fidelity. A mood is not a brand. Exact colors, type, and logo usage come from deriving a system from a real URL or image, or from writing it by hand, not from adjectives. See brand guidelines.
• Handoff and production readiness. IMG.LY says vibe design compresses the path to a starting point but that production-ready results often still need substantial iteration. Engineering teams still need tokens, component behavior, and states, which a screen image does not carry. Design tokens are the usual bridge.
• Prompt dependence. Framer's definition notes that results depend on how clearly the prompt describes the visible goal, and that they are refined through follow-up edits.

---

Next step: see how the generated file works inside Stitch in Google Stitch and DESIGN.md, or compare the options in Claude Design vs Google Stitch.

md-design.io is independent and not affiliated with Google or any vendor named here.