Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By a-ng-d
Design color palettes, audit contrast, generate code, and sync to Figma, Penpot, Sketch, and Framer — powered by the UI Color Palette API
npx claudepluginhub a-ng-d/claude-ui-color-paletteSpecialized accessibility and palette quality auditor. Invoke for WCAG/APCA audits, global contrast scoring, risky pair detection, and remediation recommendations.
Specialized code and token export agent. Invoke when the user wants to export palette configuration as code (CSS, SCSS, Tailwind, DTCG, etc.) and optionally commit it to a repository.
Specialized agent for building a semantic color system on top of a primitive palette. Guides the user through taxonomy design, binding proposal, iterative refinement, and get_color_system submission. Requires PaletteData or base+themes in context.
Specialized palette lifecycle agent. Invoke for listing, retrieving, publishing, updating, sharing, unsharing, and deleting published palettes on the UI Color Palette platform.
Specialized transition agent from PaletteData to variables, tokens, styles, and document previews. Invoke for normalized projection and design-tool or artifact-oriented implementation workflows.
Entry point for UI Color Palette workflows targeting Penpot. Use to choose between tokens, styles, and board/document preview generation.
Build a full color palette from source colors. Uses get_palette to generate scales and themes, then previews the result visually. Use when the user wants to create a complete palette before auditing, exporting, or deploying it.
Entry point for UI Color Palette workflows targeting Sketch. Use to choose between swatches, shared styles, and document preview generation.
GitHub CLI (gh) comprehensive reference for repositories, issues, pull requests, Actions, projects, releases, gists, codespaces, organizations, extensions, and all GitHub operations from the command line.
Comprehensive GitLab CLI (glab) command reference and workflows for all GitLab operations via terminal. Use when user mentions GitLab CLI, glab commands, GitLab automation, MR/issue management via CLI, CI/CD pipeline commands, repo operations, authentication setup, or any GitLab terminal operations. Routes to specialized sub-skills for auth, CI, MRs, issues, releases, repos, and 30+ other glab commands. Triggers on glab, GitLab CLI, GitLab commands, GitLab terminal, GitLab automation.
External network access
Connects to servers outside your machine
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
This plugin requires configuration values that are prompted when the plugin is enabled. Sensitive values are stored in your system keychain.
gitlab_urlYour GitLab instance URL (e.g. https://gitlab.company.com). Leave empty if not using GitLab.
${user_config.gitlab_url}penpot_urlYour Penpot instance base URL. For Penpot Cloud use https://design.penpot.app. For self-hosted, use your own domain (e.g. https://penpot.company.com).
${user_config.penpot_url}penpot_tokenYour Penpot user token. Find it in Penpot → Account → Integrations → MCP Server.
${user_config.penpot_token}framer_mcp_urlYour Framer MCP URL from the Framer marketplace plugin.
${user_config.framer_mcp_url}Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Memory compression system for Claude Code - persist context across sessions
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Multi-model consensus engine integrating OpenAI Codex CLI, Gemini CLI, and Claude CLI for collaborative code review and problem-solving.
Streamline people operations — recruiting, onboarding, performance reviews, compensation analysis, and policy guidance. Maintain compliance and keep your team running smoothly.
A Claude Code plugin that brings color palette design, contrast auditing, code generation, and design tool synchronization directly into your AI-assisted workflow.
| Skill | Description |
|---|---|
generate-source-colors | Generate source colors from an image (k-means), a text prompt (AI), or a base color (harmony) |
scale-palette | Build a full palette with get_palette and export as code/tokens (CSS, Tailwind, SwiftUI, DTCG, …) |
build-color-system | Define a semantic token taxonomy and bind it to palette primitives via get_color_system |
manage-palettes | Browse, publish, share, update, and delete palettes on the platform |
audit-palette | Audit color pairs for WCAG 2.1 and APCA compliance with a global contrast score |
| Skill | Description | Source |
|---|---|---|
gh-cli | GitHub CLI (gh) comprehensive reference for all GitHub operations | github/awesome-copilot |
gitlab-cli-skills | GitLab CLI (glab) command reference and workflows | vince-winkintel/gitlab-cli-skills |
The plugin connects to the following MCP servers:
| Server | Transport | URL | Notes |
|---|---|---|---|
| UI Color Palette | HTTP | https://mcp-uicp.yelbolt.workers.dev/mcp | Core palette engine |
| Figma | HTTP | https://mcp.figma.com/mcp | Remote Figma API |
| Figma Desktop | HTTP | http://127.0.0.1:3845/mcp | Local Figma app |
| Penpot | HTTP | ${penpot_url}/mcp/stream?userToken=… | URL via penpot_url · token via penpot_token |
| Sketch | HTTP | http://localhost:31126/mcp | Requires activation in Sketch |
| Framer | HTTP | User-specific URL | Requires Framer MCP plugin |
| GitHub | HTTP | https://api.githubcopilot.com/mcp/ | Issues, PRs, repos |
| GitLab | HTTP | https://<instance>/api/v4/mcp | User-specific instance URL |
The plugin uses uicper as the default agent.
It acts as the top-level orchestrator for multi-step workflows such as:
The orchestrator delegates specialized work to focused sub-agents:
palette-color-systemer — guided semantic color system design: taxonomy pattern suggestion, intelligent binding proposals, iterative refinement, and get_color_system submissionpalette-auditor — WCAG/APCA audits, risk detection, remediation guidancepalette-codegen — normalized projection and code/token generationpalette-publisher — published palette retrieval, publication, update, visibility, deletionpalette-transitioner — transition from PaletteData to variables, tokens, styles, swatches, and preview/document artifactsThe default agent is configured in settings.json:
{
"agent": "uicper"
}
Step 1 — Add the marketplace (once per machine):
/plugin marketplace add yelbolt/claude-marketplace
Step 2 — Install the plugin:
/plugin install ui-color-palette@yelbolt
/plugin marketplace update yelbolt
/plugin install github:a-ng-d/claude-ui-color-palette
claude --plugin-dir ./claude-ui-color-palette