Ui Designer
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 \nContext: Starting a new app or feature design
- Type
- Plugin
- Repository
- ccplugins/awesome-claude-code-plugins
- GitHub stars
- 954
- License
- Apache-2.0
- Repo last updated
- Aug 12, 2026
- Source file
- plugins/ui-designer/.claude-plugin/plugin.json
- Version
- 1.0.0
- Author
- Michael Galpert
What Ui Designer is
Ui Designer is a plugin published in the ccplugins/awesome-claude-code-plugins repository on GitHub, which has about 954 stars. The repository describes itself as: “Awesome Claude Code plugins — a curated list of slash commands, subagents, MCP servers, and hooks for Claude Code”
A plugin is a package that bundles skills, slash commands, subagents, hooks, and MCP connectors so they install together. Plugins are plain files with a manifest at .claude-plugin/plugin.json, and they work in both Claude Code and Claude Cowork.
Installing Ui Designer adds everything it ships in one step. Connectors inside a plugin still need to be connected separately, and hooks and subagents only run in Cowork and Claude Code, not in regular chat.
How to install Ui Designer
Claude Code
- Add the repository as a plugin marketplace: claude plugin marketplace add ccplugins/awesome-claude-code-plugins
- Install the plugin: claude plugin install ui-designer@<marketplace-name>, using the marketplace name from the repository's .claude-plugin/marketplace.json.
- Restart the session if the new skills or commands don't appear straight away.
Claude Cowork
- Open Customize → Plugins and choose Add marketplace.
- Enter ccplugins/awesome-claude-code-plugins (the owner/repo shorthand works for GitHub).
- Find Ui Designer in the list, click Install, then connect any connectors it needs from its Connectors tab.
New to extending Cowork? Our plugins guide and Customize guide explain how skills, plugins, and connectors fit together.
Inside the source file
We couldn't retrieve the source file for this entry. Browse the repository on GitHub to find it and read the README before installing.
Before you install
- Read the whole file first. Skills, commands, and subagents are instructions Claude will follow, so make sure they match what you want.
- Check which tools, scripts, or MCP servers it uses. Local servers and scripts run with your permissions.
- Try it in a test project or a copy of your files before pointing it at real work.
- Pin the version you tested, and review changes before updating.
- Watch for instructions that fetch web content or run shell commands; those are where prompt injection risks start. See our prompt injection guide.
FAQ
What is Ui Designer?
Ui Designer is a plugin for Claude Code and Claude Cowork from the ccplugins/awesome-claude-code-plugins repository on GitHub. 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 \nContext: Starting a new app or feature design
How do I install Ui Designer in Claude Code?
Add the repository as a plugin marketplace: claude plugin marketplace add ccplugins/awesome-claude-code-plugins Install the plugin: claude plugin install ui-designer@<marketplace-name>, using the marketplace name from the repository's .claude-plugin/marketplace.json. Restart the session if the new skills or commands don't appear straight away.
Can I use Ui Designer in Claude Cowork?
Open Customize → Plugins and choose Add marketplace. Enter ccplugins/awesome-claude-code-plugins (the owner/repo shorthand works for GitHub). Find Ui Designer in the list, click Install, then connect any connectors it needs from its Connectors tab.
Is Ui Designer safe to install?
It is a third-party community resource, not reviewed by Anthropic or this site. Read the source file first, check which tools and connectors it uses, and install only from sources you trust.
Similar resources
- Debug Session Ask Claude Code to help you debug an issue Plugin · ccplugins/awesome-claude-code-plugins
- Debugger Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues. Plugin · ccplugins/awesome-claude-code-plugins
- Discuss Collaborative technical discussion with proactive requirements gathering Plugin · ccplugins/awesome-claude-code-plugins
- Devops Automator Use this agent when setting up CI/CD pipelines, configuring cloud infrastructure, implementing monitoring systems, or automating deployment processes. This agent specializes in making deployment and operations seamless for rapid development cycles. Examples:\n\n \nContext: Setting up automated deployments\nuser: "We need automatic deployments when we push to main"\nassistant: "I'll set up a… Plugin · ccplugins/awesome-claude-code-plugins
- Ultrathink Use /ultrathink to launch a Coordinator Agent that directs four specialist sub-agents—Architect, Research, Coder, and Tester—to analyze, design, implement, and validate your coding task. The process breaks the task into clear steps, gathers insights, and synthesizes a cohesive solution with actionable outputs. Relevant files can be referenced ad-hoc using @ filename syntax. Plugin · ccplugins/awesome-claude-code-plugins
- Trend Researcher Use this agent when you need to identify market opportunities, analyze trending topics, research viral content, or understand emerging user behaviors. This agent specializes in finding product opportunities from TikTok trends, App Store patterns, and social media virality. Examples:\n\n \nContext: Looking for new app ideas based on current trends\nuser: "What's trending on TikTok that we could… Plugin · ccplugins/awesome-claude-code-plugins
- Unit Test Generator Expert Flutter/Dart unit test specialist that systematically improves test coverage using automated workflows with strict validation, git management, and Aurigo corporate standards. Use for comprehensive test suite creation and coverage improvement. Plugin · ccplugins/awesome-claude-code-plugins
- Tool Evaluator Use this agent when evaluating new development tools, frameworks, or services for the studio. This agent specializes in rapid tool assessment, comparative analysis, and making recommendations that align with the 6-day development cycle philosophy. Examples:\n\n \nContext: Considering a new framework or library Plugin · ccplugins/awesome-claude-code-plugins