Menü
Remotion 슬라이드/쇼츠 프로젝트의 컬러 테마 레퍼런스. 테마 추가·수정·조회 시 참조. "테마", "색상", "theme" 등의 요청에 사용.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | remotion-themes |
| description | Remotion 슬라이드/쇼츠 프로젝트의 컬러 테마 레퍼런스. 테마 추가·수정·조회 시 참조. "테마", "색상", "theme" 등의 요청에 사용. |
src/slides/themes.ts — 모든 테마 정의와 getTheme() 헬퍼 함수가 위치.
interface ThemeColors {
bg: string; // 배경색
title: string; // 제목 텍스트 색
text: string; // 본문 텍스트 색
accent: string; // 강조색
badge: [BadgeStyle, BadgeStyle]; // 테마당 뱃지 2종
}
interface BadgeStyle {
bg: string; // 뱃지 배경색
text: string; // 뱃지 텍스트 색
}
| 속성 | 값 |
|---|---|
| bg | #2D2D2D |
| title | #FFFFFF |
| text | #E0E0E0 |
| accent | #FFFFFF |
| badge[0] | bg #1A1A1A, text #FFFFFF |
| badge[1] | bg #1A1A1A, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #2196F3 |
| title | #000000 |
| text | #1A1A1A |
| accent | #FFFFFF |
| badge[0] | bg #1A1A1A, text #FFFFFF |
| badge[1] | bg #1565C0, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #E8734A |
| title | #FFFFFF |
| text | #FFF5F0 |
| accent | #FFFFFF |
| badge[0] | bg #1A1A1A, text #FFFFFF |
| badge[1] | bg #C4532A, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #F5E94B |
| title | #111111 |
| text | #1F1F1F |
| accent | #000000 |
| badge[0] | bg #000000, text #FAFF69 |
| badge[1] | bg #333333, text #FFFFFF |
| 속성 | 값 |
|---|---|
| bg | #000000 |
| title | #FFFFFF |
| text | #CCCCCC |
| accent | #FAFF69 (네온 옐로) |
| badge[0] | bg #FAFF69, text #000000 |
| badge[1] | bg #333333, text #FFFFFF |
추가 호환 테마로 parchment, figma도 사용할 수 있다. 다만 기본 보장 세트는 dark, blue, orange, yellow, black 5종이다.
markdowns/<topic>/DESIGN.md는 아무 때나 자동 적용되지 않는다. 슬라이드 frontmatter의 theme:가 정확히 DESIGN.md일 때만 해당 주제의 프레젠터·슬라이드·쇼츠에서 적극적으로 오버라이드한다.
theme: DESIGN.md일 때 merge 순서는 DESIGN baseTheme(없으면 dark) -> DESIGN.md 공통 override -> DESIGN.md의 baseTheme별 overridetheme: orange, theme: blue 같은 일반 테마를 쓰면 DESIGN.md가 있어도 무시하고 기본 테마만 사용한다theme: DESIGN.md를 쓰면 dark 기반으로 동작한다src/slides/themes.ts 또는 src/slides/designTheme.ts를 같이 수정해 해당 디자인 시스템이 실제로 반영되게 한다theme: DESIGN.md로 프레젠터/프리뷰를 다시 띄워 실제 적용을 확인한다DESIGN.md를 읽고 현재 코드가 어느 정도 추출 가능한지 판단한다.themes.ts / designTheme.ts를 수정한다.theme: DESIGN.md로 프레젠터/프리뷰를 다시 띄워 실제 적용을 확인한다.DESIGN.md 안에 다음처럼 fenced block을 두면 가장 안정적으로 반영된다.
{
"baseTheme": "figma",
"default": {
"fontHeading": "figmaSans Fallback, 'SF Pro Display', system-ui, sans-serif",
"fontBody": "figmaSans Fallback, 'SF Pro Display', system-ui, sans-serif",
"fontLabel": "figmaMono Fallback, 'SF Mono', Menlo, monospace",
"titleLetterSpacing": "-1.72px",
"titleLineHeight": 1,
"badgeRadius": 50,
"bulletMarker": "—"
},
"themes": {
"blue": {
"bg": "#2196F3"
}
}
}
코드펜스 언어는 theme, theme-overrides, json, yaml, yml 중 아무거나 사용 가능하다.
구조화 블록이 없더라도 DESIGN.md의 자연어 설명에서 Figma 스타일, letter-spacing, line-height, font family 같은 힌트를 일부 추출해 반영한다.
---
theme: black
---
기본 테마 사용:
---
theme: orange
---
이 경우 DESIGN.md가 같은 폴더에 있어도 무시한다.
주제별 DESIGN 사용:
---
theme: DESIGN.md
---
이 경우에만 DESIGN.md를 적극 적용한다. 미지정 시 dark.
각 테마는 뱃지 스타일 2종(badge[0], badge[1])을 가진다. 마크다운에서 {1}을 붙이면 두 번째 뱃지 색 사용:
# [뱃지 텍스트]{1} 타이틀
import { getTheme } from "./themes";
const theme = getTheme("black"); // ThemeColors 반환
const badgeStyle = theme.badge[0]; // BadgeStyle 반환
src/slides/themes.ts의 THEMES 객체에 새 테마 추가src/slides/types.ts의 Theme 타입 유니온에 이름 추가remotion-themes/SKILL.md)에 동기화markdowns/<topic>/DESIGN.md override로 우선 해결Remotion 슬라이드의 compare 타입 전용 스킬. 2~4개 항목을 나란히 비교하는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용.
슬라이드를 PDF로 내보내기. 각 슬라이드를 PNG로 렌더한 뒤 pdf-lib으로 합쳐서 단일 PDF 파일을 생성한다. "PDF로 뽑아줘", "PDF 내보내기" 등의 요청에 사용.
Remotion 슬라이드의 quote 타입 전용 스킬. 핵심 문장이나 인용구를 큰따옴표 장식과 함께 크게 보여주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 stat 타입 전용 스킬. 큰 숫자와 짧은 설명으로 임팩트를 주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 steps 타입 전용 스킬. 번호가 매겨진 순차 프로세스를 연결선과 함께 보여주는 슬라이드를 설계하거나 수정할 때 사용.