AeThex-Labs/aethex-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
aethex-studio/PRD.md
MrPiglr fb17d0e075 Generated by Spark: ?
2026-01-17 02:52:12 +00:00

7 KiB
Raw Blame History

Planning Guide

AeThex Studio is a browser-based Roblox Lua script editor with integrated AI assistance for rapid prototyping and learning.

Experience Qualities:

  1. Professional - Should feel like a legitimate development tool with clean typography and purposeful spacing
  2. Intelligent - AI assistance should feel seamlessly integrated, not bolted on
  3. Empowering - Users should feel confident writing and understanding Lua code

Complexity Level: Light Application (multiple features with basic state) This is a focused code editor with AI chat, script templates, and syntax validation - not a full-featured IDE with file systems, debugging, or deployment pipelines.

Essential Features

Monaco Code Editor

  • Functionality: Full-featured Lua code editor with syntax highlighting, autocomplete, and line numbers
  • Purpose: Provide a professional coding environment for Roblox scripting
  • Trigger: Loads on app start with default template
  • Progression: User opens app → sees editor with starter code → begins typing → receives syntax highlighting and autocomplete
  • Success criteria: Code is editable, syntax-highlighted, and changes persist between sessions

AI Chat Assistant

  • Functionality: Conversational AI panel that helps explain code, debug issues, and suggest improvements
  • Purpose: Lower the learning curve for new Roblox developers
  • Trigger: User clicks chat button or types a question in the AI panel
  • Progression: User asks question → AI analyzes current code → provides contextual answer with code examples
  • Success criteria: AI responses are relevant, helpful, and include code snippets when appropriate

Script Templates

  • Functionality: Pre-built Roblox script templates (basic part manipulation, player join events, GUI interactions, etc.)
  • Purpose: Jump-start development and teach common patterns
  • Trigger: User clicks "Templates" button
  • Progression: User browses templates → clicks template → code loads into editor → user modifies for their needs
  • Success criteria: Templates load instantly and represent common Roblox use cases

Code Validation

  • Functionality: Real-time syntax checking and error highlighting
  • Purpose: Catch errors before testing in Roblox Studio
  • Trigger: Automatic as user types
  • Progression: User types invalid Lua → error highlights appear → user hovers for details → fixes error
  • Success criteria: Common Lua syntax errors are caught and clearly displayed

Export/Copy Code

  • Functionality: One-click copy of current code to clipboard
  • Purpose: Easy transfer to Roblox Studio
  • Trigger: User clicks copy button
  • Progression: User finishes editing → clicks copy → receives confirmation → pastes into Roblox Studio
  • Success criteria: Code copies to clipboard with proper formatting

Edge Case Handling

  • Empty Editor: Show helpful placeholder text with getting started tips
  • AI Errors: Display user-friendly error messages if AI service is unavailable
  • Large Scripts: Monaco handles large files, but warn if script exceeds 5000 lines (unusual for Roblox scripts)
  • Invalid Lua: Show errors inline without blocking the user from continuing to type
  • Lost Work: Auto-save code every 30 seconds to prevent data loss

Design Direction

The design should evoke a sense of technical sophistication meets creative playfulness - this is a tool for building games, not enterprise software. Think dark themes with neon accents, geometric patterns, and smooth transitions that feel modern and game-inspired.

Color Selection

A dark, code-focused theme with vibrant accent colors inspired by Roblox's playful brand and gaming aesthetics.

  • Primary Color: oklch(0.45 0.20 265) - Deep electric blue that represents technical precision and digital creativity
  • Secondary Colors:
    • Background: oklch(0.15 0.02 265) - Near-black with subtle blue tint
    • Surface: oklch(0.20 0.03 265) - Slightly elevated dark panels
  • Accent Color: oklch(0.75 0.20 150) - Vibrant cyan-green for CTAs, highlights, and active states
  • Foreground/Background Pairings:
    • Primary (Deep Blue): White text (oklch(0.98 0 0)) - Ratio 7.2:1 ✓
    • Accent (Cyan-Green): Dark text (oklch(0.15 0.02 265)) - Ratio 8.1:1 ✓
    • Background (Near-Black): Light text (oklch(0.85 0.03 265)) - Ratio 12.3:1 ✓
    • Surface (Dark Panel): Light text (oklch(0.85 0.03 265)) - Ratio 10.5:1 ✓

Font Selection

Typography should feel technical yet approachable - monospace for code, clean sans-serif for UI.

  • Typographic Hierarchy:
    • H1 (App Title): Space Grotesk Bold/32px/tight tracking (-0.02em)
    • H2 (Section Headers): Space Grotesk Semibold/20px/normal tracking
    • Body (UI Text): Inter Medium/14px/relaxed line-height (1.6)
    • Code (Editor): JetBrains Mono Regular/14px/monospace
    • Small (Hints): Inter Regular/12px/muted color

Animations

Animations should feel snappy and technical - quick state transitions with subtle easing that reinforces the digital tool aesthetic. Use framer-motion for panel slides and modal appearances, but keep transitions under 200ms to avoid feeling sluggish. Add micro-interactions on buttons (scale on press) and smooth scrolling in the chat panel.

Component Selection

  • Components:
    • Button (primary actions like "Run", "Copy", "Ask AI") with custom variants for destructive and accent states
    • Card for template previews and code snippets
    • Separator for dividing editor from chat panel
    • ScrollArea for chat messages and template list
    • Tabs for switching between templates and settings
    • Dialog for first-time user onboarding
    • Badge for Lua syntax error indicators
    • Tooltip for icon button explanations
    • Custom Monaco Editor wrapper component
    • Custom AI chat component with message bubbles
  • Customizations:
    • Monaco editor needs dark theme configuration
    • Chat bubbles with distinct styling for user vs AI messages
    • Template cards with code preview using syntax-highlighted pre blocks
    • Resizable panels using react-resizable-panels
  • States:
    • Buttons: Default (solid accent), Hover (brightened +10% lightness), Active (scale 0.97), Disabled (50% opacity)
    • Editor: Default (dark background), Focused (subtle glow border)
    • Chat input: Default (muted border), Focused (accent border with glow)
  • Icon Selection:
    • Code (editor): <Code /> from Phosphor
    • Chat: <ChatCircle /> from Phosphor
    • Copy: <Copy /> from Phosphor
    • Templates: <FileCode /> from Phosphor
    • AI sparkle: <Sparkle /> from Phosphor
    • Play/Run: <Play /> from Phosphor
  • Spacing:
    • Container padding: p-4 (16px)
    • Component gaps: gap-4 (16px) for major sections, gap-2 (8px) for grouped items
    • Button padding: px-6 py-2.5
    • Card padding: p-6
  • Mobile:
    • Stack editor and chat vertically on mobile
    • Make chat panel collapsible on small screens
    • Reduce font sizes: H1 to 24px, body to 13px
    • Full-width buttons with bottom sheet for templates
    • Hide Monaco minimap on screens < 768px