견적 도구를 위한 홈페이지
프리랜스 디자이너가 견적 생성, 범위 변경 합의 및 클라이언트 승인 획득 방법을 이해할 수 있도록 돕습니다.
브랜드 자산가격FAQ 문구
전체 프롬프트 보기 ↗스킬이 안내하는 것
- 01시각적 방향 찾기
제품에 맞춘 팔레트, 타이포그래피 계층, 레이아웃.
- 02계획 검토
제작 전에 브리프와 방향을 대조합니다.
- 03제작 및 개선
명확한 액션과 접근 가능한 상태를 갖춘 반응형 인터페이스.
frontend-design작성자 AnthropicFrontend Design 스킬.
독창적인 UI 디자인을 위한 Claude Code 및 Codex 스킬입니다: 의도적으로 선택된 타이포그래피, 색상 및 레이아웃.
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.
Clear scope.
A considered space for your next project, from the first quote to the final yes.
Create your quote ↗YOUR NEXT PROJECTBrand &
website design
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT
“A quoting tool for freelance designers.
Make the next step feel clear.”
01 브리프에서 인터페이스까지
브리프에서 인터페이스까지, 프론트엔드 디자인 작업.
Claude Code 또는 Codex에 제품, 대상, 콘텐츠를 전달하면 frontend-design 스킬이 시각적 결정을 내립니다.
02 적합성 확인
frontend-design 스킬 사용 시점
시각적 결정이 작업의 일부인 경우 frontend-design 스킬을 사용합니다 — Claude Code 또는 Codex에서 제작된 새 페이지 또는 템플릿처럼 보이는 인터페이스의 재디자인.
적합한 경우
- 브리프로부터 새 페이지 또는 사이트랜딩 페이지, 제품 사이트, 포트폴리오, 소규모 앱 등 첫 질문이 "어떻게 보여야 하는가?"인 모든 경우.
- 기존 인터페이스의 시각적 재디자인템플릿처럼 보이는 작동하는 UI가 있으며 제품의 주제에 기반한 방향을 원합니다.
- 타이포그래피와 계층 수정프레임워크 기본값이 아닌 의도를 가지고 설정된 타입 스케일, 행 길이, 굵기, 간격.
- 실제 콘텐츠가 포함된 브리프스킬은 브리프의 실제 카피와 주제를 기반으로 작성합니다. 실제 자료를 더 많이 제공할수록 결과가 더 구체적입니다.
한계 인지하기
- 이미 디자인 시스템이 있습니다규칙과 컴포넌트를 제공하십시오. 스킬은 브리프를 따르고 열려 있는 시각적 선택 내에서 작업해야 합니다.
- 작업이 로직, 데이터 또는 백엔드인 경우이 스킬은 시각적 디자인에 초점을 맞춥니다. 애플리케이션 로직, API 및 기능 테스트는 별도의 구현 작업이 필요합니다.
- 컴포넌트 라이브러리 또는 템플릿을 원하는 경우이 스킬은 미리 만들어진 컴포넌트 라이브러리나 페이지 템플릿이 아닌 디자인 지침을 제공합니다.
- 완성된 UI의 검토가 필요합니다자체 비평은 자신의 계획을 대상으로 합니다. 다른 사람의 인터페이스를 감사하려면 아래 관련 스킬을 참조하십시오.
제공할 사항
- 제품 주제제품이 무엇이며 어느 산업에 속하는지. 이를 생략하면 스킬이 하나를 제안하고 확인을 요청합니다.
- 대상 사용자페이지가 누구를 위한 것인지. 이는 다른 무엇보다도 시각적 표현 방식을 결정합니다.
- 페이지 목표페이지가 수행해야 하는 하나의 작업과 주요 액션.
- 실제 콘텐츠헤드라인, 카피, 가격, FAQ 답변. 플레이스홀더 텍스트는 플레이스홀더처럼 보이는 디자인을 만듭니다.
- 브랜드 자산 및 제약 조건로고, 팔레트, 폰트 및 이미 결정된 모든 것. 브리프 자체의 단어가 항상 우선합니다.
03 의도를 가지고 디자인하기
스킬이 UI 디자인에 제공하는 것
frontend-design 스킬이 Claude Code 또는 Codex에 지시하는 네 가지 작업과 각각이 입력을 무엇으로 변환하는지.
주제에 기반한 시각적 방향
에이전트는 무엇이든 선택하기 전에 제품이 무엇인지, 누구에게 서비스하는지, 그 세계가 어떻게 보이는지를 파악합니다. 8세 아동을 위한 장난감과 분석가를 위한 대시보드는 같은 외관을 공유해서는 안 됩니다.
- 제공 내용
- 제품 주제, 대상 고객
- 결과물
- 코드가 작성되기 전에 수락하거나 재지시할 수 있는 방향
목적을 가지고 선택된 타입, 색상 및 레이아웃
실제 스케일을 가진 하나 또는 두 개의 서체, hex로 명명된 4~6개의 색상 팔레트, 정렬 규칙을 가진 레이아웃 개념. 규칙, 번호 매기기, 레이블과 같은 구조적 장치는 정보를 전달하는 경우에만 사용됩니다.
- 제공 내용
- 브랜드 자산, 제약사항
- 결과물
- 페이지를 구성하는 간결한 토큰 시스템
빌드 전에 브리프를 기준으로 검토된 계획
스킬은 두 단계로 작동합니다. 먼저 계획을 작성한 다음, 각 부분을 "이와 유사한 페이지에도 이것을 만들 것인가?"라는 질문에 대조하여 기본값처럼 읽히는 것을 수정합니다. 변경된 사항과 이유를 명시합니다. 코드는 그 이후에 작성됩니다.
- 제공 내용
- 브리프
- 결과물
- 대화 기록에서 확인할 수 있는 서면 계획과 간단한 자체 검토
요청하지 않아도 기본적으로 제공되는 품질
모바일까지 반응형 지원, 키보드 포커스 표시, 움직임 감소 설정 준수, 접근 가능한 색상 대비, 사용자 관점의 명확하고 능동적인 언어로 작성된 카피.
- 제공 내용
- 귀하의 접근성 요구사항
- 결과물
- 모바일 및 키보드 사용 지침
04 활용하기
Claude Code 또는 Codex에 frontend-design 설치
npx skills add 명령 한 번으로 에이전트에 브리프를 전달하고 첫 결과물의 체크리스트를 받습니다.
Claude Code, Codex 또는 사용자의 에이전트에 frontend-design 추가
프로젝트에서 명령을 실행하고, 설치 프로그램의 에이전트 선택을 따른 다음, 에이전트가 frontend-design를 검색할 수 있는지 확인하십시오.
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design명령어 출처: skills.sh의 frontend-design 항목. 설치 프로그램을 따라 진행하고 에이전트에 스킬이 표시되는지 확인하십시오.
스킬에 첫 UI 디자인 작업 부여하기
제품 세부사항으로 이 브리프를 수정하고, 참조하는 브랜드 자산을 첨부한 후 Claude Code 또는 Codex에서 실행하십시오.
Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.첫 번째 결과 확인
좋은 첫 실행은 쉽게 알아볼 수 있습니다. 페이지를 승인하기 전에 대화 내용과 결과물에서 다음을 확인하십시오:
- 코드 이전에 계획이 있었으며, 명명된 팔레트 값과 서체 역할이 포함되어 있습니다.
- 자체 검토에서 교체한 기본값을 하나 이상 명시하고 그 이유를 설명합니다.
- 실제 카피, 가격 및 브랜드 자산이 변경 없이 나타납니다.
- 하나의 요소가 기억에 남고, 페이지의 나머지는 조용히 유지됩니다.
- 페이지는 390px에서 작동하며, 탭 이동 시 포커스 링이 표시되고, 모션은 운영 체제 설정을 따릅니다.
- 일반적으로 읽힌다면 어느 부분인지 알려주십시오 — 스킬은 해당 지적을 받아 수정하도록 작성되어 있습니다.
OpenDesign을 사용하십니까? frontend-design은 OpenDesign에 포함되어 있습니다. Plugins → Skills를 열고 상단 바에서 선택하면 SKILL.md가 DESIGN.md와 함께 프롬프트에 구성됩니다. Claude Code, Codex, Cursor 또는 OpenCode가 작업을 수행합니다.
05 오픈 소스, 추적 가능
출처, 라이선스 및 검증
이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.
- Author
- Anthropic
- Repository
- github.com/anthropics/skills 브랜치
main - 스킬 파일
skills/frontend-design/SKILL.md검증 시 기록된 콘텐츠 체크섬; 커밋34040c9- License
- Apache-2.0 skills/frontend-design/LICENSE.txt에서 가져옴; SKILL.md는 "Complete terms in LICENSE.txt"라고 명시합니다. 저장소 루트는 별도의 라이선스를 선언하지 않습니다.
- 리포지토리 스타
- 176,183 여러 스킬을 포함하는 anthropics/skills 저장소 전체에 대한 GitHub 스냅샷이 2026-09-14에 촬영되었습니다. frontend-design의 평가 또는 사용 횟수가 아닙니다.
- OpenDesign에서 검증됨
- 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign main에 번들로 포함됨(2026-08-28 확인); OpenDesign에서의 실시간 실행은 아직 이 페이지에 기록되지 않았습니다.
스킬 자체 설명
"새 UI를 구축하거나 기존 UI를 재구성할 때 독특하고 의도적인 시각적 디자인을 위한 지침. 미적 방향, 타이포그래피 및 템플릿화된 기본값처럼 보이지 않는 선택을 하는 데 도움을 줍니다."
Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. GitHub에서 전체 파일 읽기.
Frontend Design
에이전트에게 설계할 가치가 있는 브리프를 제공하십시오.
frontend-design 스킬은 OpenDesign에 포함되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 스킬을 선택한 후 예시 프롬프트를 붙여넣고 코드 전에 계획을 확인하십시오.
터미널
npx skills add https://github.com/anthropics/skills --skill frontend-design