AionixOS DesignSpec

About this plugin

Transform Figma designs into production-ready code with AI-optimized specs, visual measurements, and one-click asset export.

AionixOS DesignSpec extracts design specifications, generates framework-specific code, and bundles everything your AI coding tool needs to replicate your designs with pixel-perfect accuracy.

Features

Export Wizard

- 3-step guided export: configure settings, preview assets, select what to include

- Multi-scale export (1x, 2x, 3x) with standard @2x/@3x naming

- Embedded images exported as raw rectangular source files — border-radius and masking handled via CSS

- Smart content-based deduplication — identical images and SVG icons exported once, not per-instance

- SVG icons auto-detected and exported as clean, production-ready files

- Full ZIP bundle with screenshots, images, icons, specs, and AI instructions

AI Code Generation

- One-click "Send to AI" generates production-ready code specs for Claude, GPT, or Cursor

- Multi-framework support: Tailwind CSS, Bootstrap 5, Raw CSS, CSS Variables

- AI-INSTRUCTIONS.md included in every bundle — tells AI tools exactly how to use your assets

- Image optimization guidance with Sharp/WebP conversion instructions included in AI prompt

- AI-optimized output format designed for accurate code replication

Visual Measurements

- Precise dimensions, spacing, and layout analysis directly on canvas

- Configurable depth control (0–5 levels) for nested components

- Gap, padding, and alignment detection with annotation overlays

- Clean and annotated screenshot exports for developer handoff

Design Properties

- Typography extraction with Next.js font configuration

- Color values in multiple formats (HEX, RGB, HSL)

- Border radius, stroke, and effect properties

- Hierarchical component structure with semantic naming

Asset Export

- Smart SVG group detection — auto-identifies icon groups

- Image and logo extraction with thumbnail preview before export

- Choose exactly which assets to include — no more exporting everything

- Copy SVG code or download as files

Dev Mode Compatible

- Works directly from Figma's Dev Mode inspect panel

- Full access to specs, exports, and AI output with view-only permissions

- Measure tool available when edit access is granted

Remembers Your Preferences

- Export settings, framework selection, scale, and quality saved automatically

- Pick up right where you left off every time you open the plugin

---Quick Start

1. Select any frame or component in Figma

2. Open AionixOS DesignSpec

3. Choose your CSS framework

4. Click "Send to AI" or export a full spec bundle