Claude Code plugin for the IONOS Universal Design System (UDS). Project setup, component/token best practices, Figma-to-code orchestration, and browser verification.
Interactively formulate a UDS visual-asset brief and (optionally) submit it to the uds-moderator
Audit 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
Best practices for Remotion - Video creation in React
Classify a visual-asset brief into image / illustration / hybrid mode and decompose it into coordinated sub-briefs with one shared creative context. Used by the uds-moderator service's plan step — never produces code or images, only a single ===PLAN=== block.
Generate brand-aware photoreal imagery and transparent-background cutouts for IONOS brands from a natural-language brief. Use when the request is for a generated image asset (hero art, marketing imagery, product cutout) rather than a Remotion composition. Produces a structured image-generation prompt — never code. Composes with uds-style-guide for the brand palette and identity.
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.
Multi-brand style guide for the IONOS Universal Design System. Use whenever the user asks about brand colors, typography, design language, visual identity, color palette, or brand elements for any of the 8 UDS brands — even if code isn't mentioned. Triggers on: "brand colors", "brand font", "brand style", "design guidelines", "color palette", "illustration style", "creative direction", "brand identity", "which colors should I use", "brand typography", "IONOS blue", "Overpass", "Open Sans", "Poppins", "Nunito Sans", "Lato", "Inter", "strato colors", "fasthosts brand", "homepl style". For component usage and CSS token code patterns, see uds-usage-best-practices.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
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 [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.
npx claudepluginhub ionos-web-design-system/uds-orchestrator --plugin uds-orchestratorComprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Complete UI/UX design system for React Native & Next.js with 4 core skills
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
Design System compliance harness for Claude + Figma. Enforces library-first components, token binding, and automated QA — so AI-generated designs stay on-spec.
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).
Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.