Skip to main content
Developer Developer
  1. HOME
  2. Design
  3. Decorator Kit

For UC San Diego web developers

Decorator Kit Beta

Build campus pages and apps with an AI coding assistant, and keep the UC San Diego look intact while you do.

View on GitHub Quick start

$ npx ucsd-decorator-kit@latest init
Installing ucsd-decorator-v5 ucsd-decorator-kit…
  wrote      CLAUDE.md
  wrote      AGENTS.md
  wrote      .cursorrules
  wrote      .github/copilot-instructions.md
  …
Done. Open your AI tool in this directory
and describe the site you want.

This is a beta. Commands, rules, and checks may change between releases. This page is a short introduction. The README on GitHub has the full, current documentation, and the changelog lists what changed in each release.

Two packages, two jobs

Decorator or Decorator Kit?

You use both. The Decorator is the design system. The kit makes sure an AI assistant builds with it correctly.

The Decorator

ucsd-decorator-v5

The campus design system: the page shell, layout templates, modules, components, CSS, and JavaScript behind UC San Diego websites. Pages load it from cdn.ucsd.edu, and the npm package is the reference copy of its markup.

ucsd-decorator-v5 on npm

The Decorator Kit Beta

ucsd-decorator-kit

Rules for building with the Decorator using AI. It installs the Decorator, writes instructions your AI tool reads on its own, and adds a check that fails if the header, navigation, search, or footer drift from the campus standard.

ucsd-decorator-kit on GitHub
How the Decorator and the Decorator Kit differ
Question Decorator Decorator Kit (Beta)
What it is Markup, CSS, and JavaScript Rules, an AI skill, and a chrome integrity check
Who reads it Your browser, and you Your AI coding tool and your CI pipeline
What you get The UC San Diego look, layouts, and components An assistant that builds inside the page canvas and leaves the shared shell alone
Works on its own? Yes, with or without AI No. It installs the Decorator and reads markup from it.

Quick start

From empty folder to first page

You need Node.js and an AI coding tool: TritonAI Harness, Claude Code, Cursor, GitHub Copilot, or any assistant that reads an AGENTS.md file.

  1. Run the setup command

    In a new, empty folder:

    Terminal

    mkdir my-site
cd my-site
npx ucsd-decorator-kit@latest init

  2. Open the folder in your AI tool

    There's nothing to configure. The kit puts its rule files at the project root, where every supported tool already looks.

  3. Describe what you want, or ask for help

    Tell it what to build, or say help me get started. It will ask which layout template to start from rather than choosing one for you. That's on purpose.

Set up

Start a new project, or add the kit to one

New project: init

Run in an empty folder. It sets up everything a new site needs:

  • Installs the Decorator and the kit as development dependencies
  • Writes rules for Claude Code, Cursor, Copilot, and AGENTS.md tools
  • Installs the UC San Diego Decorator skill
  • Adds Dependabot and a CI workflow
  • For Claude Code, runs the chrome check after every turn

Terminal

npx ucsd-decorator-kit@latest init

Existing project: add

Installs the rules and the skill, and changes nothing else. It won't touch package.json, add CI, or overwrite your own AGENTS.md.

Add the rest with flags when you want them: --with-decorator, --with-ci, and --with-hook for the Claude Code check.

Terminal

npx ucsd-decorator-kit add
All add options

Stay current

Keep the kit up to date

The Decorator and the kit are both development dependencies, so Dependabot opens a pull request when either one releases.

To upgrade by hand, install the latest kit, then run sync to rewrite the rule files it manages.

Upgrade

npm install --save-dev ucsd-decorator-kit@latest
npx ucsd-decorator-kit sync
syncRewrites the generated rule files after an upgrade, or after you edit your project's own rules.
checkFails if the rule files are out of date. Run it in CI so an upgrade can't land without a sync.
driftReports whether the Decorator changed upstream without a new npm release.
verifyRuns the chrome integrity check against your pages. Run it in CI too.

The help guide

Not sure what it should look like?

Say help me get started. Instead of writing code right away, your assistant interviews you first.

  1. It asks six questions in one message, with lettered options, so you can answer in one line.
  2. It recommends a layout and modules, each linked to its example in the Developer Guide. You pick the layout.
  3. It writes the plan to BRIEF.md, builds a first version inside the canvas, and runs the chrome check.
  4. It suggests what to ask for next. Later sessions read BRIEF.md before changing the page.

Using a chat AI without the kit, such as TritonGPT? Paste the starter interview prompt from the Developer Guide's Start here section.

You

help me get started

Your AI assistant

A few quick questions first. Answer like “1b, 2 students checking waitlists, 3b…”

  1. What are you building: an information site, a form, a dashboard, a directory or admin tool, or a knowledge base?
  2. Who uses it, and what's the one thing they must be able to do?
  3. Which campus area is it for?
  4. How will it be built and hosted?
  5. What data does it touch?
  6. What's the site name, and a short form for phones?

Go further

Where to go next

Full documentation

Every command and flag, project canvas rules, component libraries, and how the chrome check works.

Read the README

Developer Guide

Layouts, modules, components, and app patterns, each with a prompt you can copy and adapt.

Browse the guide

Feedback

The kit is in beta. Tell us what broke, what's confusing, or what you need it to do.

Open an issue

The latest is always on GitHub

This page covers the basics. The README and changelog are updated with every release.

Go to the repository