LogoSkills

ui-design-screen

Design a complete screen layout from a description or requirements.

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/ui-design-screen
argument-hint [screen description, e.g., 'user profile settings page' or 'e-commerce product listing']

/ui-design-screen โ€” ํ™”๋ฉด ์ „์ฒด ์„ค๊ณ„#

ํ•œ๋งˆ๋””๋กœ#

"์–ด๋–ค ํ™”๋ฉด์ด ํ•„์š”ํ•˜๋‹ค"๋Š” ์„ค๋ช… ํ•œ ์ค„๋งŒ ์ฃผ๋ฉด, ๋ ˆ์ด์•„์›ƒ ๊ตฌ์กฐ๋ถ€ํ„ฐ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ์ƒ‰์ƒ, ์—ฌ๋ฐฑ, ๋ฐ˜์‘ํ˜• ๋™์ž‘, ๋‹คํฌ ๋ชจ๋“œ๊นŒ์ง€ ํ™”๋ฉด ํ•˜๋‚˜๋ฅผ ํ†ต์งธ๋กœ ์„ค๊ณ„ํ•ด์ค๋‹ˆ๋‹ค.

๋ˆ„๊ฐ€ยท์–ธ์ œ ์“ฐ๋‚˜์š”#

  • ์ƒˆ ํ™”๋ฉด(์˜ˆ: ํšŒ์› ์ •๋ณด ์„ค์ • ํŽ˜์ด์ง€, ์ƒํ’ˆ ๋ชฉ๋ก ํŽ˜์ด์ง€)์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋””์ž์ธํ•  ๋•Œ
  • ํ™”๋ฉด ํ•˜๋‚˜๋ฅผ ๋น ๋ฅด๊ฒŒ ๊ตฌ์ฒดํ™”ํ•ด์„œ ๊ฐœ๋ฐœํŒ€์— ์ „๋‹ฌํ•  ๋ช…์„ธ๊ฐ€ ํ•„์š”ํ•  ๋•Œ

๋ฌด์—‡์„ ํ•ด์ฃผ๋‚˜์š”#

  • ๋ ˆ์ด์•„์›ƒ ๊ทธ๋ฆฌ๋“œ, ์‹œ๊ฐ์  ์šฐ์„ ์ˆœ์œ„(๋ญ˜ ๋จผ์ € ๋ณด์—ฌ์ค„์ง€), ๊ธ€์ž ์Šคํƒ€์ผ, ์ƒ‰์ƒ, ์—ฌ๋ฐฑ์„ ์ˆœ์„œ๋Œ€๋กœ ์ •ํ•ฉ๋‹ˆ๋‹ค.
  • ํ™”๋ฉด ํฌ๊ธฐ๋ณ„ ๋ฐ˜์‘ํ˜• ๋™์ž‘๊ณผ ๋‹คํฌ ๋ชจ๋“œ ๋Œ€์‘๊นŒ์ง€ ํฌํ•จํ•œ ์™„์„ฑ๋œ ํ™”๋ฉด ๋ช…์„ธ๋ฅผ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.
โš™๏ธ ์ƒ์„ธ ์˜ต์…˜ยท์‹คํ–‰ ๋ช…์„ธ (๊ฐœ๋ฐœ์ž / AI ์—์ด์ „ํŠธ์šฉ)

/ui-design-screen#

Design a complete screen layout from a description.

Steps#

  1. Structure โ€” Define layout grid using ui-layout-grid skill.
  2. Hierarchy โ€” Establish visual priority using ui-visual-hierarchy skill.
  3. Typography โ€” Apply type styles using ui-typography-scale skill.
  4. Color โ€” Apply color system using ui-color-system skill.
  5. Spacing โ€” Apply consistent spacing using ui-spacing-system skill.
  6. Responsive โ€” Define behavior across breakpoints using ui-responsive-layout skill.
  7. Dark mode โ€” Specify dark mode adaptation using ui-dark-mode skill.

Output#

Complete screen specification with layout, hierarchy, typography, color, spacing, responsive behavior, and dark mode. Consider following up with /ui-responsive-audit to verify the design.