# SAP UI Theme Designer

> SAP's plugin for UI theme designer on SAP BTP: answers from SAP's docs, plus exact SAP Fiori design-token values and where UI5 uses them.

SAP's own plugin for coding agents working with UI theme designer on SAP BTP and the SAP Design System. It bundles two skills: one fetches the UI theme designer documentation live from help.sap.com, and the other reads SAP's published npm packages, so answers about SAP Fiori design tokens come from the source files rather than the agent's memory.

What you can do with it
- Look up a theming parameter's exact value in any standard theme (sap_horizon, sap_horizon_dark, sap_fiori_3, sap_belize and more), and compare it across themes
- Before you change a parameter, find every UI5 Web Components, SAPUI5/OpenUI5 and Fundamental Styles component that uses it
- See which parameters a component uses, to build a custom control that matches the SAP Design System
- List what changed between two themes, as a checklist for a migration
- Check whether a parameter is protected from customer overrides, and find custom CSS that a theming parameter now replaces
- Get answers from SAP's docs on setup, role collections, theme sets, publishing and transporting themes, SAPUI5 integration, service limits and what's new

How to install it
In Claude Code, run claude plugin install ui-theme-designer@claude-plugins-official: it's in Anthropic's official marketplace. GitHub Copilot installs it with copilot plugin install ui-theme-designer@awesome-copilot, and other agents can add the skills with npx skills add SAP/ui-theme-designer-plugins-for-coding-agents.

Good to know
- It needs no SAP software and no sign-in. The docs skill calls help.sap.com's public API with curl and jq.
- The design-tokens skill runs npm ci to download SAP's theming and UI framework packages when they're missing or more than seven days old, so it needs Node.js and npm.
- When you don't name a theme or framework, it uses sap_horizon and UI5 Web Components.

- Type: Plugin
- Made by: sap
- Category: Design
- Formats: Claude plugins
- Version: latest
- Website: https://github.com/SAP/ui-theme-designer-plugins-for-coding-agents
- Source: https://github.com/sap/ui-theme-designer-plugins-for-coding-agents/tree/HEAD/plugins/ui-theme-designer
- Page: https://pluginboard.ai/plugins/sap-ui-theme-designer

## Works with

- Claude
- GitHub Copilot
- Claude Code
- OpenClaw

## Install

### Claude

In Claude (web or desktop): Customize → Plugins → Add → Add marketplace, enter anthropics/claude-plugins-official, then add ui-theme-designer

### Claude Code

In Claude Code:

```text
/plugin marketplace add anthropics/claude-plugins-official
/plugin install ui-theme-designer@claude-plugins-official
```

---
From Pluginboard (https://pluginboard.ai).