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
31 KiB
31 KiB
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
- Clone:
git clone https://github.com/AeThex-LABS/aethex-studio.git - Install:
npm install - Run:
npm run dev - Open: http://localhost:3000
Generated by AeThex Studio Visual Documentation