Skip to main content
UDSUrban Design SystemBuild a multi-component HTML demoSITE 2026.06.10.1
Color
Brand
Font
Scale
Density

AI Assist

Everything an AI agent needs to use the Urban Design System. Point your AI coding tool at this page or download the Cursor rule file.

What is UDS?

UDS (Urban Design System) is a token-first design system with framework-agnostic Web Components. It works with any stack — HTML, React, Vue, Angular, Svelte — with React wrappers available for React apps.

For AI Agents

If you're an AI coding assistant, here's what you need:

  • Machine-readable context: Fetch ai-context.json for the complete token list, component catalog, and framework rules in structured JSON.
  • Cursor rule: Download uds-design-system.mdc and place it in .cursor/rules/ — it contains everything inline.
  • Install UDS: import the UDS CSS bundle, register @uds/web-components, and use @uds/react wrappers in React apps.
  • Icons: Material Symbols Outlined from Google Fonts CDN.
downloadDownload Cursor Rule (.mdc)data_objectView ai-context.json

Full Example — Tenant Dashboard

Here's the target component API using the parallel Web Components package:

html
import './uds/uds.css';
import { registerUdsComponents } from '@uds/web-components';

registerUdsComponents();

<udc-notification tone="info" dismissible>
  3 invoices are pending review.
</udc-notification>

<udc-tabs selected-panel="profile">
  <udc-tab panel="profile">Profile</udc-tab>
  <udc-tab panel="settings">Settings</udc-tab>
  <udc-tab-panel panel="profile">
    <udc-text-input label="Full name" helper-text="First and last name required"></udc-text-input>
    <udc-checkbox name="verified">Verified tenant</udc-checkbox>
    <udc-chip variant="filter" selected>Active</udc-chip>
    <udc-badge tone="success">In good standing</udc-badge>
    <udc-button variant="primary">Save</udc-button>
  </udc-tab-panel>
  <udc-tab-panel panel="settings">
    <udc-tile label="Notifications" description="Send updates by email" selectable></udc-tile>
  </udc-tab-panel>
</udc-tabs>