skill-gallery

theme-factory

Anthropic의 테마 도구 모음입니다. 글꼴 조합이 딸린 프리셋 색상 팔레트 10개(또는 생성한 사용자 지정 테마)를 랜딩 페이지 같은 완성된 결과물에 적용합니다. 색상과 서체만 다루며 레이아웃은 다루지 않습니다. 지침, 작은 테마 파일 10개, 쇼케이스 PDF로 이루어져 있습니다.

경로
skills/theme-factory · SKILL.md
고정 커밋
dbd4588f9e
라이선스
Apache-2.0

각 프롬프트는 Codex 네이티브, Codex + skill, Claude Code 네이티브, Claude Code + skill의 고정 2×2로 표시됩니다. 스크린샷을 클릭하면 전체 페이지를 볼 수 있습니다. 설치 및 사용 ↓

강점

skill의 자체 문서가 내세우는 강점을 출처와 함께 정리했습니다. 이는 주장일 뿐 결과가 아니므로, 아래의 실제 페이지와 비교해 보시기 바랍니다.

테스트 범위: SaaS 랜딩 페이지, 데이터 대시보드, 개인 블로그 및 포트폴리오. 범위 밖의 프롬프트는 ‘대기 중’이 아니라 ‘범위 밖’으로 표시합니다.

2차 실행 전에 skill 원문을 바탕으로 정했습니다. 원문이 밝힌 것은 랜딩 페이지뿐이며, 대시보드와 블로그·포트폴리오는 “reportings”와 “any artifact”에 근거합니다.

Codex 네이티브

성공
Codex · 네이티브 — SaaS 랜딩 페이지, 데스크톱 스크린샷(페이지 상단)Codex · 네이티브 — SaaS 랜딩 페이지, 모바일 스크린샷(페이지 상단)
모델
gpt-6.1-sol · high
시간
7m 51s
토큰
in 424k · out 24.5k
Skill 사용
해당 없음
외부 참조
fonts.googleapis.com, fonts.gstatic.com
실행 날짜
2026-10-25

a11y 심각 1▶ 녹화

👍 0 · 투표하기

Codex + theme-factory

성공
Codex + theme-factory — SaaS 랜딩 페이지, 데스크톱 스크린샷(페이지 상단)Codex + theme-factory — SaaS 랜딩 페이지, 모바일 스크린샷(페이지 상단)
모델
gpt-6.1-sol · high
시간
5m 57s
토큰
in 221k · out 20.8k
Skill 사용
예
외부 참조
fonts.googleapis.com, fonts.gstatic.com
실행 날짜
2026-10-26

a11y 심각 1▶ 녹화

👍 0 · 투표하기

Claude Code 네이티브

성공
Claude Code · 네이티브 — SaaS 랜딩 페이지, 데스크톱 스크린샷(페이지 상단)Claude Code · 네이티브 — SaaS 랜딩 페이지, 모바일 스크린샷(페이지 상단)
모델
claude-opus-5-5 · high
시간
7m 11s
토큰
in 30 · cache 873k · out 37.6k
Skill 사용
해당 없음
외부 참조
fonts.googleapis.com, fonts.gstatic.com
실행 날짜
2026-10-26

a11y 심각 1▶ 녹화

👍 0 · 투표하기

Claude Code + theme-factory

성공
Claude Code + theme-factory — SaaS 랜딩 페이지, 데스크톱 스크린샷(페이지 상단)Claude Code + theme-factory — SaaS 랜딩 페이지, 모바일 스크린샷(페이지 상단)
모델
claude-opus-5-5 · high
시간
6m 13s
토큰
in 36 · cache 967k · out 37.4k
Skill 사용
예
외부 참조
fonts.googleapis.com, fonts.gstatic.com
실행 날짜
2026-10-26

a11y 심각 1▶ 녹화

👍 0 · 투표하기

Codex 네이티브

성공
Codex · 네이티브 — 데이터 대시보드, 데스크톱 스크린샷(페이지 상단)Codex · 네이티브 — 데이터 대시보드, 모바일 스크린샷(페이지 상단)
모델
gpt-6.1-sol · high
시간
6m 56s
토큰
in 326k · out 25.8k
Skill 사용
해당 없음
외부 참조
fonts.googleapis.com, fonts.gstatic.com
실행 날짜
2026-10-25

a11y 치명적 1▶ 녹화

👍 0 · 투표하기

Codex + theme-factory

성공
Codex + theme-factory — 데이터 대시보드, 데스크톱 스크린샷(페이지 상단)Codex + theme-factory — 데이터 대시보드, 모바일 스크린샷(페이지 상단)
모델
gpt-6.1-sol · high
시간
11m 14s
토큰
in 523k · out 28.6k
Skill 사용
예
외부 참조
없음
실행 날짜
2026-10-26

a11y 치명적 1▶ 녹화

👍 0 · 투표하기

Claude Code 네이티브

