IONOS Web Design System plugins for Claude Code
npx claudepluginhub ionos-web-design-system/uds-orchestratorClaude Code plugin for the IONOS Universal Design System (UDS). Project setup, component/token best practices, Figma-to-code orchestration, and browser verification.
IONOS-Web-Design-SystemClaude Code plugin for the IONOS Universal Design System (UDS). Orchestrates the full UDS development workflow: project setup, component/token best practices, Figma-to-code translation, and browser-based verification.
Option A: Via marketplace (recommended for teams)
# Inside Claude Code, run:
/plugin marketplace add IONOS-Web-Design-System/uds-orchestrator
# Then install the plugin:
/plugin install uds-orchestrator@ionos-uds
Installation scopes:
user): Available in all your projects (~/.claude/settings.json)--scope project: Shared with team via version control (.claude/settings.json)--scope local: This machine only (.claude/settings.local.json)For team-wide adoption, use --scope project so every collaborator gets the plugin automatically.
Option B: Direct install from GitHub
/plugin install uds-orchestrator@IONOS-Web-Design-System/uds-orchestrator
Updating:
/plugin update uds-orchestrator@ionos-uds
# Clone the repo
git clone [email protected]:IONOS-Web-Design-System/uds-orchestrator.git
cd uds-orchestrator
# Test the plugin in a Claude Code session (loads for that session only)
claude --plugin-dir .
# Or from another project directory:
claude --plugin-dir /path/to/uds-orchestrator
# Inside the Claude Code session, verify:
# - Skills appear: ask about UDS components / project setup / React performance
# - Commands work: /uds-component button, /uds-audit, etc.
# - MCP loads: Playwright MCP should be available
# To pick up changes without restarting:
/reload-plugins
| Command | Description |
|---|---|
/uds-setup <brand> [platform] | Scaffold a new project with UDS + Tailwind CSS v4 |
/uds-audit | Audit an existing project for UDS configuration issues |
/uds-figma-build <figma-url> | Build UDS React code from a Figma design URL |
/uds-verify <figma-url> | Verify implementation against a Figma design |
/uds-component <name> | Quick component reference lookup |
/uds-setup ionos comfortable
/uds-audit
/uds-figma-build https://figma.com/design/ABC123/MyDesign?node-id=1-2
/uds-verify https://figma.com/design/ABC123/MyDesign?node-id=1-2
/uds-component button
The plugin includes three skills that activate automatically based on context:
Comprehensive reference for building UIs with UDS components and tokens. Activates when you're working with UDS components, design tokens, Figma-to-code translation, or anything involving @ionos-web-design-system.
Project scaffolding and configuration. Activates when setting up a new UDS project, configuring CSS/Tailwind, or troubleshooting missing styles.
React and Next.js performance optimization guidelines from Vercel Engineering. Activates when writing, reviewing, or refactoring React/Next.js code for performance.
The Figma MCP is platform-managed by Claude Code. No configuration needed in this plugin — it's available automatically when connected.
To authenticate:
Configured in this plugin's .mcp.json. Used for browser-based verification.
Requirements:
npx execution)npm run dev)| Brand | CSS Import Key |
|---|---|
| IONOS | ionos |
| STRATO | strato |
| Fasthosts | fasthosts |
| home.pl | homepl |
| Strefa | strefa |
| UDAG | udag |
| World4You | world4you |
| Arsys | arsys |
Apache 2.0 — see LICENSE.