Skip to content

Following up from yesterday’s post, this is day two of refining Dokugent’s terminal UX. After laying the foundation with glyphs and layout components in agent --ls, we’re now building a full CLI-native design system to support structured, styled, and human-readable output across all commands

🗓️ Dev Log 046 – CLI design system

We’re introducing a native CLI design system for Dokugent to ensure that logs, prompts, and step outputs stay legible, expressive, and consistent—no matter how complex the agent plan gets.

✅ Highlights

  • paddedLog() now supports label prefixes, tone levels, and consistent padding rules
  • paddedSub() enables secondary and nested information with alignment
  • Boxed layouts with rounded, hex, and square borders now previewable via dokugent ui-demo
  • Added step logger preview with wrapped, indented logs for step-by-step execution
  • ANSI-safe styles for bold, underline, inverse, dim, and alert messages
  • Glyph symbol table for use in future UI previews and formatting helpers

This forms the base for a full CLI-native design layer, helping agent workflows remain traceable and human-friendly across different output styles.

Before vs After

Here's a visual comparison of how far we've come:

Before the Design System

Dokugent CLI before design system

After the Design System

Dokugent CLI after design system

We replaced raw console.log dumps with styled, structured output powered by our internal design system.

From this… to this.

I used to think CLI UX just meant good logs. Then I realized: even terminals deserve a design system.

Dokugent CLI now ships with: • Structured layouts • Glyph-based symbology • ANSI-safe visual hierarchies • Self-documenting CLI references

Design isn’t just for web. We build for humans—even in black boxes.

Categories