성공
Claude Code · 네이티브 — 데이터 대시보드, 데스크톱 스크린샷(페이지 상단)Claude Code · 네이티브 — 데이터 대시보드, 모바일 스크린샷(페이지 상단)
모델
claude-opus-5-5 · high
시간
8m 03s
토큰
in 34 · cache 1.08M · out 46.4k
Skill 사용
해당 없음
외부 참조
없음
실행 날짜
2026-10-26

a11y 심각 1▶ 녹화

👍 0 · 투표하기

Claude Code + theme-factory

성공
Claude Code + theme-factory — 데이터 대시보드, 데스크톱 스크린샷(페이지 상단)Claude Code + theme-factory — 데이터 대시보드, 모바일 스크린샷(페이지 상단)
모델
claude-opus-5-5 · high
시간
6m 05s
토큰
in 36 · cache 923k · out 39.1k
Skill 사용
예
외부 참조
없음
실행 날짜
2026-10-26

a11y 심각 2▶ 녹화

👍 0 · 투표하기

Codex 네이티브

성공
Codex · 네이티브 — 개인 블로그 및 포트폴리오, 데스크톱 스크린샷(페이지 상단)Codex · 네이티브 — 개인 블로그 및 포트폴리오, 모바일 스크린샷(페이지 상단)
모델
gpt-6.1-sol · high
시간
4m 59s
토큰
in 218k · out 19.8k
Skill 사용
해당 없음
외부 참조
fonts.googleapis.com, fonts.gstatic.com
실행 날짜
2026-10-25

a11y 심각 1▶ 녹화

👍 0 · 투표하기

Codex + theme-factory

성공
Codex + theme-factory — 개인 블로그 및 포트폴리오, 데스크톱 스크린샷(페이지 상단)Codex + theme-factory — 개인 블로그 및 포트폴리오, 모바일 스크린샷(페이지 상단)
모델
gpt-6.1-sol · high
시간
8m 49s
토큰
in 221k · out 21.5k
Skill 사용
예
외부 참조
없음
실행 날짜
2026-10-26

a11y: 발견된 문제 없음▶ 녹화

👍 0 · 투표하기

Claude Code 네이티브

성공
Claude Code · 네이티브 — 개인 블로그 및 포트폴리오, 데스크톱 스크린샷(페이지 상단)Claude Code · 네이티브 — 개인 블로그 및 포트폴리오, 모바일 스크린샷(페이지 상단)
모델
claude-opus-5-5 · high
시간
10m 28s
토큰
in 24 · cache 661k · out 41.1k
Skill 사용
해당 없음
외부 참조
fonts.googleapis.com, fonts.gstatic.com
실행 날짜
2026-10-26

a11y 심각 1▶ 녹화

👍 0 · 투표하기

Claude Code + theme-factory

성공
Claude Code + theme-factory — 개인 블로그 및 포트폴리오, 데스크톱 스크린샷(페이지 상단)Claude Code + theme-factory — 개인 블로그 및 포트폴리오, 모바일 스크린샷(페이지 상단)
모델
claude-opus-5-5 · high
시간
6m 32s
토큰
in 34 · cache 963k · out 38.3k
Skill 사용
예
외부 참조
cdn.jsdelivr.net
실행 날짜
2026-10-26

a11y: 발견된 문제 없음▶ 녹화

👍 0 · 투표하기

설치 및 사용

프로젝트 수준 설치: skill 폴더(SKILL.md가 들어 있는 폴더)를 고정 커밋 기준으로 프로젝트에 복사합니다. 갤러리 실행에서도 같은 방식으로 설치했습니다.

Claude Code

설치

폴더를 <project>/.claude/skills/theme-factory/에 복사합니다.

git clone https://github.com/anthropics/skills.git /tmp/theme-factory-src
git -C /tmp/theme-factory-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .claude/skills
cp -R /tmp/theme-factory-src/skills/theme-factory .claude/skills/theme-factory

사용

# 대화형
/theme-factory <작업 내용>

# 또는 요청 끝에 다음 문장 추가
Use the theme-factory skill.

# 헤드리스(갤러리 실행과 동일)
claude -p '<작업 내용> Use the theme-factory skill.'

모든 프로젝트에서 사용하려면 대신 ~/.claude/skills/theme-factory/에 폴더를 두면 됩니다. 요청이 skill 설명과 일치하면 Claude Code가 skill을 스스로 로드할 수도 있습니다.

Codex

설치

폴더를 <project>/.agents/skills/theme-factory/에 복사합니다.

git clone https://github.com/anthropics/skills.git /tmp/theme-factory-src
git -C /tmp/theme-factory-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .agents/skills
cp -R /tmp/theme-factory-src/skills/theme-factory .agents/skills/theme-factory

사용

# 대화형: 이름으로 언급하거나 /skills에서 선택
$theme-factory <작업 내용>

# 헤드리스(갤러리 실행과 동일)
codex exec -s workspace-write '<작업 내용> Use the $theme-factory skill.'

모든 프로젝트에서 사용하려면 대신 ~/.agents/skills/theme-factory/에 폴더를 두면 됩니다. Codex도 설명을 보고 skill을 스스로 선택할 수 있습니다.

참고

메타데이터: skills/theme-factory/meta.yaml · Copyright 2026 Anthropic, PBC.