Frontend Design Skills: Claude Code·Codex 설치 안내

설치 전에 Skill 선택하기

Anthropic의 frontend-design은 시각 디자인 지침입니다. Taste는 별도의 커뮤니티 프로젝트이며 Framer 변환과 모션 Skill도 용도가 다릅니다. README 소개는 설치용 SKILL.md가 아닙니다. 원본, 라이선스, 의존성을 먼저 확인하세요. 아래는 Anthropic Skill을 기준으로 한 예시이며 범용 설치 프로그램이 아닙니다.

Claude Code에 설치하기

프로젝트 폴더에 설치하면 해당 저장소로 범위를 제한할 수 있습니다. 원래 폴더 구조, 라이선스와 지원 파일을 유지하세요. Agent로 복사하는 것은 설치 요청문이며 웹사이트가 컴퓨터에 직접 설치하지 않습니다.

.claude/skills/frontend-design/SKILL.md

Codex에 설치하기

Codex는 다른 프로젝트 경로를 사용합니다. 호환되는 지침을 재사용하되 전용 명령과 의존성은 실행 전에 확인하세요. Skill은 작업 지침이며 백엔드나 다른 도구의 계정을 제공하지 않습니다.

.agents/skills/frontend-design/SKILL.md

하나의 요구사항을 실행하고 실제 페이지 확인하기

페이지, 대상 사용자, 주요 동작과 유지할 사실을 명시하세요. 아래 요구사항이나 실측 예제를 활용해 1280, 390, 320 px에서 화면, 링크, 키보드 조작을 확인하세요. 소스와 캡처를 보관하고 실패한 항목도 기록하세요.

Frontend Design Skill이 보이지 않거나 실행되지 않나요?

먼저 설치 방법을 확인하세요. 프로젝트 Skill 폴더와 Claude Code 플러그인은 위치와 명령 이름이 다릅니다.

프로젝트의 Skill 폴더

Claude Code 수동 설치 예시는 SKILL.md와 지원 파일을 .claude/skills/frontend-design/에 둡니다. Codex는 위의 .agents/skills/ 예시를 사용합니다. README 개요는 설치할 파일이 아닙니다.

플러그인이 제공하는 Skill

Claude Code에서 /plugin을 열어 설치·활성화 여부와 대상 프로젝트 또는 사용자 범위를 확인하세요. 메뉴에 표시된 명령을 사용하세요. 플러그인 Skill에는 네임스페이스가 붙을 수 있으므로 자체 설정 안내를 따르세요.

이 순서로 확인하세요

1. 현재 프로젝트, 선택한 Skill의 출처와 설치 범위를 확인하세요. 필요한 지원 파일을 유지하고, 같은 이름의 폴더는 교체 전에 비교하세요.
2. SKILL.md 파일명과 첫 줄에서 시작하는 YAML을 확인하세요. Claude Code에서는 name, description, 호출 제어 필드를 확인하세요. YAML 오류는 수동 호출이 되더라도 자동 매칭에 영향을 줄 수 있습니다.
3. Skill이 목록에 있는지 확인하세요. Claude Code에 사용 가능한 Skills를 묻고 / 메뉴를 확인하세요. 목록에 있지만 사용하지 않으면 설명에 맞는 작업으로 직접 호출하고 disable-model-invocation과 user-invocable을 확인하세요.
4. Agent가 원하는 Skill을 실제로 읽고 작업을 수행했는지 확인하세요. 파일 경로나 도구 기록을 결과와 함께 남긴 뒤 브라우저로 확인하세요. 폴더명이나 멋진 화면만으로 Skill 사용을 확인할 수 없습니다.

아래 Codex 예시는 고정 버전 파일을 수동으로 읽었습니다. 자동 검색이나 Claude Code 플러그인 설치를 검증하지 않았습니다. 설치한 버전의 공식 문서를 확인하세요.

용도에 맞는 관련 Skill

6개 상세 페이지 모두 로그인 없이 읽고 복사할 수 있습니다. 각 페이지의 준비 사항을 확인하세요. Framer 연동, 동영상 도구, 지원 모듈은 일반 프런트엔드 Skill과 다릅니다.

• Taste Skill — 개요 및 설치

  프로젝트와 작업 흐름을 소개하는 README입니다. 설치할 파일 자체는 아닙니다.

• Taste Skill — 프런트엔드 디자인 (v2 실험판)

  랜딩 페이지와 포트폴리오용 커뮤니티 디자인 작업 흐름입니다. 보관된 v2는 실험 버전입니다.

• Framer Skills — Convert Prompt 프롬프트 변환

  React/Tailwind 요청을 Framer용 프롬프트로 변환합니다. Framer 연동 조건을 확인하세요.

• Framer Skills — Sync Styles 스타일 동기화

  명시적으로 제공한 색상, 텍스트 스타일, 아이콘을 Framer로 동기화합니다. 해당 연동이 필요합니다.

• Claude Motion — 커뮤니티 모션 디자인 Skill

  Claude Code/Remotion 커뮤니티 영상 작업 흐름입니다. Anthropic 기본 기능이 아닙니다.

• Genjutsu Skill — Cast 워크플로

  Cast로 모션과 미세한 인터랙션을 구현합니다. 필요한 _jutsu 모듈을 함께 유지하세요.

수정해서 사용할 수 있는 독창적인 연습

Neruve가 작성한 영어 입력 예시입니다. 실제 도구 실행 결과나 유료 템플릿 프롬프트가 아닙니다. 사용하기 전에 가상의 정보를 실제 정보로 바꾸세요.

Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.

Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.

First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.

Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.

실측 예제: frontend-design으로 만든 Fieldnote

가상의 연구 노트 페이지입니다. 노트 예시, 수집·비교·결정 과정과 작동하는 페이지 내 링크를 구현했습니다. 예제를 열거나 원래 요구사항과 HTML을 내려받을 수 있습니다. 예제는 영어입니다.

2026년 10월 13일 Codex에서 고정 버전의 Anthropic Skill을 수동으로 읽고 구현한 뒤 브라우저로 확인했습니다. 사용한 원본: Anthropic frontend-design · dbd4588

재현하려면 위 안내대로 Skill을 설치한 뒤 내려받은 요구사항을 전달하세요. 1280, 390, 320 px 출력, 과정 링크와 키보드 포커스를 확인하고 차이를 기록하세요.

수동으로 지침을 제공한 단일 예제입니다. Skill 자동 검색, Claude Code, Taste, Neruve 생성 서비스를 검증하지 않았습니다. 모델 비교, 가입 흐름이나 전환율 향상 증거도 없습니다.

자주 묻는 질문

디자인과 함께 제공되는 프롬프트 살펴보기

Neruve 공개 카탈로그는 웹사이트 디자인, 이용 가능한 연결 프롬프트 및 Skills 디렉터리를 제공합니다. 인터랙티브 미리보기에는 로그인이 필요하지 않으며, 연결된 프롬프트에는 항목과 요금제 이용 권한이 적용됩니다. 이 워크플로는 본인의 개발 도구를 사용하므로 공개 Neruve 사이트 생성 기능이 필요하지 않습니다.

• 라이브러리 탐색
• SaaS 랜딩 페이지 HTML 템플릿과 프롬프트
• 포트폴리오 웹사이트 템플릿과 디자인 프롬프트

공식 참고 자료

• Anthropic frontend-design
• Claude Code · SKILL.md
• Claude Code · Plugins
• Codex · SKILL.md

외부 도구와 스킬은 각 제작자에게 귀속됩니다. 참고 링크는 제휴나 이용 권한 제공을 의미하지 않습니다.