How to Jux

Welcome to Jux - Your AI-native design engineer.

Jux sits on a canvas-based environment built on top of real code, not vectors. That means every button, layout, or token you place is already part of your system - structured, styled, and ready for action. Let's break down the homescreen's main areas: Homescreen Layout

The Jux interface is organized into three main panels, plus a top-level mode switcher.

Left Panel: Structure & System

This is where your system lives. It’s divided into 3 tabs:

• Layers:

  View and reorder your layout’s structure. Each object placed on the canvas appears here, nested exactly as it will be interpreted in code. Think of this as your live component tree.

• Components:

  Access your Local and Library components. Drag them into the canvas to create instances. Source components live here and define system behavior across your product.

• Assets:

  Upload and manage SVGs such as icons and illustrations. These can be dropped directly into the canvas or nested inside components.

Top: Design / Code Toggle

Switch between Design and Code mode to view your UI from either perspective.

• In Design, you see and manipulate the visual structure.

• In Code, you can preview inspect the library - download the real implementation — and sync changes back.

Center: The Canvas

This is your live design environment. Unlike traditional tools, this canvas is code-aware - every object is structured, typed, and token-connected.

You can:

• Generate elements (Buttons, Divs, Containers, etc.)

• Nest components and build variant matrices

• Preview real behavior with live states in preview.

At the bottom, use the zoom + selection tools to navigate your canvas freely.

Right Panel: Decision-Making Engine

Here’s where Jux interacts with you. It includes:

• Build / Design / Token Set Tabs

  • Build: Your convesational interface. Discuss, design and code with Jux.

  • Design: Style layout, color, spacing, and typography

  • Token Set: View applied tokens and semantic connections

• Build:

• Suggestions Panel:

  AI-powered contextual nudges based on your selection.

• Scope Picker:

  Set whether your input is a design prompt, a code task, or a general strategy.

🎛️ Token Management (Separate Screen)

Tokens are the foundation of your design system. Access the Token Management screen to:

• Create and alias design tokens

• Build semantic collections (e.g., “Primary / On Dark”)

• Apply and sync tokens across all component styles

Changes here affect the entire system instantly.