Vela Intelligence Design System
A web-component library for financial-services UIs, built to be driven by an AI coding agent. Install the skill, describe the screen, ship it.
A web-component library for financial-services UIs, built to be driven by an AI coding agent. Install the skill, describe the screen, ship it.
A library of vi-* web components for regulated financial-services
interfaces, built on Lit and themed entirely through CSS custom
properties. It is meant to be driven by an AI coding agent rather than written by
hand — install the skill, point your agent at it, and describe the screen you
want. One script tag, no bundler, no framework lock-in.
This is the part that matters. The vela-ds Claude Code plugin carries a
skill that loads itself the moment UI work starts, so your agent knows every
component, its properties, slots and events, the semantic token layer, form
association, charts, and the application shell — without fetching anything or
guessing.
/plugin marketplace add vela-intelligence/vela-design-system /plugin install vela-ds@vela
Then leave a pointer in the project's CLAUDE.md so the agent knows the
skill applies here:
“This app uses the Vela Design System. Use the vela-ds skill
for any UI work.”
The plugin also ships /vela-ui-check, which audits a project against the
rules the skill teaches.
Every component, live, grouped into families and themeable in place — switch
mode, density and corner radius and watch the whole set respond. This is how you
find out what already exists, which is the difference between asking your agent for
“a metric card” and having it build one out of raw divs.
Each demo carries its own markup and its full property table, so a component you like is a copy away.
Browse demos
One script tag registers every component, injects the global styles, loads the fonts
and applies the default theme. The :not(:defined) rule is not optional
— without it the page flashes unstyled markup while the custom elements
upgrade.
<head>
<style>:not(:defined) { visibility: hidden; }</style>
<script type="module"
src="https://ds.velaintelligence.com/14.x/vela-ds.js"></script>
</head>
<vi-button tone="action">Run Analysis</vi-button>
/14.x/ picks up fixes and new components automatically but
never crosses a major, so a breaking change cannot arrive without someone changing
the URL on purpose. /vela-ds.js tracks every build instead, and
/version.json reports what is live.
The skill already contains everything below, so you should not normally need these. They exist for agents that cannot install a Claude Code plugin — point one at the catalog and it can look up any component without guessing.
Every component with its properties, slots, events, CSS parts and usage examples.
component-catalog.yamlThe reference and semantic token layers — colour, spacing, typography, radius.
tokens.yamlBoot order, theming, and the rules an agent should follow when wiring a page.
setup-guide.yaml