Descriptions:
Bart Slodyczka demonstrates how to use Replit’s AI Design Mode to convert raw n8n workflow execution data stored in Supabase into a clean, client-friendly monitoring portal. The central argument for Design Mode is its frontend-first approach: the agent builds only the visual scaffold — no backend wiring — allowing developers to iterate freely on layout and style before committing to database connections. This contrasts with most AI app builders that couple frontend and backend together, making UI changes disruptive.
The workflow begins by exporting the Supabase schema as a screenshot and feeding it directly into Replit’s Design Mode chat, along with a plain-English prompt describing the desired portal. Replit generates a dashboard showing workflow execution statuses, failure logs, and run histories using mock data. Once the design is approved, a single follow-up prompt instructs the agent to wire it to the live Supabase database using the official Supabase JS library, with API keys stored as Replit secrets.
The video also showcases Replit’s Fast Mode, which enables surgical, near-instant edits to specific UI elements without a full rebuild cycle. Bart suggests using tools like Grafana or Dribbble as visual reference sources to refine the design via screenshot-driven prompts. The final portal is practical both as a personal operations dashboard and as a polished deliverable for clients managing multiple automated workflows.
📺 Source: Bart Slodyczka · Published December 03, 2025
🏷️ Format: Hands On Build
