TypeUI DESIGN.md Extractor — Chrome Extension
웹사이트 스타일을 추출해
DESIGN.md또는SKILL.md로 바꿔주는 TypeUI 기반 Chrome 확장.
한 줄 요약
아무 웹사이트나 열어 두고 확장 프로그램을 실행하면, 타이포그래피·색상·간격·반경·그림자·모션 같은 스타일 신호를 읽어 에이전트가 바로 사용할 수 있는 디자인 문서를 생성한다.
핵심 기능
- Auto-extract: 현재 탭의 스타일 신호를 읽음
- Generate DESIGN.md: 디자인 시스템 문서 생성
- Generate SKILL.md: 에이전트용 스킬 문서 생성
- Refresh: 현재 페이지 상태를 다시 추출
- Download: 결과를
DESIGN.md또는SKILL.md로 저장 - Explain (?): 생성 근거를 TypeUI 기준으로 설명
출력 구조
생성되는 문서는 다음 섹션을 포함한다.
- Mission
- Brand
- Style Foundations
- Accessibility
- Writing Tone
- Rules: Do / Rules: Don’t
- Guideline Authoring Workflow
- Required Output Structure
- Component Rule Expectations
- Quality Gates
설치와 사용
- Chrome에서
chrome://extensions열기 - Developer mode 활성화
- Load unpacked 클릭
- 이 프로젝트 폴더 선택
왜 중요한가
이 확장은 2026-04-10-awesome-design-md-getdesign처럼 디자인 시스템을 수집하는 흐름과, 2026-04-17-oh-my-design처럼 DESIGN.md를 에이전트 워크플로에 연결하는 흐름 사이를 이어준다. 즉, “참고할 디자인”을 실제 웹사이트에서 직접 추출해 바로 에이전트용 문서로 바꾸는 브리지다.