Pony-Alpha-2-Dataset-Training/datasets/11-ui-ux-design

UI/UX Design Dataset

Overview

This dataset contains 72 comprehensive training examples for teaching AI models expert-level UI/UX design principles. Each example includes practical scenarios, applicable design principles, detailed solutions, code implementations, and WCAG accessibility considerations.

File Information

• Location: /c/Users/admin/Pony-Alpha-2-Dataset-Training/datasets/11-ui-ux-design/ui-ux-design.jsonl
• Format: JSONL (JSON Lines)
• Size: 83.5 KB
• Examples: 72

Dataset Structure

Each training example is a JSON object with the following fields:

{
  "category": "Design area covered",
  "scenario": "The design challenge or use case",
  "principles_applied": ["List of design principles"],
  "solution": "Detailed design approach",
  "code_example": "CSS/HTML/Tailwind implementation",
  "accessibility_notes": "WCAG compliance considerations"
}

Categories Covered

Visual Design (34 examples)

Color Theory (8 examples)

• Minimal palettes, bold high-contrast, earthy natural, neon cyberpunk
• Pastel dreamy, monochromatic blue, warm autumn, luxurious gold

Typography (10 examples)

• Modern tech blog, e-commerce fashion, SaaS dashboard, creative agency
• Legal services, children's educational, restaurant menu, fitness app
• Architecture portfolio, non-profit organization

Spacing Systems (5 examples)

• 4px baseline grid, 8px spacing scale, fluid responsive spacing
• Modular scale typography, mobile touch interface spacing

Shadow and Depth (4 examples)

• Material Design elevation system, neumorphic soft UI
• Glassmorphism blur effects, colored shadow systems

Border Radius and Shape (3 examples)

• Consistent border radius scale, superellipse/squircle shapes
• Brutalist mixed radius patterns

Layout Patterns (16 examples)

Responsive Grids (4 examples)

• 12-column CSS Grid with auto-fit, container query layouts
• Masonry image galleries, bento box dashboard widgets

Dashboard Layouts (4 examples)

• Classic sidebar navigation, top navigation with mega menu
• Bento grid analytics, multi-tab dashboard with view switching

Landing Pages (4 examples)

• Product-focused hero with feature grid, split-screen lead generation
• Long-scroll storytelling, video-first product demo

E-commerce (4 examples)

• Product grid with filtering, product detail page gallery
• Shopping cart with quantity controls, multi-step checkout

Form Layouts (4 examples)

• Single column with floating labels, multi-step form with progress
• Inline validation form, complex conditional form with sections

Component Design (13 examples)

• Buttons: Complete button system with variants and states
• Cards: Content cards with images, text, and actions
• Navigation: Responsive top navigation with mobile menu
• Modals: Accessible modal dialog with focus trap
• Tables: Data tables with sort, filter, and pagination
• Form Inputs: Text inputs with validation, custom select dropdowns
• Notifications: Toast notification system with variants
• Loading States: Skeleton screen loading placeholders

Interaction Design (2 examples)

• Hover States: Button hover effects with scale and shadow
• Dark Mode: System-aware dark mode implementation

UX Principles (4 examples)

Accessibility (WCAG 2.1 AA)

• Keyboard navigation and focus management
• Screen reader support with ARIA attributes
• Color contrast and visual accessibility
• Form accessibility with error handling

Design Styles (7 examples)

• Glassmorphism: Frosted glass cards with transparency
• Neumorphism: Soft UI with extruded shapes
• Brutalism: Bold borders with offset shadows
• Minimalism: Whitespace-focused clean design
• Claymorphism: Soft 3D clay-like elements
• Flat Design: Solid colors with no gradients
• Skeuomorphism: Realistic textures and metaphors

Key Features

Comprehensive Coverage

• All major UI/UX design areas
• Both desktop and mobile considerations
• Modern CSS and Tailwind examples
• Real-world scenarios and use cases

Accessibility First

• Every example includes WCAG 2.1 AA considerations
• Focus on keyboard navigation
• Screen reader support
• Color contrast requirements
• Touch target sizing

Practical Implementation

• Production-ready code examples
• CSS custom properties for theming
• Responsive design patterns
• Performance considerations
• Browser compatibility notes

Design Principles Applied

• Visual hierarchy and information architecture
• Progressive disclosure
• Error prevention over error handling
• Consistent design systems
• Mobile-first responsive design
• User flow optimization

Usage Recommendations

For AI Training

1. Use as few-shot examples for UI/UX design tasks
2. Reference for generating design system code
3. Learn accessibility patterns and best practices
4. Understand responsive design implementation

For Design System Development

1. Extract component patterns for libraries
2. Use spacing and color systems as templates
3. Implement accessibility standards from examples
4. Adapt responsive patterns to your needs

For Learning and Reference

1. Study real-world design scenario solutions
2. Understand WCAG compliance implementation
3. Learn modern CSS techniques
4. Explore different design styles and approaches

Technical Details

Code Examples Include

• CSS custom properties (CSS variables)
• Flexbox and CSS Grid layouts
• Responsive design with media queries
• Container queries for component-level responsiveness
• CSS animations and transitions
• Focus states and keyboard navigation
• ARIA attributes for accessibility
• Dark mode implementation
• Mobile touch interactions

Browser Support

• Modern CSS features with fallbacks
• Progressive enhancement approaches
• Vendor prefixes where needed
• Accessibility across browsers and screen readers

File Structure

11-ui-ux-design/
├── ui-ux-design.jsonl          # Main dataset (72 examples)
├── generate_dataset.py          # Dataset generation script
└── README.md                    # This file

Contributing

To add more examples:

1. Follow the existing JSON structure
2. Include all required fields
3. Provide code examples with explanations
4. Add WCAG accessibility notes
5. Run the generation script to rebuild

Resources Referenced

• WCAG 2.1 AA Guidelines
• Material Design Guidelines
• Apple Human Interface Guidelines
• Web Content Accessibility Guidelines (WCAG)
• CSS Grid and Flexbox Specifications
• ARIA Authoring Practices Guide

License

This dataset is part of the Pony Alpha 2 Dataset Training project.

Version History

• v1.0 (2026-03-13): Initial release with 72 comprehensive examples covering all major UI/UX design areas.