스킬 자체의 표현으로
design-system 스킬은 markdown-html 플러그인의 공유 브랜드 소유자입니다. 10개 질문으로 구성된 온보딩 위저드를 통해 브랜드 아이덴티티를 한 번에 캡처합니다—primary와 accent HEX 값, 제목용 및 본문용 Google Fonts, 디자인 스타일(editorial, technical, minimal 또는 playful), 기본 출력 디렉터리, 코드 테마, TOC 동작, 그리고 선택적인 회사명과 로고—그런 다음 본문 텍스트와 링크의 대비를 WCAG 2.2 AA 기준으로 검증하고 HSL 공간에서 12개의 CSS custom properties를 도출합니다.
온보딩, 설정 로드, 팔레트 검증을 처리하는 stdlib 전용 Python 도구가 세 가지 있으며, 우선순위는 프로젝트가 전역보다, 전역이 내장 기본값보다 우선합니다. 모든 컨버터(md-document, md-review, md-slides)는 저장된 설정을 읽으므로 토큰 하나를 변경하면 렌더링되는 모든 문서가 변경됩니다.
산출물
- 브랜드와 파생 팔레트를 담고 있는 설정 파일로, 전역 또는 프로젝트 내에 작성됩니다.
- 각 컨버터의 스타일 블록에 인라인으로 포함된 12개의 CSS 사용자 정의 속성으로, --md-surface, --md-border, --md-link, --md-warn 등이 있습니다.
- 검증용 에셋으로 제공되는 설정용 JSON 스키마입니다.
작동 방식
- 01온보딩을 한 번 실행합니다
이 skill은 markdown-html 플러그인의 공통 브랜드 소유자입니다. md-document, md-review, md-slides 모두 이 skill이 작성한 설정을 사용하므로, 한 번 실행하면 모든 변환에 브랜드가 적용됩니다.
- 02열 가지 질문에 답합니다
마법사는 default_output_dir, 주요 및 강조 HEX, 제목 및 본문 폰트, design_style, code_theme, toc.behavior와 선택적인 company_name 및 logo_url을 기록합니다.
- 03검증이 저장을 통제하도록 합니다
brand_palette_validator.validate()는 모든 변경 후 실행되므로, 마법사가 끝날 때만이 아니라 각 필드 편집 시마다 색상 쌍이 재검사됩니다.
- 04열두 개의 토큰을 파생합니다
derive_palette()는 --md-surface(배경에서 명도 4-6% 가감)와 --md-text-muted(rgba(text, 0.68)) 같은 토큰을 계산하여, 동일한 설정 파일 내 derived_palette 아래에 저장합니다.
- 05우선순위에 따라 설정을 해석합니다
config_loader.py는 모든 컨버터가 렌더링 전에 호출하는 임포트 가능한 로더로, 프로젝트, 전역, 내장 기본값 순서로 병합하며 우회(bypass) 환경 변수를 준수합니다.
- 06비대화형으로 재정의하거나 초기화합니다
마법사 외에도 onboard.py는 --defaults, --set key=value, --scope project, --show, --reset을 지원하므로, 질문 과정을 다시 거치지 않고도 브랜드 필드를 변경하거나 초기화할 수 있습니다.