Claude Code Plugins

Community-maintained marketplace

Feedback

design-assistant

@campbellmcgregor/claude-skills-repo
0
0

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

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its 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.