Audits, refines, and builds polished frontend UI using real-world design patterns, brand-appropriate color palettes, and anti-pattern detection — makes AI-generated visuals less generic.
Plug-and-play MCP for UI superpowers. Use when building, designing, redesigning, refactoring, polishing, auditing, or enhancing any web or app user interface — landing pages, marketing sites, dashboards, product UI, components, forms, or design systems. Use when an interface looks generic or "AI-made", or needs better typography, color, spacing, layout, hierarchy, motion, accessibility, or performance. For any coding agent doing frontend visual work. Not for backend logic, data pipelines, CLI tools, or non-UI code.
Wrap raster logos (webp, png, jpg) in self-contained SVG files via base64 embedding for pixel-perfect matches. Use when creating logo SVGs, converting webp/png to svg, fixing hand-drawn logos that do not match the source, or preparing plugin/README logo assets without a vector source file.
Release designer-skill-mcp to npm with a git tag and GitHub release. Use when the user asks to ship, publish, cut a release, bump version, push tags, or run npm publish for designer-skill-mcp.
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.
Plug-and-play MCP. UI superpowers for your agent.
Overview · Setup · Reference · Tools · Development
npm i designer-skill-mcp
Route
|
Know13 reference files cover type, color, motion, a11y, anti-slop, and redesign loops. Your agent reads the right file before writing UI code. |
CheckA 44-rule deterministic detector plus |
designer-skill-mcp is a small MCP server you add in one line. Your agent gets design tools, reference docs, and a ship gate so UI work stops looking generic.
flowchart LR
A[Your prompt] --> B[dispatch_intent]
B --> C[get_reference]
C --> D[Build / polish UI]
D --> E[anti_slop_checklist]
E --> F[Ship]
style A fill:#f8fafc,stroke:#94a3b8,color:#18181b
style B fill:#eff6ff,stroke:#3b82f6,color:#1e3a8a
style C fill:#faf5ff,stroke:#7c3aed,color:#4c1d95
style D fill:#fff7ed,stroke:#e87a3d,color:#7c2d12
style E fill:#ecfdf5,stroke:#10b981,color:#065f46
style F fill:#f1f5f9,stroke:#64748b,color:#0f172a
Add the server. Ask in plain language. The agent handles the rest.
One install gets both the skill and the MCP server:
/plugin marketplace add Pythoughts-labs/designer-skill
/plugin install designer-skill@pythoughts-labs
Codex CLI:
codex plugin marketplace add Pythoughts-labs/designer-skill
Then install designer-skill from the pythoughts-labs marketplace in /plugins. The skill appears as designer-skill:designer-skill.
Cursor: install from the marketplace (or open this repo). Plugin ships mcp.json, skills, and /designer-setup · /designer-status commands.
Same one-liner everywhere. No API key. Repo-root mcp.json is the canonical MCP config (plugins reference it too):
{
"mcpServers": {
"designer-skill": {
"command": "npx",
"args": ["-y", "designer-skill-mcp@latest"]
}
}
}
Updates: @latest for newest npm; pin @0.10.0 for teams. Plugin skill content updates separately (/plugin update …). Registry: io.github.pythoughts-labs/designer-skill-mcp (publish via mcp-publisher after npm release).
npx claudepluginhub pythoughts-labs/designer-skill --plugin designer-skillStandalone 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.
Write feature specs, plan roadmaps, and synthesize user research faster. Keep stakeholders updated and stay ahead of the competitive landscape.
Memory compression system for Claude Code - persist context across sessions
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
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.