X-IPE Toolbar v2.0 — CR-UIUX Reference Mockup

# Design tools that
inspire creativity

Powerful workspace for designers and developers to create beautiful interfaces together.

🎨
🧩

### Component Library

Hundreds of pre-built components ready to use in your projects.

⚡

### Real-time Sync

Changes appear instantly across all team members' screens.

🔒

### Enterprise Security

SOC 2 certified with end-to-end encryption for all your data.

X-IPE Reference
1
Pick Colors 3 picked

Click any pixel on the page. A magnifier follows your cursor for precision.

#6366f1
.sim-hero-cta background
PRIMARY
#1a1a2e
.sim-hero h1 color
SECONDARY
#a5b4fc
.sim-hero-visual gradient
ACCENT
💡 Tip: Click on images, videos, or gradients — the offscreen canvas samples any visual content.
2
Annotate Roles assign

Tag each color with a role. Choose a preset or type a custom label.

Roles help the theme creator map colors to semantic tokens (background, surface, text, etc.)
3
Create Theme ready

Send picked colors to agent. The brand-theme-creator skill generates a full design system.

1
Select Components 2 selected

Click elements on the page. Auto-snaps to the nearest semantic container. Drag handles to resize.

section body > .sim-page > .sim-hero
1200 × 320px x:0 y:64
📸 screenshot captured
nav body > .sim-page > .sim-nav
1200 × 56px x:0 y:0
📸 screenshot captured
2
Add Instructions notes

Add context for each component. The agent uses these to understand intent.

section .sim-hero
Hero section with gradient visual. Parallax effect on scroll.
nav .sim-nav
Sticky navigation bar with logo and horizontal links.
3
Analyze agent

Agent assesses captured data across 5 dimensions (layout, typography, color, spacing, effects). May request deeper capture if needed.

4
Generate Mockup create

Saves metadata, then generates a 1:1 mockup. Validates against original screenshot (max 3 iterations).

#6366f1
<section> .sim-hero
View: