Skip to content
FlowForge Logo FlowForge

FFT-TUI-Designer - Terminal Visual-Design Leaf

Overview

Section titled “Overview”

FFT-TUI-Designer is the visual-design leaf for FlowForge terminal screens — the per-screen craft designer that sits between the composition architect and the implementer in the fft-tui-architect → fft-tui-designer → fft-tui chain.

Where fft-tui-architect decides the composition (the layout tree, the focus model, the Charm-adoption strategy), FFT-TUI-Designer decides how each screen actually looks: the mockup, the visual hierarchy, the co-render of color and glyph and label, the spacing tokens, and the state tables. It holds the founder’s taste as canon and hands fft-tui a screen spec to build line-for-line.

Capabilities

Section titled “Capabilities”
  • Per-screen mockup: the concrete visual layout of a single terminal screen, ready for implementation
  • Visual hierarchy: what draws the eye first, the weight of each element, the calm-vs-busy balance
  • Co-render application: enforces the color + glyph + label rule so every state is legible without color alone (CVD-safe, NO_COLOR-honoring)
  • Spacing-token application: applies the #2435 Spacing Canon named tokens and fixed per-tier values so headers and content align and nothing is glued to the edge
  • State tables: the full matrix of a screen’s states (focused, empty, loading, error, selected) so fft-tui implements every one
  • Founder-taste canon: holds the #2371 TUI Design Manual, the #2435 Spacing Canon, and the #2358 header/frame blueprint — the founder’s hand-polished screens are the corpus
  • Screen spec handoff: produces the implementation-ready spec fft-tui builds against, and the bar fft-code-reviewer judges GOLDEN

When to Use

Section titled “When to Use”
  • Routing rule: per-screen visual design (mockup, hierarchy, co-render, spacing, state table) → dispatch fft-tui-designer after fft-tui-architect has decided composition and before fft-tui implements. architect → designer → tui.
  • Designing how a new terminal screen looks once its composition is decided
  • Fixing a screen that works but isn’t “gorgeous” — misaligned headers, glued-to-edge content, color-only state, flat hierarchy
  • Producing the state table for a screen so no state is left unstyled

Do NOT dispatch for composition or layout-tree decisions (dispatch fft-tui-architect), or for View/Update line code (dispatch fft-tui).

Example Prompts

Section titled “Example Prompts”
"fft-tui-architect has decided the cockpit is a 4-pane worker grid with a status bar. Design the visual for the worker card: the hierarchy, the co-render of the running/blocked/done states, the spacing tokens, and the full state table. Hand fft-tui a screen spec."
"This gantt screen works but feels busy and the header is glued to the left edge. Apply the Spacing Canon, fix the hierarchy, and produce the corrected mockup."
"Produce the state table and visual spec for the ratification inbox — focused, empty, one-item, many-items, and error states — ready for fft-tui to implement."