🏗️ AI-Ready UI Architect

Status: Planning | Platform: Tauri (Rust + React) | Focus: AI Context Generation

1. Project Vision & Scope

Goal: Create a Tauri-based WYSIWYG UI mockup tool specifically designed to generate context, specifications, and prompts for AI coding tools (like Claude Code and OpenCode).

Core Philosophy: Unlike traditional design tools (Figma), this tool focuses on semantic structure and data binding so that an AI agent understands how the app works, not just how it looks.

Target Outputs:

• 🎨 Visual Mockups (Web & TUI)
• 🤖 Structured Prompts/Context for AI agents
• ⚛️ Scaffolded Code (React/HTML/Tauri config)

2. Conceptual Integration

The "Atomic" Design Hierarchy

We use a strict Atomic Design methodology to build context layers:

1. Element Designer (Atoms)
   • Function: Basic shape generator and icon composition tool.
   • Input: Shapes, Icons, Text, HTML primitives.
   • AI Features: Text-to-Element (GenAI), Image-to-Element (Vision).
   • Output: Reusable primitives (e.g., "Primary Button", "Nav Link").
2. Component Designer (Molecules)
   • Function: Logic container.
   • Input: Elements defined in Step 1.
   • Logic: Define "Slots" for dynamic data.
   • Output: Functional blocks (e.g., "User Card", "Data Table").
3. UI/Page Designer (Organisms)
   • Function: Application state view.
   • Input: Components.
   • Output: Full screens.

🔌 Data-Driven UI Generation (The "jq" Integration)

The bridge between static design and dynamic behavior.

• Source: API, DB, WebSocket, or Local File.
• Explorer: JSON Tree viewer for raw responses.
• Selector: Click-to-generate jq queries (e.g., .users[] | select(.active == true)).
• Binding Context:
  • Looping: "For every result in this query, render Component X."
  • Streaming: "Bind this text element to this WebSocket stream."

🧠 AI Behavioral Layer

• Global Context: Wizard settings (Platform, Protocols, Stack).
• Local Context (Chat):
  • Element Scope: "Make this pulse on hover."
  • Page Scope: "If API 404s, redirect to Login."

3. Architecture

Layer	Stack	Notes
Core	Tauri (Rust)	Native performance, secure FS access, credential storage.
Frontend	React + Tailwind	Component reuse, state management (Zustand/Redux).
TUI Engine	ratatui + ratzilla	Compiles Rust TUI to WASM for pixel-perfect browser previews.
Data Proxy	Rust (Reqwest/SQLx)	Proxies requests to avoid CORS; manages DB connections.

4. Master Roadmap

Phase 1: Foundation & Wizard

• [ ] Initialize Tauri Project
  • [ ] Setup Rust backend & React frontend.
  • [ ] Configure ratzilla WASM target.
• [ ] Build Project Wizard
  • [ ] Inputs: Platform (Web/Mobile/Desktop/TUI), Stack, Protocols.
  • [ ] Output: Global JSON Context Object.

Phase 2: The Visual Engine

• [ ] Element Designer
  • [ ] Shape/Icon composition toolbar.
  • [ ] Layer management system.
  • [ ] AI Integration: Text-to-Element & Image-to-Element pipelines.
• [ ] Component Designer
  • [ ] Drag-and-drop Elements.
  • [ ] Slot definition system.
• [ ] Extensibility System
  • [ ] Framework Schema Validator.
  • [ ] AI Repo Parser: Agent loop to ingest GitHub URLs and generate Component Schemas.

Phase 3: Data & Logic

• [ ] Data Source Manager
  • [ ] Secure Credential Storage (Rust Keyring).
  • [ ] JSON Viewer + jq Generator.
  • [ ] Connection Toggles: Client-side vs Server-side proxy.
  • [ ] Update Strategies: Realtime (WS), Polling, Static.
• [ ] Environment Management
  • [ ] .env file loader and variable substitution.

Phase 4: Execution & Export

• [ ] AI Chat Integration
  • [ ] Context-aware chat bar (Element/Component/Page scope).
• [ ] "Opencode" Trigger
  • [ ] Compile Visual Tree → Code.
  • [ ] Compile Behavior → System Prompts/Comments.

5. Key Decisions & Notes

• Repo Parsing: Strictly AI-Agent based. We will not use static AST parsing. The agent will read the repo and "learn" the library structure.
• TUI Editor: Hybrid Model.
  • Mode A: High-level Widget drag-and-drop.
  • Mode B: Low-level Character Grid (ASCII painting).
• Security: API Keys are never hardcoded in the frontend. They are stored in the Rust backend or loaded via .env variables during preview.