Agent Plugins Marketplace
← All plugins

design

v1.2.0

Diagrams, teaching and UI craft: tutor (explain anything as a picture-first lesson), artifact-visual-system, excalidraw, diagram-conventions, proposal-artifact, redesign-existing-projects, web-design-guidelines and the two Vercel React/Next.js guides.

Claude Code8 Skills

By NightZpyLicense: MIT0 GitHub starsUpdated 1 hour ago

Directory evidence

Runtimes
Claude Code
Parsed components
8 skill or MCP entries
Source updated
Sep 28, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install design for Claude Code

Installs for the current user
claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install design-6@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/NightZpy/claude-skills

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/design/.

Plugin files

plugins/design/
├── .claude-plugin/plugin.json
├── skills/diagram-conventions/SKILL.md
├── skills/excalidraw/SKILL.md
├── skills/proposal-artifact/SKILL.md
├── skills/redesign-existing-projects/SKILL.md
├── skills/tutor/SKILL.md
├── skills/vercel-composition-patterns/SKILL.md
├── skills/vercel-react-best-practices/SKILL.md
└── skills/web-design-guidelines/SKILL.md

Included Skills8

diagram-conventionsskills/diagram-conventions/SKILL.md

Use when creating or editing ANY diagram (Mermaid or Excalidraw) - when to use sequence vs flow diagrams, Excalidraw typography per use case, and the black-background rule with contrast guidance.

excalidrawskills/excalidraw/SKILL.md

Generate architecture diagrams as .excalidraw files from codebase analysis, with optional PNG/SVG export. Use when the user asks to create architecture diagrams, system diagrams, visualize codebase structure, generate excalidraw files, export excalidraw diagrams to PNG or SVG, or convert .excalidraw files to image formats.

proposal-artifactskills/proposal-artifact/SKILL.md

Use when the user wants to turn a problem or topic into a polished, shareable HTML artifact that explains the problem and lays out proposed solutions with faithful product mockups, and have it documented. Triggers: "make/create a proposal artifact about X", "hazme un artifact/doc de propuesta", "documenta este problema con propuestas y mockups", "turn this into a shareable proposal page", "pitch this as a designed doc", or when explaining-a-problem-and- proposing-solutions should become a designed, link-shareable page rather than a wall of chat text.

redesign-existing-projectsskills/redesign-existing-projects/SKILL.md

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

tutorskills/tutor/SKILL.md

Use when the user asks how something works, asks to be taught or walked through a concept, system, codebase, algorithm or tool, types /tutor or /eli5, or says "explain", "explícame", "cómo funciona", "no entiendo", "show me". Also use when about to answer any explanatory question, before writing the explanation.

vercel-composition-patternsskills/vercel-composition-patterns/SKILL.md

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

vercel-react-best-practicesskills/vercel-react-best-practices/SKILL.md

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

web-design-guidelinesskills/web-design-guidelines/SKILL.md

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Plugin manifests1

plugins/design/.claude-plugin/plugin.json
{
  "name": "design",
  "version": "1.2.0",
  "description": "Diagrams, teaching and UI craft: tutor (explain anything as a picture-first lesson), artifact-visual-system, excalidraw, diagram-conventions, proposal-artifact, redesign-existing-projects, web-design-guidelines and the two Vercel React/Next.js guides.",
  "author": {
    "name": "NightZpy"
  },
  "homepage": "https://github.com/NightZpy/claude-skills",
  "license": "MIT"
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[design on Agent Plugins Marketplace](https://pluginsmp.com/plugins/design-6)