# 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**

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2FTjk3jjjmSt1knZjvJgYN%2FScreenshot%202025-06-30%20at%209.19.37.png?alt=media&#x26;token=427c8b95-2102-4904-a54a-2e3c375f59ef" alt="Jux Homescreen"><figcaption><p>The Jux Homescreen</p></figcaption></figure>

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

***

#### Left Panel: Structure & System

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2FrqOJHs0TGfIyhz8DC5Nq%2FScreenshot%202025-06-30%20at%209.25.49.png?alt=media&#x26;token=3c42644c-71f8-46d4-9a7f-eaf45f48b3d8" alt="Jux Left Panel - Layers, Components, Assets, Design x Code Toggle"><figcaption><p>The Left Panel, exposing Assets</p></figcaption></figure>

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.

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2FgJQ6T4CWH9adYnSEjna3%2FScreenshot%202025-06-30%20at%209.28.24.png?alt=media&#x26;token=a0371496-d6fe-427e-822c-ef43e0bbba03" alt="Jux Left Panel, exposing Layers"><figcaption><p>The Left Panel, exposing Layers</p></figcaption></figure>

***

#### Center: The Canvas

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2Fiqa5g7FGf2eB5DHChwws%2FScreenshot%202025-06-30%20at%209.36.03.png?alt=media&#x26;token=16dc4679-979f-4a68-a36b-f0c9d6270b97" alt=""><figcaption><p>The Jux Canvas (Canjux!)</p></figcaption></figure>

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.

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2FnYOChDiaYWkgRfx5deA9%2FScreenshot%202025-06-30%20at%209.49.48.png?alt=media&#x26;token=6a43e8c1-816c-454c-85f1-d8651bb56b02" alt="Bottom nav - zoom and selection tool"><figcaption><p>Bottom nav - zoom and selection tool</p></figcaption></figure>

***

#### Right Panel: Decision-Making Engine

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2F2DZ6qStpcmVB4sxPbZ4k%2FScreenshot%202025-06-30%20at%209.47.17.png?alt=media&#x26;token=0b48f21a-ce7f-4df5-9529-cd3051600f89" alt="The Jux Left Panel - Decision-Making Engine"><figcaption><p>The Left Panel - Build, Design, Tokenize</p></figcaption></figure>

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.

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2FX6VU6AyE1EGsjfFDN3QB%2FScreenshot%202025-06-23%20at%2015.32.08.png?alt=media&#x26;token=7cb0e575-2c0f-4d81-9505-427068c1197f" alt="Jux&#x27;s design engineer states - discuss, design or code"><figcaption><p>Disucss, design or code</p></figcaption></figure>

***

### 🎛️ Token Management (Separate Screen)

<figure><img src="https://1342639865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FY9B6hEefZbbZqKxTpuvn%2Fuploads%2Fa2JqnSWV0x3W3B5AZRXF%2FFrame%201321316342.png?alt=media&#x26;token=58c5c17c-dd8b-4ac7-a6b8-2261af812f49" alt="The Jux Token Management Space"><figcaption><p>Token Management</p></figcaption></figure>

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.