Design System shibin.co

13 · Resources

For agents

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

The four 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, token, and component spec into about 12KB 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 White #FFFFFF. Full surfaces stay clean and untextured.
  • Palette #27272A, #18181B, #626366, #71717A, #8E8F92, and #E4E4E7.
  • Typeface General Sans for the interface and prose. Manrope only for small editorial metadata.
  • Case Sentence case throughout. No Title Case, no all-caps affectation.
  • Theme Light only. No dark mode.
  • Structure Thin 1px borders, 8px card corners, and whitespace. No decorative grids or patterned backgrounds.
  • Actions Quiet underlined text links. Filled controls only when a form action must read as a button.
  • Imagery Monochrome. Use real portraits, product captures, and wordmarks without color effects.
  • Effects No gradients, glows, or heavy shadows.
  • Icon The SVG diagonal up-right arrow. No emoji, no icon fonts, no Unicode arrows.
  • Motion Use short fades and two-pixel nudges sparingly. Respect prefers-reduced-motion.

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