Getting Started with AI
The Kendo Design AI plugin brings the Kendo Design System directly into your AI coding agent — design tokens, typography, spacing, color, elevation, and accessibility guardrails — so the UI your agent generates is consistent, accessible, and production-ready by default.
This page is for setting up that agentic workflow. If you're a designer or developer who wants to learn the system itself, start with the foundation articles instead.
Exploring the design system by hand? Read the foundation guides — Color, Typography, Spacing, Elevation, Border Radius, Iconography, and Motion — for the principles, tokens, and usage guidance behind every component.
What Your Agent Gets
Installing the plugin gives your agent the kendo-design skill — it applies
the Kendo Design System to UI work: design tokens, visual guidelines, spacing
rhythm, and accessibility guardrails.
The plugin also bundles the kendo-themes skill for the styling layer —
installing theme packages, CSS/SCSS tokens, swatches, and Tailwind mapping. For
that side of things, see Getting started with themes and AI.
Installation
The plugin is distributed through the telerik/ai-plugins marketplace. The
easiest way is to let your agent install it — it knows how to do this in its own
environment. Just ask:
Install the kendo-design plugin from the telerik/ai-plugins marketplace.Newly installed plugins load when a session starts, so you may need to restart or reload your agent before the skill becomes active.
Prefer to install it yourself?
Add the marketplace once, then install the kendo-design plugin. Pick your agent
below.
Claude Code
/plugin marketplace add telerik/ai-plugins
/plugin install kendo-design@telerik-ai-pluginsGitHub Copilot CLI
copilot plugin marketplace add telerik/ai-plugins
copilot plugin install kendo-design@telerik-ai-pluginsVS Code Copilot
Agent Plugins is a preview feature — it requires VS Code 1.100+ with
chat.plugins.enabled: true. Add the marketplace to your settings.json:
"chat.plugins.marketplaces": ["telerik/ai-plugins"]Then open the Extensions view, browse @agentPlugins, find kendo-design, and
click Install.
Your First Prompt
The skill usually triggers on its own from natural language, but prefixing your
message with /kendo-design invokes it explicitly — a reliable way to make sure
it runs. Just tell your agent what you're building:
I'm starting a new app and want to use the /kendo-design for the UI. Can you set it up?Your agent sets up the design foundation and saves a DESIGN.md at the root of
your project, so every screen it builds — now and in later sessions — follows
the same tokens, typography, spacing, color, and accessibility rules.
What's a DESIGN.md? It's an open
format for describing a design
system to coding agents — machine-readable design tokens in YAML front matter,
plus the human-readable rationale for how to apply them. The Kendo Design
System ships as a DESIGN.md, so your agent gets an exact, structured spec.
Already have an app? Adopt the design system into an existing codebase and keep the parts that make it yours:
Let's standardize on the /kendo-design moving
forward — just persist our existing brand colors and typography.Your agent maps your existing choices onto the system's tokens and adapts the
DESIGN.md so your brand stays intact while everything else falls in line with
Kendo.
Just exploring? Ask the design system directly — no project changes, just answers:
What color should a card's border be according to /kendo-design?Great for learning the reasoning behind the tokens: color roles, spacing rhythm, type scale, and the accessibility rules baked into the system.
For applying and customizing the Kendo themes themselves — theme packages, CSS/SCSS tokens, swatches, and Tailwind — see Getting started with themes and AI.
