Claude Code Plugins

Community-maintained marketplace

Feedback

design-assistant

@campbellmcgregor/claude-skills-repo
0
30

Expert graphic, UI/UX designer for creating mockups, wireframes, and visual designs. Use when user needs help with designing interfaces, creating mockups, prototyping layouts, visual design feedback, design systems, brand identity, choosing colors/typography, or creating graphics. Triggers include "design," "mockup," "wireframe," "UI," "UX," "interface," "visual," "brand," or "prototype.

Install Skill

Shared

Installs to .agents/skills, used by Codex, Amp, Warp, Cursor, OpenCode, and more.

CodexAmp
WarpCursorOpenCode
ClineGemini CLI
GitHub Copilot
Personal

Available across projects.

$npx skills-installer add @campbellmcgregor/claude-skills-repo/design-assistant --client shared
Project

Writes to .agents/skills.

$npx skills-installer add @campbellmcgregor/claude-skills-repo/design-assistant -p --client shared
Note: Review the skill instructions before using it.

SKILL.md

name design-assistant
description Expert graphic, UI/UX designer for creating mockups, wireframes, and visual designs. Use when user needs help with designing interfaces, creating mockups, prototyping layouts, visual design feedback, design systems, brand identity, choosing colors/typography, or creating graphics. Triggers include "design," "mockup," "wireframe," "UI," "UX," "interface," "visual," "brand," or "prototype."

Design Assistant

Expert design support for graphics, UI/UX, and visual mockups.

Core Workflow

  1. Clarify the goal - Understand the design purpose and constraints
  2. Choose the right approach - Select tool/format based on needs
  3. Apply design principles - Use fundamentals from references/
  4. Create and iterate - Build mockup, gather feedback, refine

When to Use What

React artifacts (.jsx) - Interactive prototypes, functional demos
HTML artifacts - Static mockups, landing pages, simple interfaces
SVG artifacts - Icons, logos, vector graphics
Canvas/code - Data visualizations, diagrams, illustrations

Quick Start Patterns

UI Mockup

  1. Understand requirements (platform, users, key actions)
  2. Sketch layout structure (header, content, actions)
  3. Apply spacing/typography (see references/ui-principles.md)
  4. Add visual hierarchy and affordances
  5. Create in React/HTML with Tailwind

Graphic Design

  1. Define purpose (brand, marketing, illustration)
  2. Establish visual direction (modern, playful, professional)
  3. Choose color palette (see references/color-theory.md)
  4. Create using SVG or canvas-based code
  5. Iterate based on feedback

Design System Component

  1. Review existing patterns if available
  2. Design with consistency in mind
  3. Include states (default, hover, active, disabled)
  4. Document usage guidelines
  5. Build reusable component

Key Principles

Visual Hierarchy - Most important elements should be most prominent
Consistency - Maintain patterns across the design
Spacing - Use consistent spacing scales (4px/8px grid)
Accessibility - Minimum contrast, touch targets, keyboard nav
Responsiveness - Design for multiple screen sizes

Reference Files

  • references/ui-principles.md - UI/UX fundamentals and best practices
  • references/color-theory.md - Color selection and palette creation
  • references/typography.md - Font pairing and text hierarchy

Load these as needed when deep expertise is required.