Design System shibin.co

11 · Resources

For agents

How to consume this design system in a Claude Code or any AI-agent session. Three paths, depending on what the agent can fetch and how deeply it needs to understand the system.

The three paths

01

Deepest integration

Load the repo as a Claude Code skill

The folder ships with a SKILL.md manifest at its root. Clone it into a Claude Code plugin or skills directory, and it becomes invocable. The agent gets the full system, prose spec, tokens, assets, patterns, in one install. 

# clone into your skills directory
git clone https://github.com/ShibinCo/design-system \
  ~/.claude/skills/shibin-dotco-design

02

Fastest

Point the agent at llms.txt

The root of this site hosts a canonical machine-readable brief at /llms.txt. It distills every non-negotiable, every token, and every component spec into ~3KB of Markdown. Share the URL; any agent that can fetch a URL can consume the system. 

# fetch the canonical brief
curl https://design.shibin.co/llms.txt

03

Surgical

Fetch tokens.css directly

For projects where the agent just needs colors and fonts, tokens.css is self-contained. Drop it into any project and reference the CSS variables. No framework, no build step. 

# copy into your project
curl -O https://design.shibin.co/tokens.css

04

Dashboards

Install the shadcn theme

For React / Next.js / Remix projects using shadcn/ui, install the brand as a theme in one command. Every CSS var, radius override, chart color, and sidebar token lands in the project’s stylesheet. See Shadcn theme for the full picture. 

# one command, full brand on shadcn
npx shadcn@latest add https://design.shibin.co/registry/shibin.json

The non-negotiables

If an agent ships something that violates any of these, the output is wrong, regardless of how polished it looks. Lift this block into any system prompt:

  • Canvas Warm cream #F8F7F2 only. Never pure white.
  • Accent Deep indigo #1C1856. One color. No secondary accents.
  • Typeface Inter for everything. Caveat for the single homepage greeting only.
  • Case Sentence case throughout. No Title Case, no all-caps affectation.
  • Theme Light only. No dark mode.
  • Gradients None. No heavy shadows either. Thin 1px borders carry structure.
  • Icon The SVG diagonal up-right arrow. No emoji, no icon fonts, no Unicode arrows.
  • Accent line 40 × 3px rounded-full below every page title.
  • Cursor 3px indigo with step-end blink, after “AI” in the hero subhead.

Sharable one-liner

When handing a new project to an agent, paste this:

Use the Shibin Dotco design system. Start at https://shibin.co/brand. Full spec: https://design.shibin.co/llms.txt · Tokens: https://design.shibin.co/tokens.css