Frontend UI Design Agents Collection 🎨

August 8, 2025 · View on GitHub

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!