菜单
UI 스타일 비교용 단일 HTML 을 생성한다. 프리셋 10 종 / 색 / 폰트 / 형상을 전환하고, 컴포넌트 클릭으로 코드를 복사할 수 있다. TRIGGER when 사용자가 /ui-style-lab 또는 /ui-style-lab:ui-style-lab 를 실행하거나, 「UI 스타일 비교」 「테마 비교 도구」 「컬러 코드 비교 HTML」 이라고 요청한 때. DO NOT TRIGGER when 특정 페이지의 구현 (frontend-design), 기존 LP 개선 (unicorn-lp).
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
블로그 URL 1개를 받아 60초 9:16 숏폼 영상(mp4)을 자동 생성하는 파이프라인. 한국 블로그 4종(티스토리/네이버/벨로그/브런치)에서 본문·이미지를 추출하고, shortform-script-generator로 2인 대화 대본을 만든 뒤, ElevenLabs TTS와 GPT Image 2(gpt-image-2)로 음성·이미지를 생성해 Remotion v4로 합성한다. "블로그 URL로 숏폼 만들어줘", "이 글로 릴스 영상 만들어줘", "blog to shortform", "blog-url-to-shortform" 같은 요청에서 발동한다.
.claude 하네스 설정을 시각화 HTML 로 직관적으로 편집하고, JSON 차분을 실제 파일에 반영한다. TRIGGER when 사용자가 /harness-edit 또는 /harness-edit:harness-edit 를 실행하거나, '하네스 편집', '설정을 직관적으로 바꾸고 싶다'고 요청한 때. DO NOT TRIGGER when 단발의 자명한 설정 변경 (직접 편집 / update-config 로 충분).
| name | ui-style-lab |
| description | UI 스타일 비교용 단일 HTML 을 생성한다. 프리셋 10 종 / 색 / 폰트 / 형상을 전환하고, 컴포넌트 클릭으로 코드를 복사할 수 있다. TRIGGER when 사용자가 /ui-style-lab 또는 /ui-style-lab:ui-style-lab 를 실행하거나, 「UI 스타일 비교」 「테마 비교 도구」 「컬러 코드 비교 HTML」 이라고 요청한 때. DO NOT TRIGGER when 특정 페이지의 구현 (frontend-design), 기존 LP 개선 (unicorn-lp). |
| version | 1.1.0 |
| allowed-tools | ["Read","Write","Bash"] |
template.html 의 플레이스홀더를 치환해 출력하기만 하는 경량 스킬.
호출명은 두 가지 — 둘 다 동작:
/ui-style-lab (셸 스크립트 설치 시 standalone)/ui-style-lab:ui-style-lab (플러그인 설치 시; 플러그인명:스킬명)/ui-style-lab [타이틀] [초기테마ID]
두 인자 모두 생략 가능. 생략 시는 UI Style Lab / midnight-mint.
이용 가능한 테마 ID: midnight-mint apple-clean glassmorph cyber-neon paper-brutal pastel-pop nothing-mono corporate-blue editorial sunset-flat
미지의 preset 이름이 오면 midnight-mint 로 폴백해 조용히 계속 진행한다.
template.html 경로를 다음 우선순위로 해석:
$CLAUDE_PLUGIN_ROOT/skills/ui-style-lab/template.html (플러그인 모드)$HOME/.claude/skills/ui-style-lab/template.html (셸 스크립트 설치)$HOME/.claude/plugins/cache/*/ui-style-lab/*/skills/ui-style-lab/template.html (캐시 fallback)Bash 예시:
TPL=""
if [ -n "${CLAUDE_PLUGIN_ROOT:-}" ] && [ -f "$CLAUDE_PLUGIN_ROOT/skills/ui-style-lab/template.html" ]; then
TPL="$CLAUDE_PLUGIN_ROOT/skills/ui-style-lab/template.html"
elif [ -f "$HOME/.claude/skills/ui-style-lab/template.html" ]; then
TPL="$HOME/.claude/skills/ui-style-lab/template.html"
else
TPL=$(ls -t $HOME/.claude/plugins/cache/*/ui-style-lab/*/skills/ui-style-lab/template.html 2>/dev/null | head -1)
fi
해당 파일을 Read 하고, {{TITLE}} / {{DEFAULT_PRESET}} 을 치환한 내용을 Write 로 출력.
출력 대상: 카렌트에 output/ 이 있으면 거기, 없으면 ./. 파일명 ui-style-lab.html, 충돌 시는 ui-style-lab-YYYYMMDD-HHMM.html.
OS별 open 명령:
open <출력경로>xdg-open <출력경로>Start-Process <출력경로> 또는 cmd /c start "" <출력경로>실패해도 계속 진행.
출력 경로를 1 행으로 보고.
template.html 은 읽기 전용. 개수는 스킬 갱신 (version 올림) 으로 수행.template.html 을 읽을 수 없는 경우는 재생성을 시도하지 않고, 설치 상태 (~/.claude/skills/ui-style-lab/ 또는 플러그인 캐시) 의 확인을 의뢰하고 종료.