LogoSkills

dsys-tokenize

Extract and organize design tokens from an existing design or stylesheet.

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/dsys-tokenize
argument-hint[CSS file, design file, or description of values to tokenize]

/dsys-tokenize โ€” ํ•˜๋“œ์ฝ”๋”ฉ ๊ฐ’์„ ํ† ํฐ์œผ๋กœ ์ •๋ฆฌ#

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

์Šคํƒ€์ผ์‹œํŠธ๋‚˜ ๋””์ž์ธ ํŒŒ์ผ ์•ˆ์— ํฉ์–ด์ ธ ์žˆ๋Š” ์ƒ‰์ƒยท๊ฐ„๊ฒฉ ๊ฐ™์€ ๊ฐ’๋“ค์„ ์ฐพ์•„๋‚ด์„œ, ์ด๋ฆ„ ๋ถ™์—ฌ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํ† ํฐ ์ฒด๊ณ„๋กœ ์ •๋ฆฌํ•ด ์ฃผ๋Š” ๋ช…๋ น์–ด์ž…๋‹ˆ๋‹ค.

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

  • ๊ธฐ์กด CSS๋‚˜ ๋””์ž์ธ ํŒŒ์ผ์— ํ•˜๋“œ์ฝ”๋”ฉ๋œ ๊ฐ’๋“ค์„ ์ •๋ฆฌํ•ด์„œ ํ† ํฐํ™”ํ•˜๊ณ  ์‹ถ์„ ๋•Œ
  • ๊ฐ’๋“ค์„ ์ „์—ญ/์˜๋ฏธ/์ปดํฌ๋„ŒํŠธ ๋‹จ๊ณ„๋กœ ๋‚˜๋ˆ„๊ณ  ์ด๋ฆ„ ๊ทœ์น™์„ ์ ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ

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

  • ํ™”๋ฉด์— ์“ฐ์ธ ๊ฐ’๋“ค์„ ์Šค์บ”ํ•ด ๋น„์Šทํ•œ ๊ฐ’๋ผ๋ฆฌ ๋ฌถ๊ณ  ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • ์ „์—ญ/์˜๋ฏธ/์ปดํฌ๋„ŒํŠธ 3๋‹จ ๊ณ„์ธต๊ณผ ์ด๋ฆ„ ๊ทœ์น™, ํ…Œ๋งˆ ๋งคํ•‘์„ ์ ์šฉํ•œ ํ† ํฐ ์ŠคํŽ™ ๋ฐ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ฐ€์ด๋“œ๋ฅผ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

โš™๏ธ ์ƒ์„ธ ์˜ต์…˜ยท์‹คํ–‰ ๋ช…์„ธ (๊ฐœ๋ฐœ์ž / AI ์—์ด์ „ํŠธ์šฉ)

Extract hard-coded values and organize into a structured token system.

Steps#

  1. Extract โ€” Scan for all visual values.
  2. Deduplicate โ€” Group similar values using dsys-design-token skill.
  3. Categorize โ€” Organize by category.
  4. Hierarchy โ€” Define global/semantic/component tiers using dsys-design-token skill.
  5. Naming โ€” Apply conventions using dsys-naming-convention skill.
  6. Themes โ€” Map variants using dsys-theming-system skill.
  7. Document โ€” Generate reference using dsys-documentation-template skill.

Output#

Token specification with inventory, hierarchy, theme mapping, and migration guide. Consider following up with /dsys-audit-system.