docs: Add comprehensive visual feature guide with ASCII mockups
- 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
This commit is contained in:
Claude
parent
c08627a561
commit
ffd3140fc8
1 changed files with 358 additions and 0 deletions
358
docs/VISUAL_GUIDE.md
Normal file
358
docs/VISUAL_GUIDE.md
Normal file
|
|
@ -0,0 +1,358 @@
|
||||||
|
# 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*
|
||||||
Loading…
Reference in a new issue