majiayu000 Layout Designer Skill
Instructions
- Analyze layout requirements from task
- Design page/section structure and organization
- Create grid system or layout approach
- Define visual hierarchy and content flow
- Specify responsive breakpoints and adaptations
- Consider accessibility (semantic structure, reading order)
- Return structured layout specifications with:
- Layout structure description
- Grid system specifications
- Component positioning
- Responsive breakpoints
- Spacing and alignment
- Visual hierarchy
Examples
Input: "Design layout for user profile page" Output:
### Layout Structure
**Desktop (1024px+):**
- Container: max-width 1200px, centered
- Grid: 12-column grid system
- Header: Full width, fixed top, height 64px
- Sidebar: 3 columns (left), fixed width 240px
- Main Content: 9 columns (right), flexible width
- Footer: Full width, height 80px
**Tablet (768px - 1023px):**
- Container: max-width 100%, padding 24px
- Grid: Single column
- Header: Full width, height 56px
- Sidebar: Hidden (collapsed into menu)
- Main Content: Full width
- Footer: Full width, height 64px
**Mobile (320px - 767px):**
- Container: Full width, padding 16px
- Grid: Single column
- Header: Full width, height 48px, hamburger menu
- Sidebar: Hidden (drawer menu)
- Main Content: Full width
- Footer: Full width, height 56px
### Visual Hierarchy
1. Header (navigation)
2. Main content area
3. Sidebar (secondary content)
4. Footer (tertiary content)
### Grid System
- 12-column grid
- Gutter: 24px (desktop), 16px (tablet), 12px (mobile)
- Column width: Flexible based on container
Layout Types
- Single Column: Simple vertical layout
- Multi-Column: Sidebar + main content
- Grid Layout: Card grids, image galleries
- Flexbox Layout: Flexible component arrangements
- CSS Grid: Complex two-dimensional layouts
- Fixed Header/Footer: Sticky navigation patterns
- Split Screen: Two-panel layouts
- Dashboard: Multi-widget layouts
Responsive Considerations
- Mobile First: Start with mobile layout
- Breakpoints: Define clear breakpoints (320px, 768px, 1024px, 1920px)
- Adaptive Layouts: How layout changes at each breakpoint
- Content Reflow: How content reorders on smaller screens
- Navigation Patterns: Mobile menu patterns (hamburger, drawer, tabs)
Accessibility Considerations
- Semantic HTML: Use proper HTML5 semantic elements
- Reading Order: Logical content reading order
- Focus Order: Keyboard navigation follows visual order
- Landmarks: Proper use of ARIA landmarks
- Skip Links: Skip navigation links for keyboard users