mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-24 04:15:14 +00:00
Add penpot-uiux-design skill
Adds a comprehensive UI/UX design skill for the Penpot MCP server. Features: - MCP tool reference (execute_code, export_shape, import_image, penpot_api_info) - Design system discovery and handling - Board positioning to avoid overlap - Default design tokens (spacing, typography, colors) - Component checklists (buttons, forms, navigation) - Accessibility guidelines (WCAG compliance) - Platform specifications (iOS, Android, responsive web)
This commit is contained in:
Jcardif
367
skills/penpot-uiux-design/references/platform-guidelines.md
Normal file
367
skills/penpot-uiux-design/references/platform-guidelines.md
Normal file
@@ -0,0 +1,367 @@
|
||||
# Platform Design Guidelines Reference
|
||||
|
||||
## Mobile Design Fundamentals
|
||||
|
||||
### Screen Sizes
|
||||
|
||||
| Device | Size | Design At |
|
||||
| ------ | ---- | --------- |
|
||||
| iPhone SE | 375×667 | Small mobile |
|
||||
| iPhone 14/15 | 390×844 | Standard mobile |
|
||||
| iPhone 14 Pro Max | 430×932 | Large mobile |
|
||||
| Android small | 360×640 | Minimum target |
|
||||
| Android large | 412×915 | Large Android |
|
||||
|
||||
### Safe Areas
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────┐
|
||||
│ ▓▓▓▓▓▓▓ Status Bar ▓▓▓▓▓▓▓▓▓▓ │ 44-47px
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ Safe Content Area │
|
||||
│ │
|
||||
│ │
|
||||
├─────────────────────────────────┤
|
||||
│ ▓▓▓▓▓▓ Home Indicator ▓▓▓▓▓▓▓ │ 34px
|
||||
└─────────────────────────────────┘
|
||||
|
||||
```
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- **Minimum:** 44×44pt (iOS) / 48×48dp (Android)
|
||||
- **Recommended:** 48×48px for all platforms
|
||||
- **Spacing:** Minimum 8px between targets
|
||||
|
||||
---
|
||||
|
||||
## iOS Human Interface Guidelines (HIG)
|
||||
|
||||
### Design Philosophy
|
||||
|
||||
- **Clarity:** Text is legible, icons precise, adornments subtle
|
||||
- **Deference:** UI helps people understand content, never competes
|
||||
- **Depth:** Distinct visual layers convey hierarchy
|
||||
|
||||
### Navigation Patterns
|
||||
|
||||
| Pattern | When to Use |
|
||||
| ------- | ----------- |
|
||||
| Tab Bar | 3-5 top-level destinations |
|
||||
| Navigation Bar | Hierarchical content |
|
||||
| Sidebar | iPad, rich content apps |
|
||||
| Search | Content discovery |
|
||||
|
||||
### Tab Bar Specifications
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────┐
|
||||
│ 🏠 🔍 ➕ 💬 👤 │
|
||||
│ Home Search Add Chat Profile │ 49pt height
|
||||
└─────────────────────────────────┘
|
||||
|
||||
```
|
||||
|
||||
- Max 5 tabs
|
||||
- Icons 25×25pt with 10pt labels
|
||||
- Active tab uses fill/tint color
|
||||
- Inactive tabs use gray
|
||||
|
||||
### Navigation Bar
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────┐
|
||||
│ ‹ Back Page Title Action │ 44pt minimum
|
||||
└─────────────────────────────────┘
|
||||
|
||||
```
|
||||
|
||||
- Left: Back button or cancel
|
||||
- Center: Title
|
||||
- Right: Primary action (text or icon)
|
||||
|
||||
### Typography (SF Pro)
|
||||
|
||||
| Style | Size | Weight |
|
||||
| ----- | ---- | ------ |
|
||||
| Large Title | 34pt | Bold |
|
||||
| Title 1 | 28pt | Bold |
|
||||
| Title 2 | 22pt | Bold |
|
||||
| Title 3 | 20pt | Semibold |
|
||||
| Headline | 17pt | Semibold |
|
||||
| Body | 17pt | Regular |
|
||||
| Callout | 16pt | Regular |
|
||||
| Subhead | 15pt | Regular |
|
||||
| Footnote | 13pt | Regular |
|
||||
| Caption | 12pt | Regular |
|
||||
|
||||
### iOS Colors (System)
|
||||
|
||||
| Color | Light | Dark |
|
||||
| ----- | ----- | ---- |
|
||||
| Label | #000000 | #FFFFFF |
|
||||
| Secondary Label | #3C3C43 @ 60% | #EBEBF5 @ 60% |
|
||||
| Tertiary Label | #3C3C43 @ 30% | #EBEBF5 @ 30% |
|
||||
| System Blue | #007AFF | #0A84FF |
|
||||
| System Green | #34C759 | #30D158 |
|
||||
| System Red | #FF3B30 | #FF453A |
|
||||
| System Orange | #FF9500 | #FF9F0A |
|
||||
|
||||
### iOS-Specific Patterns
|
||||
|
||||
- **Swipe gestures:** Delete, archive, actions
|
||||
- **Pull to refresh:** Standard list refresh
|
||||
- **Long press:** Context menus
|
||||
- **Haptic feedback:** Confirm actions
|
||||
- **Edge swipe:** Back navigation
|
||||
|
||||
---
|
||||
|
||||
## Android Material Design
|
||||
|
||||
### Android Design Philosophy
|
||||
|
||||
- **Material as metaphor:** Physical properties, elevation
|
||||
- **Bold, graphic, intentional:** Deliberate color, typography, space
|
||||
- **Motion provides meaning:** Feedback and continuity
|
||||
|
||||
### Android Navigation Patterns
|
||||
|
||||
| Pattern | When to Use |
|
||||
| ------- | ----------- |
|
||||
| Bottom Navigation | 3-5 top destinations |
|
||||
| Navigation Drawer | 5+ destinations, less frequent |
|
||||
| Navigation Rail | Tablet landscape |
|
||||
| Tabs | Related content groups |
|
||||
|
||||
### Bottom Navigation
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────┐
|
||||
│ 🏠 🔍 📷 💬 👤 │
|
||||
│ Home Search Camera Chat Account│ 80dp height
|
||||
└─────────────────────────────────┘
|
||||
|
||||
```
|
||||
|
||||
- 3-5 destinations
|
||||
- Icons 24dp with 12sp labels
|
||||
- Active: filled icon + primary color
|
||||
- Inactive: outlined icon + on-surface
|
||||
|
||||
### App Bar
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────┐
|
||||
│ ≡ App Title 🔍 │ 64dp height
|
||||
└─────────────────────────────────┘
|
||||
|
||||
```
|
||||
|
||||
- Left: Navigation icon (menu or back)
|
||||
- Center: Title (can be left-aligned)
|
||||
- Right: Action icons (max 3)
|
||||
|
||||
### Floating Action Button (FAB)
|
||||
|
||||
- **Size:** 56dp standard, 40dp mini
|
||||
- **Position:** Bottom right, 16dp from edges
|
||||
- **Purpose:** Primary action only
|
||||
- **Behavior:** Can hide on scroll
|
||||
|
||||
### Typography (Roboto)
|
||||
|
||||
| Style | Size | Weight | Tracking |
|
||||
| ----- | ---- | ------ | -------- |
|
||||
| Display Large | 57sp | Regular | -0.25 |
|
||||
| Display Medium | 45sp | Regular | 0 |
|
||||
| Display Small | 36sp | Regular | 0 |
|
||||
| Headline Large | 32sp | Regular | 0 |
|
||||
| Headline Medium | 28sp | Regular | 0 |
|
||||
| Headline Small | 24sp | Regular | 0 |
|
||||
| Title Large | 22sp | Regular | 0 |
|
||||
| Title Medium | 16sp | Medium | 0.15 |
|
||||
| Title Small | 14sp | Medium | 0.1 |
|
||||
| Body Large | 16sp | Regular | 0.5 |
|
||||
| Body Medium | 14sp | Regular | 0.25 |
|
||||
| Body Small | 12sp | Regular | 0.4 |
|
||||
| Label Large | 14sp | Medium | 0.1 |
|
||||
| Label Medium | 12sp | Medium | 0.5 |
|
||||
| Label Small | 11sp | Medium | 0.5 |
|
||||
|
||||
### Material Colors
|
||||
|
||||
| Role | Purpose |
|
||||
| ---- | ------- |
|
||||
| Primary | Main brand color |
|
||||
| On Primary | Text/icons on primary |
|
||||
| Primary Container | Filled buttons, active states |
|
||||
| Secondary | Less prominent components |
|
||||
| Tertiary | Contrast, balance |
|
||||
| Error | Error states |
|
||||
| Surface | Card backgrounds |
|
||||
| On Surface | Text on surfaces |
|
||||
| Outline | Borders, dividers |
|
||||
|
||||
### Elevation (Shadows)
|
||||
|
||||
| Level | Elevation | Use Case |
|
||||
| ----- | --------- | -------- |
|
||||
| 0 | 0dp | Flat surfaces |
|
||||
| 1 | 1dp | Cards, raised buttons |
|
||||
| 2 | 3dp | Elevated cards |
|
||||
| 3 | 6dp | FAB resting |
|
||||
| 4 | 8dp | Dialogs, pickers |
|
||||
| 5 | 12dp | FAB pressed |
|
||||
|
||||
### Android-Specific Patterns
|
||||
|
||||
- **Snackbar:** Brief feedback at bottom
|
||||
- **Bottom sheet:** Additional content/actions
|
||||
- **Chips:** Filter, input, choice, action
|
||||
- **Speed dial FAB:** Multiple related actions
|
||||
|
||||
---
|
||||
|
||||
## Responsive Web Design
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Typical Device |
|
||||
| ---- | ----- | -------------- |
|
||||
| xs | <576px | Mobile portrait |
|
||||
| sm | 576-767px | Mobile landscape |
|
||||
| md | 768-991px | Tablet |
|
||||
| lg | 992-1199px | Small desktop |
|
||||
| xl | 1200-1399px | Desktop |
|
||||
| xxl | ≥1400px | Large desktop |
|
||||
|
||||
### Grid System
|
||||
|
||||
- **Columns:** 12-column grid standard
|
||||
- **Gutters:** 16-24px between columns
|
||||
- **Margins:** 16px (mobile) to 64px (desktop)
|
||||
- **Max content width:** 1200-1440px
|
||||
|
||||
### Responsive Typography
|
||||
|
||||
```text
|
||||
Mobile (base):
|
||||
Body: 16px
|
||||
H1: 28-32px
|
||||
H2: 22-24px
|
||||
|
||||
Tablet:
|
||||
Body: 16px
|
||||
H1: 32-40px
|
||||
H2: 24-28px
|
||||
|
||||
Desktop:
|
||||
Body: 16-18px
|
||||
H1: 40-56px
|
||||
H2: 28-36px
|
||||
|
||||
```
|
||||
|
||||
### Mobile-First Approach
|
||||
|
||||
1. Design for smallest screen first
|
||||
2. Add complexity for larger screens
|
||||
3. Content priority: What's essential?
|
||||
4. Performance: Minimize for mobile
|
||||
5. Touch-first interactions
|
||||
|
||||
### Responsive Patterns
|
||||
|
||||
| Pattern | Description |
|
||||
| ------- | ----------- |
|
||||
| Stack | Columns become rows on mobile |
|
||||
| Reflow | Content reorders based on priority |
|
||||
| Reveal | More content shown at larger sizes |
|
||||
| Off-canvas | Navigation slides in on mobile |
|
||||
| Scale | Elements scale proportionally |
|
||||
|
||||
---
|
||||
|
||||
## Desktop Applications
|
||||
|
||||
### Window Chrome
|
||||
|
||||
```text
|
||||
┌─────────────────────────────────────────┐
|
||||
│ ● ● ● App Title ─ □ × │ Title bar
|
||||
├────────┬────────────────────────────────┤
|
||||
│ Sidebar│ Content Area │
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ ├────────────────────────────────┤
|
||||
│ │ Status Bar │
|
||||
└────────┴────────────────────────────────┘
|
||||
|
||||
```
|
||||
|
||||
### Keyboard-First Design
|
||||
|
||||
- All actions accessible via keyboard
|
||||
- Visible keyboard shortcuts
|
||||
- Focus management for tab order
|
||||
- Search/command palette (Cmd/Ctrl+K)
|
||||
|
||||
### Hover States
|
||||
|
||||
Desktop has hover (mobile doesn't):
|
||||
|
||||
- Show additional info on hover
|
||||
- Preview actions before click
|
||||
- Tooltips for icon-only buttons
|
||||
- Dropdown menus on hover
|
||||
|
||||
### Dense Information
|
||||
|
||||
Desktop allows for:
|
||||
|
||||
- Smaller touch targets (32px min)
|
||||
- More visible information
|
||||
- Complex tables and data grids
|
||||
- Multi-column layouts
|
||||
- Side-by-side comparisons
|
||||
|
||||
---
|
||||
|
||||
## Cross-Platform Considerations
|
||||
|
||||
### Shared Principles
|
||||
|
||||
- Consistent brand identity
|
||||
- Same core user flows
|
||||
- Synchronized data/state
|
||||
- Familiar information architecture
|
||||
|
||||
### Platform-Specific Adaptations
|
||||
|
||||
| Aspect | iOS | Android | Web |
|
||||
| ------ | --- | ------- | --- |
|
||||
| Back | Left nav | Left or gesture | Browser back |
|
||||
| Primary action | Right nav | FAB | Top right button |
|
||||
| Lists | Swipe actions | Long press | Hover actions |
|
||||
| Menus | Action sheets | Bottom sheet | Dropdown/context |
|
||||
| Alerts | Centered modal | Centered modal | Various positions |
|
||||
|
||||
### Design Tokens Across Platforms
|
||||
|
||||
Create platform-agnostic tokens:
|
||||
|
||||
```text
|
||||
// Spacing
|
||||
spacing-sm: 8
|
||||
spacing-md: 16
|
||||
spacing-lg: 24
|
||||
|
||||
// These map to platform units
|
||||
iOS: points (pt)
|
||||
Android: density-independent pixels (dp)
|
||||
Web: pixels (px) or rem
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user