Document Object Model — the programming interface representing HTML documents as a tree structure that JavaScript can manipulate. Understanding the DOM helps debug layout issues and write effective custom code.

Prompt-to-Code describes workflows where AI converts prompts and design intent into code structure. It is commonly paired with Prompt Template systems and custom Code Component output.

Text-to-Image Generation creates visuals directly from prompt instructions. Most modern systems rely on a Diffusion Model and can be steered using a Reference Image.

InstructPix2Pix applies natural-language editing commands to existing images while retaining layout context. It extends ideas from Prompt-to-Prompt Editing within practical Text-to-Image Generation pipelines.

A development approach coined by Andrej Karpathy in which developers describe what they want in plain language—or even just a vibe—and rely on AI to write, iterate, and debug the code. Rather than authoring every line, the developer acts as director and reviewer, accepting or rejecting AI suggestions. Vibe coding lowers the barrier to building software and accelerates prototyping, but it requires careful review because AI-generated code can introduce subtle bugs or security issues.

Real-time or on-demand suggestions provided by an AI model as a developer types, ranging from single-word completions to entire function bodies. Modern tools like GitHub Copilot and Cursor use large language models to infer intent from surrounding code and comments. Code completion reduces keystrokes, surfaces patterns, and helps developers stay in flow—while requiring judgment about whether suggestions are correct and appropriate.

The ability of AI models to translate intent—expressed as prose, pseudocode, or examples—into executable source code. Code generation underpins vibe coding, autocomplete tools, and agentic workflows. Generated code should always be reviewed for correctness, security, and maintainability, since models can produce plausible-looking but incorrect implementations.

What is vibe design?

Vibe design is the practice of directing the look, feel, and layout of a user interface through natural language prompts and AI-assisted tools instead of manually adjusting every canvas detail.

Why it matters

It helps teams move from intent to interface faster. Instead of starting with blank frames, spacing rules, and individual style decisions, creators can describe the desired outcome, then refine the generated result through iteration.

Example

A designer might ask for a calm editorial landing page, a dense SaaS comparison section, or a playful onboarding screen. The prompt sets the direction, while follow-up edits tune hierarchy, copy, layout, and interaction details.

How it works in Framer

In Framer, vibe design works best when the prompt describes the visible goal clearly: audience, structure, density, tone, and important content. The AI can then create or revise editable canvas elements while keeping the result aligned with the site’s design system.

Conversational editing is the process of changing a website through natural-language feedback instead of direct manual edits alone.

Conversational editing lets a user describe what should change and have an agent update the project. It works best when each request names the target clearly and the agent keeps the result editable for follow-up refinements.