House style for agents.

A design system that's finished, accessible, checkable, and yours.

See the house style ↓

Illustration: a workspace settings form built from Guibrief's components, cycling through focus, error, loading, and success states.

What it's for.

One house style, used again, and a check when the next screen drifts.

  • The next screen matches this one.

    Color, type, spacing, radius, and the full component set, decided once.

  • A new project starts from the same system.

    Tokens, a shadcn/ui theme, and the brief, copied in.

  • Drift fails a check.

    Hard-coded colors, tiny targets, and gradients get flagged.

Generic, or yours.

The same sign-up form, drawn two ways: a generic look (an illustration, not a recorded agent run) and the Guibrief house style.

IllustrationOne sign-up form, drawn two ways

Illustration: one sign-up form drawn two ways, not a recorded agent run. Generic: a gradient background, a glassy card, emoji icons, and tiny fields. Guibrief: the house style's tokens and components, with clear labels, 44-pixel fields, and one primary action.

Three steps to install.

Copy the files in, put the skill where your agent looks for it, then import the tokens into your Tailwind theme.

Terminal transcript:

  1. cp -r guibrief/{GUI.md,docs,tokens,components} .
  2. mkdir -p .claude/skills
  3. cp -r guibrief/skills/* .claude/skills/
  4. find GUI.md docs tokens components .claude -type f

Installed files: GUI.md, docs/design-system/foundation.md, tokens/colors.css, tokens/motion.css, tokens/radii-shadows.css, tokens/spacing.css, tokens/tailwind-theme.css, tokens/typography.css, components/button.tsx, components/input.tsx, components/label.tsx, components/link.tsx, components/textarea.tsx, .claude/skills/guibrief-house-style/SKILL.md.

Files copied. Last step: import tokens/*.css into your Tailwind theme (install guide, step 2).

Same request. Two interfaces.

Switch once. Without a brief, every screen is the look a model reaches for on its own. With Guibrief, the same screens use the pack, and the panel names each decision behind them.

The same screens, drawn with the pack’s components, type, and color.

Balance

$1,200.35

Payment$30.32
Payment amount

Palette

Aa123

System sans

Regular

Medium

Bold

Work
Seats
2

Ten areas, one set of rules.

Everything your agent needs to decide, decided once, and shipped in the formats it already reads: GUI.md, DESIGN.md, Tailwind tokens and a shadcn/ui theme. Each tile below runs on the pack's own tokens.

  • Colors

  • Typography

  • Spacing

  • Layout

  • Responsive

  • Icons

  • Shape and effects

  • Component states

  • Motion

  • Accessibility

One pack. $39.

Pay once. Give every project, and every agent you use on it, the same house style, and a check that tells you when code drifts from it.

One-time purchase · one person, unlimited projects · updates included · no refunds · Terms of Sale

  • GUI.md and DESIGN.md: the house style, written for agents
  • Tokens for color, type, spacing, radius/shadow, and motion, wired for Tailwind v4, plus a shadcn/ui theme
  • 87 components on the tokens: every shadcn/ui component plus agent UI (chat, tool calls, reasoning, the prompt composer), built on Base UI, in every state, light and dark
  • guibrief check, which flags drift in your code, with a GitHub Action
  • An agent skill, plus CLAUDE.md and AGENTS.md blocks, and an install guide
See all 87 components

Questions.

Can I see it before I pay?

Yes. This page is built with the pack: the comparison, the components, and every state further down. The price is for the files.

Which agents does it work with?

We've recorded Claude Code with the pack: it loaded the skill, read GUI.md, and built a sign-up form from the pack's components. The same skill installs in Cursor, and an AGENTS.md block is there for agents that read that file, but we haven't recorded runs with those yet. GUI.md is plain Markdown, so any agent can read it.

Will it make my agent's UI better?

We measured it rather than assume it. In our benchmark, Claude Code built five UIs in a codebase that already had the Guibrief tokens and components, once with the agent files and once without. A separate scorer rated each one blind against the same six-part rubric, and both sets scored 59 of 60. So we don't claim the agent files make a strong agent better. The value is the finished system itself, in the formats agents read, plus guibrief check to catch drift in review and CI.

I use shadcn/ui. Does it fit?

Yes. The pack includes a shadcn/ui theme, as a CSS file and a registry item you add with the shadcn CLI. Keep shadcn's components and they take on the Guibrief colors, radius and focus ring, in light and dark.

What do I need in my project?

A React project with Tailwind CSS v4. The tokens are CSS custom properties; the install guide shows how to wire them into Tailwind's theme.

What's in the zip?

GUI.md, DESIGN.md and the full design-system reference; the token files plus their Tailwind wiring and a shadcn/ui theme; the component library (87 components: every shadcn/ui component, plus Link and the agent UI components, on the tokens and in every state); guibrief check with an example GitHub Action; an agent skill, CLAUDE.md and AGENTS.md blocks; the license; and an install guide.

Does it support dark mode?

Yes. Every color role has a light and a dark value, switched by prefers-color-scheme or a data-theme attribute.

Can I change the brand color?

Yes. The brand hue is one primitive scale in tokens/colors.css, and every brand role reads from it.

Refunds, updates, and license?

$39 once, for one person and unlimited projects. Updates are included. All sales are final, so there are no refunds.

Every component, every state.

A row of Guibrief components in different states: filled, error, loading, success, hover, and disabled.