Extrator de DESIGN.md 용 Google Chrome

AI 준비가 된 DESIGN.md 파일로 시각적 디자인 토큰 추출하기

DESIGN.md의 추출기, Vitor M. M.과 ibe.IA의 협력으로 만들어진 이 도구는 사이트의 시각적 아이덴티티를 AI 지원 UI 코드용 표준화된 DESIGN.md 참조로 변환하는 Chrome 확장 프로그램입니다. 이 도구는 페이지를 검사하고 색상, 타이포그래피, 간격 및 기타 토큰화된 규칙을 캡처하여 기계가 읽을 수 있는 문서를 형성합니다. 이 확장 프로그램은 빠른 추출을 위한 컴팩트한 사이드 패널을 사용하며, LLM 기반 인터페이스에 일관된 시각적 가이드를 필요로 하는 프론트엔드 개발자, UI/UX 디자이너 및 프롬프트 엔지니어를 대상으로 합니다.

페이지 스타일을 구조화된 디자인 토큰 파일로 변환합니다

확장 프로그램은 활성 탭에서 구체적인 스타일 데이터를 추출합니다 그리고 이를 DESIGN.md 파일에 기록합니다. 추출기는 색상, 타이포그래피 스케일, 간격 단위, 테두리 스타일 및 그림자를 식별하고 이를 토큰 참조로 형식화합니다. 출력은 W3C 디자인 토큰 커뮤니티 그룹(DTCG) 사양을 따르므로 팀은 임시 색상 목록이 아닌 표준화된 토큰 모델을 받습니다. 이는 하류 도구가 토큰을 신뢰성 있게 해석하는 데 도움이 됩니다.

페이지를 떠나지 않고 브라우징에 통합됩니다

추출은 Chrome 사이드 패널 API로 구축된 사이드 패널에서 실행됩니다, 사용자가 라이브 사이트를 보면서 클릭 한 번으로 캡처를 시작할 수 있도록 합니다. 패널 디자인은 워크플로우를 간결하고 비침해적으로 유지하여 디자이너가 별도의 창을 열지 않고도 구성 요소를 검사하고 추출을 트리거할 수 있습니다. 다중 페이지 캡처는 탐색된 페이지 전반에 걸쳐 토큰을 단일 참조 파일로 통합하여 프로젝트 수준의 일관성을 제공합니다.

개인정보 보호를 위해 브라우저에 로컬로 처리합니다

모든 분석은 사용자의 브라우저에서 발생합니다; 확장 프로그램은 데이터를 외부로 전송하거나 저장하지 않으며 계정을 요구하지 않는다고 문서화합니다. 이러한 로컬 전용 처리는 엄격한 개인정보 보호 규칙이 있는 전문 환경에 적합하며, 추출된 토큰과 생성된 DESIGN.md는 클라이언트 환경에 남아 내부 사용을 위해 직접 내보낼 수 있습니다.

AI 편집기 및 프로그래밍 사용을 위한 토큰 파일을 준비합니다

이 도구는 AI 준비가 된 아티팩트를 생성합니다 여기에는 AI 통합 프롬프트와 프로그래밍 수집에 적합한 YAML 프론트 매터가 포함된 내보낼 수 있는 Markdown 파일이 포함됩니다. 프롬프트는 Claude 및 Cursor와 같은 LLM이 토큰 세트를 적용하는 데 도움이 되도록 제공되며, Markdown 출력은 개발자 파이프라인에 통합되도록 형식화됩니다. 이 확장 프로그램은 API 종속성으로 인해 Chrome 및 기타 Chromium 기반 브라우저에서 실행됩니다.

AI 지원 코드를 위한 재현 가능한 디자인 가이드를 원하는 팀에 가장 적합

이 확장은 LLM이 생성한 UI에서 시각적 드리프트를 줄이기 위해 반복 가능하고 기계 판독 가능한 디자인 참조가 필요한 프론트엔드 팀과 프롬프트 엔지니어에게 실용적인 옵션입니다. 한 가지 단점은 이를 채택하는 데 기존 빌드 또는 검토 프로세스 내에서 토큰 파일을 가져오고 버전 관리하는 작은 워크플로 변경이 필요하다는 것입니다. 디자인 충실성을 강제하는 프로젝트의 경우, 이 확장은 시각적 규칙을 체계화하는 집중적이고 개인 정보 보호를 고려한 방법을 제공합니다.