marketing-shibata50/designer-skills
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
designer-skills/ui-design/commands/design-screen.md

998 B
Raw Blame History

description argument-hint
Design a complete screen layout from a description or requirements. [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.