인포그랩design-skills

design-system 가이드

브랜드 가이드라인에서 디자인 토큰을 만들거나 슬라이드 템플릿을 찾을 때

한 줄 결과물: 브랜드 가이드라인에서 만든 CSS/JSON 디자인 토큰, 프로젝트의 토큰 사용 검증 결과, 슬라이드 템플릿 검색 결과.

스킬 본문: ../../design-system/SKILL.md

샘플 이미지는 아직 만들지 않았다(보류). 이 가이드는 SKILL.md를 가리키는 짧은 안내다.

이름이 비슷한 design-system-tokens는 토큰 구조를 점검하는 스킬이고, 이 스킬은 토큰을 만들고 검증하고 슬라이드 템플릿을 찾는 스킬이다. 둘 다 유지한다.

언제 쓰나

  • 브랜드 가이드라인(brand/docs/03-brand-guidelines.md)의 색을 토큰 파일로 뽑을 때
  • 코드가 토큰을 제대로 쓰는지 폴더 단위로 검증할 때
  • 투자 유치, 제품 출시 같은 슬라이드의 전략, 레이아웃, 카피 템플릿을 찾을 때
  • 쓰지 않을 때: 토큰 3층 구조와 하드코딩 규모 점검은 design-system-tokens

따라하기

저장소 루트에서 실행한다. 토큰은 같은 저장소의 brand/docs/03-brand-guidelines.md에서 색을 읽는다.

  1. 토큰을 만든다.
    node design-system/scripts/generate-tokens.cjs -c tokens.json
  2. 사용을 검증한다.
    node design-system/scripts/validate-tokens.cjs -d src/
  3. 슬라이드 템플릿을 찾는다.
    python3 design-system/scripts/search-slides.py "investor pitch" -d strategy
  4. 요청 문구 예시.
    design-system 스킬로 브랜드 가이드라인에서 토큰을 만들고 src/ 의 사용을 검증해 줘.
결과 파일 경로와 위반 개수를 알려 주고, 코드는 고치지 말고 제안만 내줘.

흔한 실패

  • tokens.json이 이미 있는데 덮어쓴다. 출력 경로를 -c로 따로 정한다.
  • 가이드라인을 못 찾으면 기본 색으로 조용히 대체된다. 결과의 primary 값이 brand/docs의 색과 같은지 확인한다.
  • 검증 스크립트의 통과를 구조가 좋다는 뜻으로 읽는다. 구조 점검은 design-system-tokens로 따로 한다.

다음 스킬