Intro

We're bringing the SAP Design System into your favorite AI tools. This new skill brings our web design guidelines directly into Claude Code, GitHub Copilot, Cursor, and Cline, so developers get smarter suggestions and faster workflows.

A heads-up: This skill is experimental and still evolving. We hope it will improve your AI-assisted development, but it's not a replacement for human expertise. We recommend using it to accelerate your work, then having your team review and validate the results to ensure everything meets standards.

Installation

Follow the three steps below to install the SAP Design System skill (use the command line or copy and paste this into your AI tool and let it install for you).

1. Create a new folder on your computer where you want to keep the skill (mkdir design-skills).
2. Clone the skill from our repository (git clone https://github.tools.sap/SAPDesign/SAPDesignSystemSkill.git) or download it manually here: https://pages.github.tools.sap/SAPDesign/SAPDesignSystemSkill/SAPDesignSystemSkill.zip
3. Run: npx skills add ./SAPDesignSystemSkill -g –y

Get Started

To use the SAP Design System skill, just start a new conversation and ask anything related to SAP Fiori design. It will trigger automatically based on keywords, for example:

• "Fiori", "SAPUI5", "UI5"
• "SAP button", "SAP form", "SAP table"
• "object page", "list report"
• "SAP design system"

Example prompts

Here are some examples of prompts that will trigger the skill:

• "How should I implement buttons in a Fiori app?"
• "What's the correct way to handle messages in SAPUI5?"
• "Design an object page for a sales order"
• "What semantic colors should I use for status indicators?"