# vDesign

> vDesign is a design tool built for working with AI models. Its documents are text: a `.vd` file is a short, line-oriented description of a design whose geometry is expressions over tokens and other nodes, written so that a model can author it, edit it a line at a time, and read it back.

Every link below is the Markdown source of a page at https://getv.design/docs/. The DSL pages are the reference files of the vDesign skill, exactly what a model is taught. To teach a model the format in one file, use the system prompt: the skill flattened, with every reference page and example in it.

## DSL

- [The .vd format](https://getv.design/docs/format.md): A .vd file: the text head that is the design, and the payload that carries its images.
- [Expressions](https://getv.design/docs/dsl/grammar.md): The expression language: edges, percentages, references, tokens, paint, fonts and assets.
- [Nodes](https://getv.design/docs/dsl/nodes.md): Every node type in a vDesign document and every property it accepts.
- [Properties](https://getv.design/docs/dsl/properties.md): Every property each node type takes and the values it holds, generated from the format’s own tables.
- [Edits](https://getv.design/docs/dsl/edits.md): The edit dialect: the statements that change a document without rewriting it.
- [Motion](https://getv.design/docs/dsl/motion.md): Motion for Play: page transitions, reveals and buttons.
- [Examples](https://getv.design/docs/dsl/examples.md): Complete vDesign documents that parse, resolve and draw.

## Agents and MCP

- [Teaching an agent](https://getv.design/docs/agents.md): Give any model the vDesign skill, as a skill folder or a system prompt.
- [MCP](https://getv.design/docs/mcp.md): Connect an assistant to vDesign over MCP, on your machine or remotely.
- [System prompt](https://getv.design/docs/system-prompt.md): The whole vDesign skill as one system prompt, for a model that cannot load a skill folder.
- [llms-full.txt](https://getv.design/docs/llms-full.txt): What an agent needs in one file: the system prompt, the MCP tool reference, then the embed API reference.

## Embed

- [Embedding](https://getv.design/docs/embed.md): Show, present and edit vDesign documents in your own web page with the embed package.
- [API reference](https://getv.design/docs/embed/api.md): Every function, option, event and type the vDesign embed exports, generated from its declarations.

## Integrations

- [Designs in Markdown](https://getv.design/docs/markdown.md): Draw ```vd fences in a docs site, a README, Obsidian or VS Code, with the embed’s Markdown plugins and the vd-render command.
- [VS Code](https://getv.design/docs/vscode.md): Preview vDesign designs in VS Code, Cursor and github.dev, with every page, problems as you type, and fences in the Markdown preview.
- [.vd.svg](https://getv.design/docs/vd-svg.md): An SVG export that carries its design: a picture everywhere, and the design in vDesign and its viewers.

## Optional

- [Introduction](https://getv.design/docs/index.md): What vDesign documents are, and where to start reading.
- [Licence](https://getv.design/docs/licence.md): The .vd format and these docs are open under CC BY 4.0.