#웹UI디자인

URL 하나를 주면 코딩 에이전트가 그 페이지를 관찰해 Next.js로 다시 짜게 하는 스킬 템플릿

요점 5개

• 되는 것: 실측(2026-10-31): supabase.com 홈페이지 1장을 명령 한 줄로 약 35분에 복제 — 데스크톱 높이 7691px·섹션 11개 위치가 원본과 같고 빌드 검사 통과
• 되는 것: Claude Code·Codex CLI·OpenCode·Cursor 지원 — 스킬 하나를 네 에이전트가 같이 읽는다 · MIT
• 조건: Node.js 24 이상 필요 · 브라우저 도구는 에이전트 쪽에서 따로 연결 · next 16.3.5 고정(16.4.3으로 올려야 함)
• +2

사이트 주소 하나로 색·타이포·간격 디자인 토큰과 DESIGN.md를 뽑아 주는 CLI

요점 4개

• 되는 것: Windows 11 실측 — 기존 크롬에 CDP로 붙어 브라우저 다운로드 0, 한 사이트 19초
• 되는 것: 로컬 추출·모든 출력 포맷 무료(API 키는 클라우드 동기화에만) · MIT · 주 단위 릴리즈
• 되는 것: 의존성 고정 + 무거운 모델은 지연 로드 — 설치가 시간 지나 깨질 구조 아님
• +1

AI가 만든 웹 화면의 '어디서 본 듯한 티'를 규칙 61개로 잡아 주는 검출기 + 편집 훅

요점 4개

• 되는 것: Windows 11 실측 — 서명된 엔진 exe 5.3초 설치, 런타임 의존성 0(Rust 정적 바이너리)
• 되는 것: 실제 사이트 32쪽에서 저대비 버튼 189건·제목 단계 건너뜀 22건·한글 헤드라인 음수 자간을 잡음
• 되는 것: 24명령·61규칙이 코드에 실재(crates/core/src/checks/rules.rs, 2026-09-16 검토) · Apache-2.0 · 30일 커밋 100+
• +1

관리자 페이지(회원·매출 대시보드)를 처음부터 안 만들고 통째로 가져다 쓰는 화면 모음

요점 4개

• 되는 것: 윈도우 사용에 걸림돌 없음 (코드 검토 기준)
• 되는 것: 무료 · 상업적 사용 가능 (MIT)
• 되는 것: 10개 넘는 화면이 이미 완성돼 있음
• +1

AI가 만든 랜딩·포트폴리오에서 '어디서 본 듯한 티'를 빼는 프롬프트 스킬 13개 묶음

요점 3개

• 되는 것: 마크다운만이라 어디서나 로드되고 위험 0 · MIT
• 되는 것: 금지 목록·브리프 선언·출고 전 체크가 그대로 쓸 수 있는 실무 규칙
• 조건: 88KB 단일 파일, 준수 검증 장치 없음, 이슈 36/49 열림