# MIDL Site > A MIDL-powered site. Every page is dual-use — human HTML and a machine-readable MIDL document. > MIDL is a personalization-first, agent-native web format: a page is JSON "frames" rendered by a > "pack". Author the document; the pack decides the look. Build with the public @wisepunk/* packages. ## Documentation - [Docs index](https://midl.site/docs) · [everything in one file](https://midl.site/llms-full.txt) - [Agent Quickstart](https://midl.site/docs/quickstart) — raw: https://midl.site/docs/quickstart.md - [Agent Reference](https://midl.site/docs/reference) — raw: https://midl.site/docs/reference.md - [Personalization & Optimization](https://midl.site/docs/personalization) — raw: https://midl.site/docs/personalization.md - [Native i18n](https://midl.site/docs/localization) — raw: https://midl.site/docs/localization.md - [Figma → MIDL](https://midl.site/docs/figma-import) — raw: https://midl.site/docs/figma-import.md - [Self-Host Quickstart](https://midl.site/docs/self-host) — raw: https://midl.site/docs/self-host.md - [Write API Manual](https://midl.site/docs/write-api) — raw: https://midl.site/docs/write-api.md - [Publishing](https://midl.site/docs/publishing) — raw: https://midl.site/docs/publishing.md - Install: `npm install @wisepunk/renderer-html @wisepunk/core` ## Install the MIDL skill (Claude Code) ``` mkdir -p ~/.claude/skills/midl && curl -fsSL https://midl.site/skill/SKILL.md -o ~/.claude/skills/midl/SKILL.md ``` ## Machine-readable surfaces (this deployment) - [Component vocabulary](https://midl.site/api/agents/vocabulary.json) — every ui:* type, fields, options, per-pack tag, example - [Examples](https://midl.site/api/agents/examples.json) — canonical MIDL documents to pattern-match - [OpenAPI 3.1](https://midl.site/api/agents/openapi.json) — the public API - [Agent card](https://midl.site/.well-known/agent.json) — site identity, tools, formats - Validate a document: `POST https://midl.site/api/validate` ## Import a design (Figma → MIDL) > Turn a Figma frame into a re-themeable MIDL site: structure → semantic `ui:*` frames, the > design's tokens → a generated contrast-safe theme (the look comes from the pack, never inline > styling). Two paths: a BYO-agent skill that drives the Figma MCP server, or the Studio importer > via the Figma REST API. Full guide: [Figma → MIDL](https://midl.site/docs/figma-import). ## How to author (the loop) 1. Write a MIDL document: `{ midl: "0.1", ns: { ui: "https://midl.ai/ui#" }, frames: [...] }`. 2. Validate it (POST /api/validate, or `renderMidl(doc).validation`). The feedback names every fix. 3. Render with @wisepunk/renderer-html — or fetch a stored page with @wisepunk/sdk and render that. ## Native i18n (multilingual pages) > Any human-text prop (Hero `title`, Text/Button/Heading `text`, …) may be a plain string OR a > locale map `{ "en": "Ship faster", "de": "Schneller liefern" }`. Declare `defaultLocale` and > `locales` at the document root. The renderer resolves each value to the visitor's language > (Accept-Language or `?lang=`), emits `` + `hreflang` alternates, and the machine > surfaces (JSON-LD `inLanguage`, Facts `language`) follow. Plain strings are unchanged. - Localizable props + resolution order: see [the vocabulary](https://midl.site/api/agents/vocabulary.json) `localization` block.