Features

From planning to implementation to security — five core components connected in one flow. Every feature works fully offline.

01AI UI Designer

Airgap Designer

From planning to UI drafts

Describe a screen in natural language and AI instantly generates wireframes or polished UI. Three design modes, a six-stage offline rendering pipeline, and Bridge-synced design tokens let planners and designers prototype screens quickly — no internet required.

3 Design Modes

Wireframe Mode — built-in component-based, optimized for rapid structural layout
Hi-Fi Local Mode — generates polished UI with Tailwind CSS + icons
Hi-Fi Cloud Mode — access extended UI kits + image libraries when online

Conversational UI Generation

Generate wireframes and UI drafts instantly from natural-language prompts
Iterate on changes like "move the button" or "adjust the layout" in conversation
Maintains the last 10 conversation turns for consistent revisions
Korean-first interface by default

Offline Canvas Rendering

6-stage pipeline: CSS injection → framework → CDN-to-local → fonts → external ref removal → image fallback
Locally bundled CSS framework, icons, and Pretendard font
Live preview in a sandboxed iframe — see the UI as it's being generated

Design Tokens & Figma Integration

W3C DTCG design tokens set in Bridge are automatically applied to generated output
KRDS (Korean Government Standard Design System) preset support
Export generated results to Figma for designer hand-off

02Design Token Pipeline

Airgap Bridge

Connecting design to code

A three-tab design-to-code pipeline (Prototype, Production, Style Guide). From live Figma connectivity to deterministic code conversion at ~95% fidelity and W3C DTCG standard design-token management — Bridge eliminates the gap between design and development.

Prototype Tab — Live Figma Connection

Real-time node property lookup via Figma MCP protocol
Quick Actions: component scaffold → pass to Assistant, CSS extraction, asset download
Offline fallback: drag-and-drop .fig files → parse with built-in offline parser

Production Tab — Design-to-Code Conversion

Deterministic conversion engine: ~95% fidelity
Auto-layout → Flexbox 1:1 mapping for pixel-accurate layouts
AI fallback engine: offline parser + Qwen3 conversion, ~70-80% fidelity (fully offline)
Instant React / HTML / CSS production code generation

Style Guide Tab — Design Token Management

Import W3C DTCG standard tokens (JSON or Figma Variables API)
W3C standard token conversion engine
Output formats: Tailwind v4 @theme · CSS Custom Properties · SCSS · JS modules
Built-in KRDS presets: standard + extended

Cross-Extension Integration

Auto-push token context to Designer → design tokens reflected in UI generation
Pass component scaffolds to Assistant → inject business logic
Figma Personal Access Token stored encrypted in VS Code SecretStorage

03Offline Component Library

Airgap UI Library

A component library that maintains your organization's UI standards

Browse, preview, and insert 85 standard components organized into 8 categories — all in one place. Adjust colors, fonts, and dark mode with the theme customizer and see changes reflected instantly across all previews. Works without AI (no LLM needed), with the entire asset bundle weighing only ~8 MB.

85 Components · 8 Categories

Layout (12): Container, Grid, Section, Flex, Width, Height, etc.
Navigation (10): Navbar, Tab, Breadcrumb, Pagination, Dropdown, etc.
Forms & Input (13): Input, Select, Textarea, Button, Checkbox, etc.
Content (10): Card, Table, List, Badge, Description List, etc.
Overlay & Popup (7): Modal, Offcanvas, Tooltip, Notification, etc.
Feedback (7): Spinner, Progress, Meter, Countdown, etc.
Media & Motion (11): Slideshow, Lightbox, Parallax, Animation, etc.
Styling (15): Utility, Visibility, Position, Transition, etc.

Preview & Code Insertion

Sandboxed iframe rendering — accurate previews with no style conflicts
One-click code copy or direct insertion at the cursor position
Real-time search — quickly find components by name
Full source code viewing support

Theme Customizer

Real-time adjustment of 15 color properties
Border radius, shadow, and font-size settings
Dark / light mode toggle
Changes reflected instantly across all component previews

100% Offline · No LLM Required

Pure component browser — works without any AI model
Locally bundled Pretendard Korean font
~8 MB lightweight assets: stylesheets + scripts + fonts + media
No additional GPU / VRAM needed

04AI Coding Assistant

Airgap Assistant

An AI work partner that understands context

From multi-file refactoring to file creation, editing, and terminal commands — AI executes real development tasks. Built-in inline code autocomplete provides real-time suggestions across 19 languages with zero additional VRAM.

AI Coding Support

Create/edit files and run terminal commands directly — performs actual development work
Preview changes with diff view before applying (auto-approve enabled by default)
Multi-file refactoring, error debugging, and code review
Auto-compact mode — maintains context even in long conversations

Korean Slash Commands

