---
description: Design a complete screen layout from a description or requirements.
argument-hint: "[screen description, e.g., 'user profile settings page' or 'e-commerce product listing']"
---
# /design-screen
Design a complete screen layout from a description.
## Steps
1. **Structure** — Define layout grid using `layout-grid` skill.
2. **Hierarchy** — Establish visual priority using `visual-hierarchy` skill.
3. **Typography** — Apply type styles using `typography-scale` skill.
4. **Color** — Apply color system using `color-system` skill.
5. **Spacing** — Apply consistent spacing using `spacing-system` skill.
6. **Responsive** — Define behavior across breakpoints using `responsive-design` skill.
7. **Dark mode** — Specify dark mode adaptation using `dark-mode-design` skill.
## Output
Complete screen specification with layout, hierarchy, typography, color, spacing, responsive behavior, and dark mode.
Consider following up with `/responsive-audit` to verify the design.