LogoSkills

ui-type-system

Create a complete typography system from brand fonts or requirements.

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/ui-type-system
argument-hint [font names or requirements, e.g., 'Inter for UI, Merriweather for editorial']

/ui-type-system โ€” ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ์‹œ์Šคํ…œ ์ƒ์„ฑ#

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

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

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

  • ๋ธŒ๋žœ๋“œ ํฐํŠธ๋ฅผ ์ •ํ•œ ๋’ค ์ œํ’ˆ ์ „์ฒด์— ์“ธ ๊ธ€์ž ํฌ๊ธฐ ๊ทœ์น™์„ ์ฒด๊ณ„์ ์œผ๋กœ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ
  • ์ œ๋ชฉยท๋ณธ๋ฌธยท์บก์…˜ ๋“ฑ ํ…์ŠคํŠธ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ๊ฐ€ ํ•„์š”ํ•  ๋•Œ

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

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

/ui-type-system#

Create a complete typography system.

Steps#

  1. Scale โ€” Build a modular type scale using ui-typography-scale skill.
  2. Hierarchy โ€” Define hierarchy levels using ui-visual-hierarchy skill.
  3. Responsive โ€” Adapt scale across breakpoints using ui-responsive-layout skill.
  4. Spacing โ€” Define text spacing relationships using ui-spacing-system skill.
  5. Grid alignment โ€” Align to baseline grid using ui-layout-grid skill.
  6. Document โ€” Output complete type system with usage rules.

Output#

Typography system with scale, styles, responsive behavior, spacing, grid alignment, and usage guidelines. Consider following up with /ui-design-screen to apply the type system.