Codex 네이티브
성공
👍 0 · 투표하기
frontend-design
Anthropic의 공식 프런트엔드 디자인 skill입니다. 코드를 작성하기 전에 디자인 방향(팔레트, 서체, 레이아웃, 원칙)을 먼저 정하고, 흔한 AI 기본값과 비교해 점검하도록 에이전트에게 요구합니다. 지침만 있고 스크립트는 없습니다.
- 경로
skills/frontend-design· SKILL.md- 고정 커밋
dbd4588f9e- 라이선스
- Apache-2.0
각 프롬프트는 Codex 네이티브, Codex + skill, Claude Code 네이티브, Claude Code + skill의 고정 2×2로 표시됩니다. 스크린샷을 클릭하면 전체 페이지를 볼 수 있습니다. 설치 및 사용 ↓
강점
skill의 자체 문서가 내세우는 강점을 출처와 함께 정리했습니다. 이는 주장일 뿐 결과가 아니므로, 아래의 실제 페이지와 비교해 보시기 바랍니다.
- 템플릿 기본값처럼 보이지 않는, 개성 있고 의도가 담긴 시각 디자인 출처
- 요구 사항에 맞춘 색상, 타이포그래피, 레이아웃에 대한 신중하고 주관 있는 선택으로 고객마다 고유한 시각 정체성을 부여 출처
- 타이포그래피가 페이지의 개성을 담는다 출처
테스트 범위: SaaS 랜딩 페이지, 데이터 대시보드, 개인 블로그 및 포트폴리오. 범위 밖의 프롬프트는 ‘대기 중’이 아니라 ‘범위 밖’으로 표시합니다.
v0 실행 후에 skill 원문과 대조해 확인했습니다(미리 정한 것이 아닙니다). 원문은 제외하는 페이지 유형을 밝히지 않습니다.
SaaS 랜딩 페이지
landing-saas
데이터 대시보드
dashboard
개인 블로그 및 포트폴리오
blog-portfolio
설치 및 사용
프로젝트 수준 설치: skill 폴더(SKILL.md가 들어 있는 폴더)를 고정 커밋 기준으로 프로젝트에 복사합니다. 갤러리 실행에서도 같은 방식으로 설치했습니다.
Claude Code
설치
폴더를 <project>/.claude/skills/frontend-design/에 복사합니다.
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .claude/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .claude/skills/frontend-design사용
# 대화형
/frontend-design <작업 내용>
# 또는 요청 끝에 다음 문장 추가
Use the frontend-design skill.
# 헤드리스(갤러리 실행과 동일)
claude -p '<작업 내용> Use the frontend-design skill.'모든 프로젝트에서 사용하려면 대신 ~/.claude/skills/frontend-design/에 폴더를 두면 됩니다. 요청이 skill 설명과 일치하면 Claude Code가 skill을 스스로 로드할 수도 있습니다.
Codex
설치
폴더를 <project>/.agents/skills/frontend-design/에 복사합니다.
git clone https://github.com/anthropics/skills.git /tmp/frontend-design-src
git -C /tmp/frontend-design-src checkout dbd4588f9e1033efb41dad4bef2f7947c8993d44
mkdir -p .agents/skills
cp -R /tmp/frontend-design-src/skills/frontend-design .agents/skills/frontend-design사용
# 대화형: 이름으로 언급하거나 /skills에서 선택
$frontend-design <작업 내용>
# 헤드리스(갤러리 실행과 동일)
codex exec -s workspace-write '<작업 내용> Use the $frontend-design skill.'모든 프로젝트에서 사용하려면 대신 ~/.agents/skills/frontend-design/에 폴더를 두면 됩니다. Codex도 설명을 보고 skill을 스스로 선택할 수 있습니다.
참고
- 같은 SKILL.md가 anthropics/claude-plugins-official과 anthropics/claude-code에도 공개되어 있으며, 이 갤러리는 anthropics/skills를 사용합니다.
- 업스트림에서 2026년에 이 skill을 여러 차례 다시 작성했으므로 항상 고정 커밋을 사용해야 합니다.
메타데이터: skills/frontend-design/meta.yaml