Claude Code plugin for the IONOS Universal Design System (UDS). Project setup, component/token best practices, Figma-to-code orchestration, and browser verification.
npx claudepluginhub ionos-web-design-system/uds-orchestrator --plugin uds-orchestratorAudit an existing project for UDS configuration issues
Quick reference lookup for a UDS component
Build UDS React code from a Figma design URL
Scaffold a new project with UDS (Universal Design System) + Tailwind CSS v4
Verify UDS implementation against a Figma design
UDS project scaffolding, CSS configuration, and audit workflow. Use when the user asks to set up a new project with UDS, configure Tailwind v4 with UDS tokens, troubleshoot missing styles or tokens not resolving, audit an existing project for UDS configuration issues, or when mentions of UDS install, CSS imports, data-brand, data-platform, or data-color-scheme appear. Does NOT trigger on component usage or Figma-to-code — see uds-usage-best-practices.
Comprehensive reference for implementing UIs with the UDS (Universal Design System). Use when the user asks to build, implement, or code a UI using UDS components, look up component usage, understand design tokens, or when the user mentions UDS, design system components, or theming. Also use when translating Figma designs to UDS React code, verifying implementations against Figma, debugging theme or token issues, or whenever "@ionos-web-design-system" appears in code. Triggers on mentions of ThemeProvider, ThemeInverter, Surface, design tokens, spacing tokens, or multi-brand theming. Does NOT trigger on project setup — see uds-project-setup.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Claude 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 git@github.com: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.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Share bugs, ideas, or general feedback.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Compiler-driven design generation in Figma — 100% design system compliant. Compiles component specs into verified Figma output via MCP.
UX co-pilot — conversational UX designer with live preview. 376 rules, 161 palettes, 57 font pairings, 67 styles. Phases: Discovery (ABCD questions), Audit (code scan + scored report), Preview (local server + named versions), Export (spec + React/Svelte/Vue components).
Premium design patterns, UX research skills, and user journey mapping for modern web applications.
Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.