Back to Portfolio
DesignOps • Local OS
Case Study 02 • Creative Technologist Enterprise B2B SaaS • Helios Core

The Autonomous DesignOps Control Hub.

Engineering a private desktop mission-control platform (localhost:8080) that orchestrates an autonomous AI-augmented creative department, bespoke internal software, and deterministic production pipelines.

Role Lead Product Designer & Technologist
Runtime Localhost:8080 Desktop OS
Core Engines HyperFrames, Three.js, Python PPTX
Architecture Two-Layer Git Isolation
-85% Production Turnaround

Days to seconds for 60fps video, 3D booths, and slide decks.

51 Tasks Orchestrated Web Improvements

Divided between Autonomous AI vs Human Gatekeeper.

1,813 Indexed Lucide Icons

Bilingual Spanish/English search with 42 category filters.

0.00% WIP Git Leakage

Complete isolation between scratch sessions and shipping code.

http://localhost:8080 • Control Hub
Helios Autonomous DesignOps OS

Creative Department Mission Control

Active project dashboard orchestrating automated video rendering, 3D exhibition booth visualizers, skills auditing, and sprint task synchronization.

localhost:8085 • Active

Video Templates — Studio Hub

Gallery of programmatic motion templates (intro, tablet mockup, separator, svg-animator) with HeyGen avatar and zero re-encoding CLI export.

projects/video-templates Open Studio →
Three.js WebGL • Standalone

Stand Builder — Ferias

Renders 1 to 3 wall trade show booths at real physical scale. Split-screen comparative review, dimension annotations, and camera-locked PNG exports.

pages/stand-builder.html Open 3D View →
Self-Auditing AI • Active

Auditoría de Skills — AI Engine

Automated audit dashboard for the skills ecosystem: monitoring trigger conditions, brand scope compliance, cross-brand tools, and cache drift.

pages/auditoria-skills.html Inspect Audit →
51 Sprint Tasks • Persistent

Task Manager • Autonomy Division

Organizes improvement backlogs classified into Autonomous Execution (AI runs directly) vs Human Gatekeeper Required (Director sign-off).

dashboard-tareas/index.html View Tasks →
LIVE WORKING TOOLS • ZERO SIMULATION

Test the Operating Environment Live.

Switch between the live tools below: test the full DesignOps Control Hub dashboard, explore the 84-state Interaction Grammar spec composer, or search through the bilingual Lucide icon library.

Enterprise Data Architecture

Two-Layer Git Isolation: Zero WIP Leakage.

Most AI workflows fail in corporate environments because scratch iterations, test prompts, and WIP files pollute the production git commit history. We solved this with a strict two-tier repository architecture.

Layer 01 • Production enterprise-mkt-data

The Shipping Repository

A clean, strictly git-tracked repository containing only audited production assets, verified component code, and published customer touchpoints. Zero scratch experiments allowed.

  • Production React 18 & Tailwind UI
  • Final exported 60fps MP4 master cuts
  • Audited client slide decks (.pptx)
Layer 02 • Working Space enterprise-mkt-private

The Private Director Workspace

A local-only, git-isolated environment where the human Director and Claude test prompt variations, HyperFrames animation staging, and intermediate render tests without fear of leaking unfinished work.

  • Ephemeral AI working session scratchpads
  • Local Jira sprint proxy logs & cache
  • Raw uncompressed 4K video render buffers
Bespoke Internal Tooling

Four Custom Internal Production Engines.

Rather than relying on generic off-the-shelf SaaS apps that don't respect brand tokens, we engineered four dedicated software programs inside the Control Hub.

Engine 01 • Programmatic Motion Studio

60fps HyperFrames & Avatar Compositor

Eliminates manual timeline work in Adobe After Effects. Claude structures narrative scripts, generates frame-by-frame HTML/GSAP scenes, integrates neural TTS voiceover, and positions HeyGen avatars in a calibrated 620×840px ratio.

Hard Technical Innovation:
Strict Light-First Video Palette

Eliminated all dark gradients to permanently solve H.264 compression banding artifacts during zero-re-encoding export (ffmpeg -c copy).

export-video.js (CLI Pipeline) • Lossless
> node export-video.js --scene=tablet-mockup --fps=60
[1/4] Rendering HyperFrames canvas (1920x1080)... OK
[2/4] Synthesizing Neural TTS ('Elena' profile)... OK
[3/4] Aligning HeyGen avatar mask (620x840)... OK
[4/4] ffmpeg -c copy -movflags faststart... DONE (0.04s)
Engine 02 • Spatial Three.js Stand Visualizer

Trade-Show Booth Visualizer at Real Scale

Bridges the costly gap between flat 2D Figma graphics and physical 3-wall exhibition stands. Renders customizable booth configurations in Three.js WebGL at exact millimeter scale with graphic texture wrapping.

COMPARISON: Split-Screen Dual Option
EXPORT: Camera-Locked PNG

Three.js Spatial Engine

Configurable 1 to 3 walls (e.g. 6m × 3m × 2.5m) with physical lighting, material roughness, and vinyl print color fidelity.

Explore Stand Builder Deep-Dive →
Engine 03 • Presentation & Document Compiler

Executive Deck Builder (.pptx & .docx)

Automatically compiles client-ready presentations and executive dossiers directly from Single Source of Truth tokens. Python-based generators encode exact typography hierarchies, brand swatches, and multi-device mockups without manual slide cleanup.

16:9 Widescreen SVG Animator Live Device Frames
Python Deck Generator • Token Binding
> python generate_deck.py --theme=helios-core --deck=clinical-brief
[Binding] Lato Bold • #0F1A22 (Primary Header)
[Binding] #25C3C1 • #377EF7 (Gradient Accents)
[Layout] 3-Column Metric Split + SVG Device Mockup
[Output] generated_brief_v4.pptx (Meeting Ready)
Engine 04 • Structured Design Grammar

Patrones de Interacción & Lucide Explorer

Eliminates vague natural language prompts. Codifies 37 UI components into 84 explicit behavioral states with an interactive specification composer, paired with a local search explorer indexing 1,813 Lucide icons in both English and Spanish.

BEHAVIORS: 84 Codified States
ICONS: 1,813 Bilingual
01 • SELECT COMPONENT:
02 • SELECT BEHAVIOR STATE:
Live spec translates human design intent directly into mathematical easing parameters.
Interactive Card Target
State:
Modal Surface Spec
Spring curve elevation active
Compiled Machine Parameters: Zero Ambiguity

                                
Operational Leadership

The Autonomy Division: AI Executes, Humans Direct.

A foundational principle of our DesignOps architecture: knowing exactly when to let machines run at full throttle, and where human strategic judgment is non-negotiable.

Autonomous Execution (AI Runs)

Automated on Staging

Deterministic operations that AI executes directly on git staging branches without requiring human intervention.

CSS & Design Token Syncs 100% Machine
Markdown Blog Article Compilation Auto-Staged
Skills Trigger Collision Audits Self-Auditing
Human Gatekeeper Required

Director Approval Mandatory

Strategic brand gates where aesthetic judgment, institutional taste, and business context cannot be delegated.

Brand Token Alterations Director Sign-Off
Cross-Brand Scope Partitions Human Judgment
Production Main Branch Merge Final Gate
The Complete Systems Network

Explore Sibling Architecture Cases.

See how this local control hub connects with our Single Source of Truth governance and specialized motion pipelines.