Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
AI가 생성한 프론트엔드 페이지의 획일적인 디자인 문제를 해결하기 위해 unslop이라는 오픈소스 Skill이 소개되었습니다. 이 도구는 Claude Code와 Codex를 기반으로 하며, 간격, 색상, 레이아웃 등 개별 요소를 조정하여 제품 고유의 디자인 방향성을 설정하는 데 특화되어 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 X @github_daily (자동 발견)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기보라색 그라디언트, 대형 카드, 빛나는 버튼 등 빠진 것 없이 AI로 만들어진 프론트엔드 페이지는 제품 이름만 바꿔도 여전히 같은 템플릿처럼 보입니다.
unslop은 Claude Code와 Codex를 위해 설계된 오픈소스 Skill로, 바로 이러한 인터페이스를 수정하는 데 특화되어 있습니다. 이 도구는 먼저 어떤 부분이 AI가 생성한 것처럼 보이는지 식별하고, 그 후 제품 자체에 기반하여 디자인 방향을 설정합니다.
이는 간격(spacing), 색상(colors), 아이콘(icons), 글꼴(fonts), 레이아웃(layouts) 등을 개별적으로 조정하면서도 원래의 기능성과 콘텐츠 구조는 보존합니다. 또한 페이지 내의 제품 이미지와 차트까지 확인합니다.
GitHub:
http://github.com/heydamir/unslop
저는 이 도구가 변경을 가하기 전에 먼저 방향성을 제안하는 접근 방식에 정말 공감합니다. 만약 페이지가 이미 괜찮은 상태라면, 단순히 다시 만들고 싶다는 이유만으로 전면 개편하기보다는 사소한 수정 사항만을 제안할 것입니다.
프로젝트 코드가 있다면 직접 페이지를 수정합니다. 라이브 링크(live link)만 있어도 웹 복사본을 먼저 저장한 다음 조정할 수 있습니다. 대시보드, 앱 인터페이스, 제품 랜딩 페이지 등 다양한 유형의 페이지를 처리할 수 있습니다.
또한 이 수정 과정을 10초 미만의 정사각형 비디오로 변환하여 페이지가 단계별로 어떻게 진화하는지 보여줄 수도 있습니다. 이를 위해서는 Playwright와 ffmpeg가 필요하며, 저장소에는 테스트해 볼 샘플 페이지가 포함되어 있습니다.