frontend-design

productdesigner

designClaude Codeby Adam Jolicoeur

Summary

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

Install to Claude Code

/plugin install frontend-design@productdesigner

Run in Claude Code. Add the marketplace first with /plugin marketplace add AdamJ/productdesign-marketplace if you haven't already.

README.md

Productdesigner Marketplace

A marketplace of Claude Code skills for product designers and product managers.

All skills are authored from real product design and development workflows. Install the full set or pick only what you need.

Installation

Add the marketplace to Claude Code:

/plugin marketplace add AdamJ/productdesign-marketplace

Then install individual skills:

/plugin install frontend-design@productdesigner
/plugin install accessibility-audit@productdesigner
/plugin install interactive-arch-diagram@productdesigner
/plugin install mcp-builder@productdesigner
/plugin install mcp-server-scaffolding@productdesigner
/plugin install portfolio-case-study-writer@productdesigner
/plugin install syncing-project-documentation@productdesigner
/plugin install organizational-docs-writer@productdesigner

Or browse and select from the /plugin UI in Claude Code under the Discover tab.

Available Skills

| Plugin name | Description | Category | | --- | --- | --- | | frontend-design | Production-grade UI with high design quality; avoids generic AI aesthetics | Design | | accessibility-audit | WCAG 2.1 AA audit with prioritized, code-level remediation checklist | Design | | interactive-arch-diagram | Self-contained interactive HTML architecture diagrams with zoom and detail panels | Development | | mcp-builder | Guide for building high-quality MCP servers in Python or TypeScript | Development | | mcp-server-scaffolding | Scaffold MCP server projects with correct schema and deployment config | Development | | portfolio-case-study-writer | Write and refine portfolio case studies for designers and PMs | Documentation | | syncing-project-documentation | Keep README, CLAUDE.md, and CHANGELOG in sync after changes | Documentation | | organizational-docs-writer | Create and update org docs with consistent formatting and house style | Documentation |

Managing the Marketplace

Once installed, manage plugins from within Claude Code:

1. Run /plugin to open the plugin manager. 2. Go to the Marketplaces tab and select productdesigner. 3. Enable auto-updates to stay current as skills are added or revised. 4. To remove the marketplace: select Remove marketplace in the plugin manager.

Licensing

All skills are subject to their original licensing, where applicable.

Original skills copyright 2026 Adam J. Jolicoeur — MIT License

Related plugins

Browse all →