/newtask — start a new task, reset context
/smol — concise mode, shorter responses
/newrule — add a project rule
/deep-planning — in-depth planning session
/explain-changes — detailed explanation of changes

Inline Code Autocomplete

19 languages: JS, TS, Python, Java, C/C++, C#, Go, Rust, HTML, CSS, SQL, and more
300 ms debounce + 3 s timeout for responsive suggestions
LRU cache (50 entries) for instant completion of recurring patterns
Zero additional VRAM — shares the existing Qwen3:8b instance
Real-time status bar indicator: ready · processing · offline

Flexible Configuration

Auto-approve enabled by default — safety guaranteed by air-gapped network isolation
Org-specific custom instructions: place policy files in .airgap/prompts/
Multi-provider support: Ollama (default) · OpenAI · Anthropic · Gemini
Korean-first interface — both UI and AI responses default to Korean

05Unified Security Platform

Airgap Security Shield

Five layers of protection — even without internet

Audit logs, Korean PII DLP (Data Guard), KISA vulnerability analysis (Code Scanner), supply-chain security (Supply Chain), and AI output verification (Output Validator) form a five-layer protection system. Zero npm dependencies, sub-100 ms DLP processing, and everything runs fully offline.

Shield-1: Audit Core — Audit Logs

All AI activity automatically recorded in JSONL format (daily files)
SHA-256 hash-based log tamper detection
Model and extension integrity verification
Only prompt hashes logged — full prompts are never stored, preserving privacy

Shield-2: Data Guard — Korean PII DLP

10 Korean PII patterns: resident ID, phone, bank account, card number, email, business registration number, passport, internal IP, driver's license, and more
Bidirectional auto-detection and masking on AI input/output
Code-context awareness — reduces false positives when code ratio is high
Sub-100 ms processing guaranteed

Shield-3: Code Scanner — KISA Vulnerability Analysis

Static analysis covering 47 KISA security weakness categories (phased expansion)
Dual-scan with static analysis tools
Results integrated into the VS Code Problems panel
AI Quick Fix — auto-suggests remediation code when vulnerabilities are found

Shield-4/5: Supply Chain & Output Validator

Offline CVE database (~50 MB) for dependency vulnerability scanning
Automatic SBOM generation in standard formats
Pre-blocks dangerous patterns in AI-generated terminal commands
Malicious script pattern recognition and warnings

Bridge Competitive Comparison

Key feature comparison with design-to-code tools

Feature	Locofy.ai	Anima	Builder.io	Airgap Bridge
Figma integration	O	O	O	O
Deterministic conversion (~95%)	O	O	X	O
AI fallback conversion	O	X	O	O
Offline .fig parsing	X	X	X	O
W3C DTCG design tokens	X	X	X	O
KRDS presets	X	X	X	O
Local AI code generation	X	X	X	O
Air-gapped operation	X	X	X	O

Cross-Extension Architecture

All LLM-dependent extensions share a single Ollama instance. The default model is Qwen3 8B, replaceable with GPT-OSS 20B or others. Data flows automatically between extensions to ensure consistent results.

Extension	LLM Usage	Context	Integration Direction
Designer	Ollama LLM	16K	Bridge → receives tokens · Figma → delivers results
Bridge	Ollama LLM	16K	Designer → pushes tokens · Assistant → passes scaffolds
Library	Not required	—	Designer → provides UI components
Assistant	Ollama LLM	16K	Bridge → receives scaffolds · full code editing
Autocomplete	Ollama LLM	4K	Runs independently · zero additional VRAM
Security Shield	Not required	—	All extensions → DLP + audit logs + SAST

Design Token Flow

Bridge buildTokens() → W3C DTCG JSON → CSS variables → vscode.commands 'airgapdesigner.updateTokenContext' → Injected into Designer system prompt → generates UI with tokens applied

Auxiliary Features

Airgap License

A fully offline license verification system based on ED25519 signatures. Follows a 1-key-per-device principle with hardware fingerprinting and clock-tampering prevention.

ED25519 signature verification — offline auth with public key only
Hardware fingerprint — device binding
Clock Guard — clock tampering prevention
Pre-expiry warnings at D-30 and D-7
Up to 2 device transfers per year
Bundle size ~13 KB

System Requirements

Minimum specs for running local AI models. Library, Bridge (deterministic conversion), and Security Shield work even without a GPU.

OS: Windows 10/11 64-bit
GPU: Vulkan-compatible GPU recommended (6 GB+ VRAM; CPU mode works without one)
RAM: 16 GB minimum (32 GB recommended)
Storage: 10 GB minimum (20 GB SSD recommended)
Performance: 30-45 tokens/s with GPU, 8-15 tokens/s on CPU

Get Started Now

Experience every feature of Airgap Studio for yourself.

Download Contact Us