ffd3140fc8
- Document main interface layout and components - Add visual representations for all major features: - Visual Scripting node editor - Asset Library with grid/list views - 3D Live Preview with console - AI Code Generator with templates - Real-time Collaboration panel - Include color scheme documentation - Show responsive design breakpoints - Provide ASCII art mockups for each feature
358 lines
31 KiB
Markdown
358 lines
31 KiB
Markdown
# AeThex Studio - Visual Feature Guide
|
||
|
||
> 🎨 A comprehensive visual guide to AeThex Studio's interface and features
|
||
|
||
---
|
||
|
||
## 📐 Main Interface Layout
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ AeThex Studio [Platform ▼] [Toolbar Buttons]│
|
||
├────┬────────────────────────────────────────────────────────┬───────────────────┤
|
||
│ │ [script.lua] [main.lua] [+] │ │
|
||
│ A │ ─────────────────────────────────────────────────────── │ AI Chat │
|
||
│ C │ │ │
|
||
│ T │ 1 -- Welcome to AeThex Studio! │ ┌─────────────┐ │
|
||
│ I │ 2 -- Write your code here │ │ How can I │ │
|
||
│ V │ 3 │ │ help you? │ │
|
||
│ I │ 4 local Players = game:GetService("Players") │ └─────────────┘ │
|
||
│ T │ 5 │ │
|
||
│ Y │ 6 Players.PlayerAdded:Connect(function(player) │ [Your message] │
|
||
│ │ 7 print(player.Name .. " joined!") │ │
|
||
│ B │ 8 end) │ ───────────── │
|
||
│ A │ 9 │ Claude: I can │
|
||
│ R │ │ help you with │
|
||
│ │ Monaco Code Editor │ Roblox code... │
|
||
│ │ │ │
|
||
├────┼─────────────────────────────────────────────────────────┼───────────────────┤
|
||
│ │ Console / Terminal │ Education │
|
||
│ │ > run │ Panel │
|
||
│ │ ✓ Script executed successfully │ │
|
||
│ │ > _ │ [Tutorials] │
|
||
└────┴─────────────────────────────────────────────────────────┴───────────────────┘
|
||
```
|
||
|
||
**Layout Components:**
|
||
- **Activity Bar** (left): Quick access icons for Files, AI, Learn
|
||
- **File Tree**: Collapsible folder structure with drag-drop
|
||
- **Editor Tabs**: Multiple open files with close buttons
|
||
- **Code Editor**: Monaco editor with syntax highlighting
|
||
- **AI Chat**: Context-aware coding assistant
|
||
- **Console**: Terminal with CLI commands
|
||
- **Education Panel**: Tutorials and documentation
|
||
|
||
---
|
||
|
||
## 🔧 Toolbar Features
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ AeThex Studio │ [Roblox ▼] │ Translate │ Templates │ Visual │ Assets │ 3D │ AI │
|
||
│ │ │ │ │ Script │ │ │ │
|
||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||
│ │ │ │ │ │ │
|
||
│ │ │ │ │ │ │
|
||
▼ ▼ ▼ ▼ ▼ ▼ ▼
|
||
Platform Cross-Platform Code Node-Based Model 3D AI
|
||
Selector Translation Library Editor Library View Gen
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Visual Scripting Editor
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ Visual Scripting [Generate Code] │
|
||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||
│ ┌─────────┐ │
|
||
│ │ EVENTS │ ┌──────────────────┐ │
|
||
│ ├─────────┤ │ 🎮 Player Joined │ │
|
||
│ │ Player │ │ ─────────────── │ ┌──────────────────┐ │
|
||
│ │ Joined │────▶│ player ●────────┼─────────▶│ 📝 Print │ │
|
||
│ │ │ └──────────────────┘ │ ─────────────── │ │
|
||
│ ├─────────┤ │ message: ●──────┤ │
|
||
│ │ On │ │ "Player joined!"│ │
|
||
│ │ Touch │ ┌──────────────────┐ └──────────────────┘ │
|
||
│ │ │ │ ⏱️ Wait │ │ │
|
||
│ ├─────────┤ │ ─────────────── │ ▼ │
|
||
│ │ Key │ │ seconds: [2] │ ┌──────────────────┐ │
|
||
│ │ Press │ │ ●───────────────┼─────────▶│ 💫 Tween │ │
|
||
│ └─────────┘ └──────────────────┘ │ ─────────────── │ │
|
||
│ │ target: ● │ │
|
||
│ ┌─────────┐ │ property: Size │ │
|
||
│ │ LOGIC │ │ value: [10,10] │ │
|
||
│ ├─────────┤ └──────────────────┘ │
|
||
│ │ Branch │ │
|
||
│ │ Loop │ [Mini Map] ┌───┐ │
|
||
│ │ Compare │ │ ▪ │ │
|
||
│ └─────────┘ └───┘ │
|
||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||
│ Palette │ Events │ Logic │ Actions │ Data │ References │ [+ Add] │
|
||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Visual Scripting Features:**
|
||
- Drag-and-drop node placement
|
||
- 30+ node types across 5 categories
|
||
- Connection wires with data flow
|
||
- Mini-map for navigation
|
||
- Generates Lua/Verse/TypeScript code
|
||
|
||
---
|
||
|
||
## 📦 Asset Library
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ Asset Library [Grid ▣] [List ☰] [×] │
|
||
├──────────────────┬──────────────────────────────────────────────────────────────┤
|
||
│ Categories │ 🔍 Search assets... [Filter ▼] [Sort ▼] │
|
||
│ ─────────────── │ ──────────────────────────────────────────────────────────── │
|
||
│ ▼ All Assets │ │
|
||
│ 📁 Models (12) │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ 🖼️ Textures(8) │ │ 🏠 │ │ ⚔️ │ │ 🌳 │ │ 🚗 │ │
|
||
│ 🔊 Audio (5) │ │ │ │ │ │ │ │ │ │
|
||
│ 📜 Scripts (3) │ │ House │ │ Sword │ │ Tree │ │ Car │ │
|
||
│ │ │ .glb │ │ .fbx │ │ .glb │ │ .obj │ │
|
||
│ ▼ Folders │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
|
||
│ 📂 Characters │ │
|
||
│ 📂 Environment │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ 📂 Props │ │ 🧱 │ │ 🔊 │ │ 🎵 │ │ 📄 │ │
|
||
│ │ │ │ │ │ │ │ │ │ │
|
||
│ ─────────────────│ │ Brick │ │ Ambient │ │ Music │ │ Config │ │
|
||
│ ★ Favorites (3) │ │ .png │ │ .mp3 │ │ .ogg │ │ .json │ │
|
||
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
|
||
├──────────────────┴──────────────────────────────────────────────────────────────┤
|
||
│ ╔═══════════════════════════════════════╗ │
|
||
│ ║ Drop files here to upload ║ │
|
||
│ ║ 📁 or click to browse ║ │
|
||
│ ╚═══════════════════════════════════════╝ │
|
||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Asset Library Features:**
|
||
- Grid/List view toggle
|
||
- Drag-and-drop upload
|
||
- Category filtering
|
||
- Search functionality
|
||
- Favorites system
|
||
- Thumbnail previews
|
||
|
||
---
|
||
|
||
## 🎮 3D Live Preview
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ Live Preview [Beta] [▶ Run] [⏸ Pause] [⏹ Stop] [↺] │
|
||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────────────┐ │
|
||
│ │ ☀️ │ │
|
||
│ │ ╱╲ │ │
|
||
│ │ ▓▓▓▓▓ ╱ ╲ ╭───╮ │ │
|
||
│ │ ▓▓▓▓▓ ╱ ╲ │ 🧍│ │ │
|
||
│ │ ▓▓▓▓▓ ──────── ╰───╯ │ │
|
||
│ │ │ │
|
||
│ │ ═══════════════════════════════════════════════════════════ │ [⚙️] │
|
||
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
|
||
│ │ ░░░░░░░░░░░░░░░░░░ BASEPLATE ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
|
||
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
|
||
│ │ ┌───┐ │ │
|
||
│ │ ● Running 3 objects │▪▪▪│ │ │
|
||
│ └─────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||
│ Console [🔍] [Filter ▼] [🗑️]│
|
||
│ ─────────────────────────────────────────────────────────────────────────────── │
|
||
│ 12:34:56.123 ℹ️ Starting script execution... │
|
||
│ 12:34:56.234 📝 Player1 joined the game! │
|
||
│ 12:34:57.456 ⚠️ Warning: Part not anchored │
|
||
│ 12:34:58.789 ℹ️ Script executed successfully │
|
||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**3D Preview Features:**
|
||
- Real-time Lua script execution
|
||
- Three.js viewport with shadows
|
||
- Orbit camera controls
|
||
- Grid and axes helpers
|
||
- Console output with filtering
|
||
- Run/Pause/Stop controls
|
||
|
||
---
|
||
|
||
## 🤖 AI Code Generator
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ AI Code Generator [ROBLOX] [×] │
|
||
├───────────────────────┬─────────────────────────────────────────────────────────┤
|
||
│ [Systems] [Snippets] │ │
|
||
│ [Custom] │ Inventory System │
|
||
│ │ ════════════════════════════════════════════════════ │
|
||
│ 🔍 Search... │ Complete inventory management with slots, stacking, │
|
||
│ │ drag-drop, and persistence │
|
||
│ ───────────────── │ │
|
||
│ [All] [Gameplay] │ Features: Item management • Stack splitting • Search │
|
||
│ [Economy] [Combat] │ Quick transfer • Categories • Tooltips │
|
||
│ │ │
|
||
│ ┌───────────────────┐ │ ┌─ Configuration ────────────────────────────────────┐ │
|
||
│ │ 📦 Inventory │ │ │ │ │
|
||
│ │ System │ │ │ Max Slots [────────●──] 20 │ │
|
||
│ │ ───────────────── │ │ │ Max Stack [──────●────] 99 │ │
|
||
│ │ intermediate │ │ │ Enable Drag&Drop [✓] │ │
|
||
│ │ ~450 lines │ │ │ Persist Data [✓] │ │
|
||
│ └───────────────────┘ │ │ Enable Hotbar [✓] │ │
|
||
│ │ │ Hotbar Slots [────●──────] 8 │ │
|
||
│ ┌───────────────────┐ │ │ │ │
|
||
│ │ 📜 Quest System │ │ └────────────────────────────────────────────────────┘ │
|
||
│ │ ───────────────── │ │ [✨ Generate] │
|
||
│ │ advanced │ │ ────────────────────────────────────────────────────── │
|
||
│ │ ~600 lines │ │ │
|
||
│ └───────────────────┘ │ -- Inventory System │
|
||
│ │ -- Generated by AeThex Studio AI │
|
||
│ ┌───────────────────┐ │ │
|
||
│ │ 💰 Currency │ │ local Players = game:GetService("Players") │
|
||
│ │ System │ │ local ReplicatedStorage = game:GetService(...) │
|
||
│ │ ───────────────── │ │ │
|
||
│ │ intermediate │ │ local MAX_SLOTS = 20 │
|
||
│ │ ~350 lines │ │ local MAX_STACK = 99 │
|
||
│ └───────────────────┘ │ ... │
|
||
│ │ [📋 Copy] [→ Insert] │
|
||
└───────────────────────┴─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**AI Generator Features:**
|
||
- 5+ system templates (Inventory, Quests, Currency, Combat, Friends)
|
||
- Configurable parameters with sliders/switches
|
||
- Multi-platform code generation
|
||
- Instant preview of generated code
|
||
- Copy or insert directly into editor
|
||
|
||
---
|
||
|
||
## 👥 Real-time Collaboration
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ Collaborators (3) [💬 Chat] [×] │
|
||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
|
||
│ │ ● You (Owner) [Following] │ │
|
||
│ │ Line 12, Column 5 │ │
|
||
│ ├─────────────────────────────────────────────────────────────────────────┤ │
|
||
│ │ ● Alice ✏️ typing │ │
|
||
│ │ Line 45, Column 18 [Follow] │ │
|
||
│ ├─────────────────────────────────────────────────────────────────────────┤ │
|
||
│ │ ○ Bob 30s ago │ │
|
||
│ │ Line 23, Column 1 [Follow] │ │
|
||
│ └─────────────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ Session: Demo Collaboration │
|
||
│ File: script.lua │
|
||
│ [🔗 Copy Invite Link] [⚙️ Settings] [🚪 Leave] │
|
||
│ │
|
||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||
│ Chat │
|
||
│ ─────────────────────────────────────────────────────────────────────────────── │
|
||
│ ● Alice (2 min ago) │
|
||
│ Hey, I just pushed some changes to the combat system! │
|
||
│ │
|
||
│ ● Bob (1 min ago) │
|
||
│ Nice! Let me take a look at the damage calculation. │
|
||
│ │
|
||
│ ┌─────────────────────────────────────────────────────────────────┐ │
|
||
│ │ Type a message... [Send]│ │
|
||
│ └─────────────────────────────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Collaboration Features:**
|
||
- Real-time presence indicators
|
||
- Colored cursors for each user
|
||
- Follow mode to watch others
|
||
- Built-in chat system
|
||
- Typing indicators
|
||
- Permission management
|
||
|
||
---
|
||
|
||
## 🌈 Color Scheme
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||
│ AeThex Studio Theme │
|
||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ Background ████████ #0a0a0f (Dark navy) │
|
||
│ Card/Panel ████████ #1a1a2e (Elevated dark) │
|
||
│ Border ████████ #2d2d44 (Subtle divider) │
|
||
│ │
|
||
│ Primary/Accent ████████ #8b5cf6 (Purple - "Thex" highlight) │
|
||
│ Primary Hover ████████ #a78bfa (Lighter purple) │
|
||
│ │
|
||
│ Text Primary ████████ #f8fafc (White) │
|
||
│ Text Muted ████████ #94a3b8 (Gray) │
|
||
│ │
|
||
│ Success ████████ #22c55e (Green) │
|
||
│ Warning ████████ #eab308 (Yellow) │
|
||
│ Error ████████ #ef4444 (Red) │
|
||
│ Info ████████ #3b82f6 (Blue) │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 Responsive Design
|
||
|
||
**Desktop (1200px+)**
|
||
```
|
||
┌──────┬─────────────────────────┬──────────┐
|
||
│ File │ Code Editor │ AI Chat │
|
||
│ Tree │ │ │
|
||
│ │ │ │
|
||
│ ├─────────────────────────┤ │
|
||
│ │ Console │ Education│
|
||
└──────┴─────────────────────────┴──────────┘
|
||
```
|
||
|
||
**Tablet (768px - 1199px)**
|
||
```
|
||
┌──────┬─────────────────────────┐
|
||
│ File │ Code Editor │
|
||
│ Tree │ │
|
||
│ ├─────────────────────────┤
|
||
│ │ Console / AI Chat │
|
||
└──────┴─────────────────────────┘
|
||
```
|
||
|
||
**Mobile (<768px)**
|
||
```
|
||
┌─────────────────────────┐
|
||
│ [☰ Menu] AeThex │
|
||
├─────────────────────────┤
|
||
│ │
|
||
│ Code Editor │
|
||
│ │
|
||
├─────────────────────────┤
|
||
│ [Files] [AI] [More] │
|
||
└─────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Getting Started
|
||
|
||
1. **Clone**: `git clone https://github.com/AeThex-LABS/aethex-studio.git`
|
||
2. **Install**: `npm install`
|
||
3. **Run**: `npm run dev`
|
||
4. **Open**: http://localhost:3000
|
||
|
||
---
|
||
|
||
*Generated by AeThex Studio Visual Documentation*
|