Frontend UI Design Agents Collection 🎨

A curated collection of Claude prompts for frontend development. Ready-to-use prompts for UI/UX design, web development, and frontend components.

📂 Structure

prompts/
├── ui-design/           # UI design prompts
├── web-development/     # Web development prompts  
├── components/          # Component development prompts
├── ux-research/         # UX research and usability prompts
├── animation/           # CSS/JS animation prompts
├── responsive/          # Responsive design prompts
└── accessibility/       # Accessibility prompts

🚀 How to Use

1. Choose a prompt from the relevant category
2. Paste the prompt into Claude
3. Customize for your specific project needs

📝 Prompt Format

Each prompt follows this agent-style structure:

---
name: [agent-name]
description: Use this agent when you need [expertise area]. Examples: [usage examples]
model: sonnet
---

# Prompt Title
**Category:** [category-name]
**Difficulty:** Beginner/Intermediate/Advanced
**Tags:** #ui #design #react #css

## Description
[Description of what the prompt does]

## Prompt
[The actual prompt text]

## Example Usage
[Example of how to use the prompt]

## Sample Results
[Examples of what the prompt might generate]

🤝 Contributing

To contribute to this open source project:

1. 🍴 Fork the repository
2. 🌿 Create a new branch
3. ✨ Add new prompts or improve existing ones
4. 📋 Open a pull request

For detailed contribution guidelines, please see CONTRIBUTING.md.

📋 Contribution Guidelines

• ✅ Include clear example usage
• ✅ Place in correct category
• ✅ Use clear and understandable language
• ✅ Follow the established prompt format
• ✅ Test prompts before submitting
• ✅ Include relevant tags

📄 License

This project is licensed under the MIT License. See LICENSE for details.

🌟 Available Prompts

🎨 UI Design (3 prompts)

• Design System Generator: Comprehensive design systems with tokens and components
• Universal UI/UX Design Methodology: Adaptive design methodology for any project type
• Mobile Design Philosophy: Apple-level mobile design with touch interfaces

⚛️ Components (1 prompt)

• React Component Architect: Modern TypeScript React components with accessibility

🌐 Web Development (1 prompt)

• CSS Architecture Specialist: Scalable CSS organization for large projects

🔍 UX Research (1 prompt)

• User Persona Creator: Data-driven personas for product development

🎭 Animation (1 prompt)

• Micro-Interactions Expert: Performance-optimized UI animations

📱 Responsive (1 prompt)

• Mobile-First Layout Expert: Responsive layouts optimized for mobile devices

♿ Accessibility (1 prompt)

• ARIA Implementation Specialist: WCAG-compliant accessibility for complex UI components

📞 Contact

Use GitHub Issues for questions and suggestions.

⭐ Don't forget to star if you find it useful!