17 lines
998 B
Markdown
17 lines
998 B
Markdown
---
|
|
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.
|