Building with AI

Both TEDI libraries ship an agent skill that teaches an AI coding agent how to build UIs with TEDI in your own application, so generated code uses real TEDI components and tokens instead of approximations that have to be rewritten by hand.

This page is about writing application code. For prototyping screens, see Designing with AI.

The skills

Skill	Library	Covers
tedi-react	@tedi-design-system/react	Component usage, forms integration, theming
tedi-angular	@tedi-design-system/angular	Component usage, forms integration, theming, translation setup

Unlike the AI design tools, the skills cover both frameworks.

Each skill carries reference material the agent reads on demand, covering components, forms and theming, so it grounds its answers in the real component API rather than guessing.

Installing

Install with the skills CLI, into Claude Code, Cursor, Codex or another agent that supports skills:

npx skills add https://github.com/tedi-design-system/react --skill tedi-react

npx skills add https://github.com/tedi-design-system/angular --skill tedi-angular

Install only the skill for the framework you are using. Both are published: tedi-react and tedi-angular.

See also

• Designing with AI for prototyping with Claude Design and Figma Make
• Contributor workflow for the skills used to change TEDI itself