design-suite-claude-skills

🥈Silver

Suite of three Claude skills for digital product design: research personas and insights, explore visual concepts, and design components within existing design systems.

810Updated 1mo ago

Intermediate30min to implementautomation

Saves ~180 min per use

Quick InstallView Source

git clone https://github.com/mevans2120/design-suite-claude-skills.git

Works with:

Claude

Overview

About This Skill

Design Suite is a workflow automation for digital product design that guides you through research, conceptual exploration, and component design. The research skill uses Jobs-to-be-Done methodology to create personas, customer segments, and design principles. The concepts skill conducts design intent interviews and generates three meaningfully different visual directions with mood boards. The components skill designs variations within your existing design system, using actual tokens and primitives. Teams use this suite to systematize design decisions, reduce iteration cycles, and maintain design system consistency across projects.

How to Use

Clone the repository and run `./install.sh` to install all three skills, or manually create symlinks in ~/.claude/skills/. Skills load automatically based on conversation context, or trigger directly by asking for personas, mockups, or component variations. Customize behavior by editing SKILL.md files to add brand guidelines or modify methodologies.

Use Cases

Create user personas and design principles from research data

Generate three concept variations with mood boards for a new feature

Design card, hero, and section components using existing design tokens

Conduct competitive analysis and accessibility audits for components

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/mevans2120/design-suite-claude-skills

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Act as a digital product design assistant. I'm working on a project for [COMPANY] in the [INDUSTRY] industry. I need help with [SPECIFIC DESIGN TASK, e.g., 'user research', 'wireframing', 'prototyping', or 'design QA']. Here's the [DATA/INFORMATION] I have so far. Can you guide me through the process and provide actionable insights or deliverables?

Example Output

# Digital Product Design Assistance

## User Research Findings

Based on the data provided about [COMPANY]'s target audience in the [INDUSTRY] sector, here are the key insights:

- **Primary Pain Points**:
  - Difficulty navigating complex interfaces
  - Lack of personalized content
  - Slow loading times on mobile devices

- **User Preferences**:
  - Prefer minimalist design with clear calls-to-action
  - Value quick access to customer support
  - Enjoy interactive elements and gamification

## Recommendations for Design Concept

1. **Simplify Navigation**: Implement a clean, intuitive menu structure with clear labels.
2. **Personalization**: Integrate user accounts to save preferences and provide tailored content.
3. **Mobile Optimization**: Ensure all pages load within 2 seconds on mobile devices.
4. **Interactive Elements**: Incorporate micro-interactions and gamification to enhance user engagement.
5. **Support Accessibility**: Place a prominent 'Help' button in the header for quick access to customer support.

## Next Steps

- Create wireframes based on the above recommendations.
- Conduct usability testing with a small group of target users.
- Iterate on the design based on feedback.

Would you like to proceed with wireframing or any other specific task?