작업 스킬
Anthropic Skills · Frontend Design
의도적인 레이아웃, 타이포그래피 및 상호 작용 선택을 통해 인터페이스를 계획하고 구축하고 비평합니다.
소개
공개 문서를 바탕으로 LessAI Tools가 정리
frontend-design 기술은 새로운 인터페이스나 기존 페이지에 대한 시각적 결정을 통해 어시스턴트를 안내합니다. 제품과 청중으로부터 시작하여 디자인 계획을 개발하고, 구축하는 동안 계획을 적용하고 비평합니다.
인터페이스가 일반적으로 보이거나 시각적 우선순위가 불분명할 때 사용하세요. 여기에는 모바일 레이아웃, 키보드 포커스 및 접근 가능한 프레젠테이션에 대한 구현 지침 및 검사가 포함됩니다. 제품 요구 사항이나 기능 테스트를 대체하지 않습니다.
시작하기
준비 사항
- 스킬을 로드하고 프런트엔드 프로젝트를 읽거나 편집할 수 있는 어시스턴트를 사용하세요. 해당 클라이언트의 공식 지침을 따르십시오.
- 실제 개요, 콘텐츠 및 프로젝트 제약 조건을 제공합니다. 브라우저에서 결과 인터페이스를 미리 보고 해당 동작을 확인합니다.
제한 및 비용
- 이는 올바른 비즈니스 논리나 자동 접근성 준수를 약속하는 것이 아니라 디자인 및 구현 지침입니다.
- 저장소에는 자체 라이센스 조건이 있는 다른 기술이 포함되어 있습니다. 사용하기 전에 선택한 스킬과 참조된 자산을 확인하세요.
- GitHub 별은 frontend-design 단독이 아닌 anthropics/skills 전체를 설명합니다. 이 사이트에서는 번들로 제공되는 모든 기술에 대해 설치 테스트를 실시하지 않고 문서를 검토했습니다.
공개 문서를 기반으로 합니다. 모든 프로젝트를 직접 설치해 테스트하지는 않았습니다.
활용 방법
- frontend-design — 실제 제품, 청중 및 페이지 콘텐츠에 시각적 방향을 연결합니다.
- 일관된 팔레트, 타이포그래피, 레이아웃을 선택한 다음 인터페이스를 구축하는 동안 계획을 적용하세요.
- 모바일 동작, 키보드 포커스, 가독성 및 불필요한 장식에 대한 결과를 비판합니다.
공식 프로젝트 및 문서
프로젝트 설명(번역)
상담원 기술을 위한 공개 저장소
비슷한 작업의 플러그인
주요 용도를 우선하고 공통 작업과 스타 수를 참고합니다. 연결 방법은 다를 수 있습니다.
- Taste Skill — 공개 웹사이트에 의도적인 시각적 방향을 부여한 다음 브라우저에서 결과를 확인하세요.
- Text to CAD — 치수와 모양 설명으로 편집 가능한 3D 부품을 만듭니다.
- Stitch Skills — 텍스트·이미지 기획에서 화면 디자인과 프런트엔드로 이어집니다.