knowsuchagency

Onyx — Design skill for Claude Code

Design community

Onyx design system — agent-orchestration control surface.

How to install Onyx

This entry records only its repository, not the path inside it, so there is no exact command to give. Open knowsuchagency/onyx and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Onyx does

Onyx design system — agent-orchestration control surface. shadcn preset, near-black + indigo.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★

README

Onyx Design System

Orchestration OS for AI agents — a control surface for operators running fleets of autonomous workers.

What Onyx is

Onyx is an **agent orchestration platform**. Operators run, monitor, and intervene in pipelines of AI agents that plan, research, execute, review, and ship work. The product feels like a cross between a NASA mission-control board, a Kanban dashboard, and a Unix terminal — dense, technical, instrumented, and trustworthy.

The flagship surface is **Agent Ops** — a real-time Orchestration Board with stages (Intake → Plan → Execute → Review → Blocked → Complete), per-run inspectors, an agent roster, system-health telemetry, and a command bar driven by slash actions.

Products / surfaces

Surface	What it is
Agent Ops Console	The desktop control room. Orchestration Board, Run Inspector, command bar, system health. (Primary UI kit.)
Onyx Marketing Site	Public landing — what Onyx is, who it's for, pricing. (Secondary UI kit.)

Sources

The only source provided for this system is a single reference image:

uploads/Generated image 1.png — full-bleed render of the Agent Ops Orchestration Board, captured at v1.0. Copied into assets/reference-agent-ops.png.

No codebase, no Figma file, no copy doc. **All tokens, components, and motion behavior in this system are extrapolated from that single render plus the product brief.** Where I had to fill gaps (microcopy, secondary screens, hover/press states, motion curves), I did so in keeping with the aesthetic and flagged the substitutions inline in `VISUAL_FOUNDATIONS` and `ICONOGRAPHY`.

Index

Root files (read these first):

README.md — this file. Brand context, content rules, visual foundations.
SKILL.md — entry point if this folder is loaded as an Agent Skill.
colors_and_type.css — design tokens (CSS custom properties) for color, type, spacing, radii, shadows, motion.
preset.json — shadcn registry-item preset. Applies the O