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-skillFrontend design taste skills including brutalist, minimalist, soft, redesign, stitch, and more
Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.
Production-grade frontend interfaces that avoid generic AI aesthetics. Based on Anthropic's Frontend Designer Skill with bold creative commitment.
Connect Claude Code to TypeUI MCP for curated design systems, UI prompts, and layout variations.
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.
Write feature specs, plan roadmaps, and synthesize user research faster. Keep stakeholders updated and stay ahead of the competitive landscape.