Airgap Designer | Airgap Studio

Overview

AIRGAP Designer is an extension that designs UI from natural language. Describe a screen in text and it instantly generates wireframes or high-fidelity UI. It uses a local AI engine, so it works without an internet connection.

Design Modes

Designer automatically selects the optimal design mode based on your request and environment.

Mode	Description	LLM Requirement
Wireframe	Fast structural design using built-in components. Optimized for local LLM	Ollama (local)
Hi-Fi Local	High-fidelity UI generation with Tailwind CSS + icons	Ollama (local)
Hi-Fi Cloud	High-quality UI leveraging extended resources (network required)	External provider

The wireframe/Hi-Fi mode is automatically selected based on provider settings. When using local Ollama, wireframe mode is the default; when an external provider is connected, it switches to Hi-Fi mode.

How to Use

Opening

Use the Ctrl+Shift+D shortcut or click the Designer icon in the Activity Bar.

Generating UI via Chat

Describe the UI you want in natural language in the chat input.

"Create a login page with email and password input fields and a login button"
"Create a dashboard layout with navigation in the left sidebar and card-style stats on the right"

The AI generates the UI immediately, and you can view the result in the canvas view.

Iterative Editing

Request additional modifications to the generated UI through conversation. The last 10 conversation turns are retained for consistent editing.

"Change the button color to blue"
"Make the sidebar narrower"
"Change the card layout from 3 columns to 2"

Canvas Rendering

Generated UI is rendered in real time within an isolated iframe. A 6-stage offline pipeline delivers a complete preview without any external dependencies.

Rendering pipeline:

CSS Injection — Apply framework styles
CDN → Local Conversion — Replace external CDN references with local assets
Font Localization — Apply bundled fonts such as Pretendard
External Reference Removal — Eliminate network dependencies
Image Fallback — Replace external images with placeholders
Final Rendering — Display in an isolated iframe

You can zoom and pan on the canvas to inspect fine details.

Moodboard

Place reference images in the .airgapdesign/moodboard/ directory and the AI will use them as design references. Add screenshots or reference images that reflect your desired design direction.

Design Token Integration

W3C DTCG design tokens configured in AIRGAP Bridge are automatically reflected in Designer's output. When tokens are updated in Bridge, they are auto-injected into Designer's system prompt, maintaining consistent design.

Security Integration

You can run AIRGAP Security Shield security scans on code generated by Designer. Search for Security Shield commands in the Command Palette (Ctrl+Shift+P).

Settings

Open settings with Ctrl+, and search for airgapDesigner.

Setting Key	Description	Default
`airgapDesigner.promptMode`	Design mode (auto/wireframe/hifi)	`auto`
`airgapDesigner.ollamaUrl`	Ollama server URL	`http://localhost:11434`
`airgapDesigner.ollamaModel`	Model to use	`qwen3:8b`

Airgap Bridge - Design token pipeline
Airgap UI Library - Offline component library
Provider Settings - AI model configuration