Skill: Frontend Design
템플릿 같지 않은 UI 미감과 타이포그래피 방향을 잡는 공식 스킬
한눈에 보기
공식 검증 2026년 8월 29일
- 프로토콜
- SKILL.md
- 인증
- 공개 자료, 별도 인증 없음
- 비용
- 무료 공개 자료
- 제공 상태
- 공개
Use cases
이럴 때 이렇게 연결합니다
먼저 어떤 어려움을 해결하는지 읽고, 그림에서 입력과 전달값, 사람 확인 지점을 따라가 보세요. 결과 패널은 해당 흐름이 끝났을 때 남는 값을 보여 줍니다. 아래 내용은 공식 기능을 바탕으로 만든 예시 설계이며, SION.LAB의 실제 운영 사례를 뜻하지 않습니다.
추천 구성 · Situation 01
기능 요구만 따라 배치해 브랜드 성격과 사용 맥락이 보이지 않는 인터페이스 작업
- 어떤 어려움인가
- 템플릿 같지 않은 웹 화면을 만드는 제품팀이 자주 마주치는 문제입니다. 구체적으로는 '기능 요구만 따라 배치해 브랜드 성격과 사용 맥락이 보이지 않는 인터페이스 작업' 상황입니다.
- 이렇게 해결합니다
- Skill: Frontend Design 단계에서는 지침의 제작 단계와 품질 확인 순서를 그대로 적용합니다. 입력 범위는 '대상 사용자, 핵심 과업, 브랜드 성격과 기술 제약'입니다. 필요한 필드만 골라 '명확한 미감과 접근성을 갖춘 구현 화면' 형태로 정리합니다.
- 왜 연결하는가
- 처음에는 Skill: Frontend Design 하나만 사용합니다. 입력·처리·검토 경계를 확인한 뒤에만 다른 시스템과 연결하면 실패 원인을 찾기 쉽습니다.
- 마지막 확인
- 검토 대상은 '명확한 미감과 접근성을 갖춘 구현 화면'입니다. 원문 근거, 제외 조건, 누락 항목이 구분되는지 확인합니다. 결과를 바로 반영하지 않고 담당자가 확인한 뒤 다음 단계로 넘깁니다.
- 01 · 입력작은 입력 범위대상 사용자, 핵심 과업, 브랜드 성격과 기술 제약업무 조건
- 02 · 현재 자료Skill: Frontend Design스킬 실행: 입력 범위는 '대상 사용자, 핵심 과업, 브랜드 성격과 기술 제약'입니다. 필요한 필드만 골라 '명확한 미감과 접근성을 갖춘 구현 화면' 형태로 정리합니다.처리 결과
- 03 · 사람 확인담당자 검토검토 대상은 '명확한 미감과 접근성을 갖춘 구현 화면'입니다. 원문 근거, 제외 조건, 누락 항목이 구분되는지 확인합니다.확인 완료
- 04 · 결과검토용 결과명확한 미감과 접근성을 갖춘 구현 화면
Result
이 흐름으로 남는 값
추천 구성 · Situation 02
명확한 미감과 접근성을 갖춘 구현 화면을 다음 업무로 이어야 할 때
- 어떤 어려움인가
- '기능 요구만 따라 배치해 브랜드 성격과 사용 맥락이 보이지 않는 인터페이스 작업' 문제를 한 번 처리해도 결과를 다음 업무로 다시 옮기면 복사·누락·중복이 생깁니다.
- 이렇게 해결합니다
- Skill: Frontend Design 단계에서는 지침의 제작 단계와 품질 확인 순서를 그대로 적용합니다. 입력 범위는 '대상 사용자, 핵심 과업, 브랜드 성격과 기술 제약'입니다. 필요한 필드만 골라 '명확한 미감과 접근성을 갖춘 구현 화면' 형태로 정리합니다. 다음 단계인 Skill: Web Artifacts Builder에서는 '브라우저에서 작동하는 검토용 웹 아티팩트' 형태로 업무 문맥을 보강합니다.
- 왜 연결하는가
- Skill: Frontend Design의 결과에는 원문 식별자와 처리 시각을 붙여 Skill: Web Artifacts Builder로 전달합니다. 두 도구가 같은 판단을 반복하지 않도록 처리 역할과 보강 역할을 나눕니다.
- 마지막 확인
- 검토 대상은 '명확한 미감과 접근성을 갖춘 구현 화면'입니다. 원문 근거, 제외 조건, 누락 항목이 구분되는지 확인합니다. 이어서 검토 대상은 '브라우저에서 작동하는 검토용 웹 아티팩트'입니다. 원문 근거, 제외 조건, 누락 항목이 구분되는지 확인합니다. 두 단계 중 하나라도 근거가 비어 있으면 연결 결과를 미확정으로 남깁니다.
- 01 · 입력업무 입력대상 사용자, 핵심 과업, 브랜드 성격과 기술 제약정리된 입력
- 02 · 현재 자료Skill: Frontend Design명확한 미감과 접근성을 갖춘 구현 화면근거 포함 결과
- 업무 문맥 보강
- 04 · 결과연결 결과원문 근거와 두 단계의 처리 상태가 함께 남은 결과
Result
이 흐름으로 남는 값
추천 구성 · Situation 03
기능 요구만 따라 배치해 브랜드 성격과 사용 맥락이 보이지 않는 인터페이스 작업을 반복 운영해야 할 때
- 어떤 어려움인가
- '기능 요구만 따라 배치해 브랜드 성격과 사용 맥락이 보이지 않는 인터페이스 작업' 문제를 정기적으로 처리하려면 성공 경로뿐 아니라 권한 오류, 재실행, 승인 책임까지 정해야 합니다.
- 이렇게 해결합니다
- Skill: Frontend Design 단계에서는 지침의 제작 단계와 품질 확인 순서를 그대로 적용합니다. 입력 범위는 '대상 사용자, 핵심 과업, 브랜드 성격과 기술 제약'입니다. 필요한 필드만 골라 '명확한 미감과 접근성을 갖춘 구현 화면' 형태로 정리합니다. 보강은 Skill: Web Artifacts Builder, 전달과 후속 처리는 Playwright로 분리합니다.
- 왜 연결하는가
- 같은 작업 ID가 Skill: Frontend Design → Skill: Web Artifacts Builder → Playwright 순서로 이어집니다. 마지막 반영 전에는 담당자가 대상과 근거를 확인하고 승인합니다.
- 마지막 확인
- 검토 대상은 '명확한 미감과 접근성을 갖춘 구현 화면'입니다. 원문 근거, 제외 조건, 누락 항목이 구분되는지 확인합니다. 실패한 단계만 다시 실행할 수 있도록 입력 버전·처리 시각·오류·승인자를 기록합니다.
- 업무 담당자01 · 입력반복 실행 입력대상 사용자, 핵심 과업, 브랜드 성격과 기술 제약과 작업 ID작업 요청
- 자동 처리02 · 현재 자료Skill: Frontend Design명확한 미감과 접근성을 갖춘 구현 화면1차 처리
- 외부 연결보강 데이터
- 외부 연결검토 요청
- 사람 확인05 · 사람 확인담당자 승인대상·근거·변경 내용을 확인한 뒤 마지막 반영을 승인승인·보류 기록
- 기록·알림06 · 결과기록·알림작업 ID, 처리 상태, 오류, 승인자를 저장하고 필요한 채널에 결과 전달추적 가능
Result
이 흐름으로 남는 값
연결
새 UI를 만들거나 기존 화면을 다시 잡을 때 시각적 방향을 의도적으로 결정하도록 돕는 Anthropic 공식 스킬입니다. 색 팔레트와 타이포그래피, 레이아웃에 대해 근거 있는 선택을 하도록 안내하며, 기본값처럼 보이는 결과를 피하는 데 초점을 둡니다.
별도 자격이나 외부 연결은 필요 없습니다. 주제 자체에서 시각 언어를 끌어내라는 원칙을 두어 장식이 아니라 내용에서 출발하도록 만듭니다.
설치는 단일 셸 명령이 아니라 Claude Code의 플러그인 마켓플레이스 흐름을 따릅니다. 먼저 `/plugin marketplace add anthropics/skills`로 저장소를 마켓플레이스로 등록한 뒤 `/plugin install example-skills@anthropic-agent-skills`을 실행합니다. 저장소를 쓰지 않고 스킬 폴더를 `~/.claude/skills/`나 프로젝트의 `.claude/skills/`에 직접 복사해도 인식됩니다. 예제 스킬 묶음에 포함돼 함께 설치됩니다. 코드를 실행하기보다 판단 기준을 제공하는 성격이라 별도 런타임 요구가 없습니다.
만들어 놓고 보니 어디서 본 듯한 화면이 나오는 문제를 겪는 개발자에게 맞습니다.
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.