juliobsz/skills

어떤 프로젝트인가요?

핵심 기능

• 01한 줄 브리프를 콘셉트, 디자인 시스템, 완성된 사이트로 구현
• 02색상 팔레트, 타이포그래피, 그리드, 모션 규칙을 DESIGN.md에 작성
• 03GSAP, Lenis, OGL을 사용해 Next.js(App Router) 또는 Astro로 개발
• 04프로덕션 빌드, 크롤링 감사, axe, 실제 브라우저 스크린샷으로 결과 확인
• 05웹사이트를 평가하고 기대 효과에 따라 개선 항목의 우선순위를 정하는 /jury 포함

활용 사례

• AI 코딩 에이전트에 짧은 설명을 입력해 개인 포트폴리오나 스튜디오 사이트 생성
• 기존 랜딩 페이지를 재설계해 시각적 임팩트 강화
• jury 스크립트로 사이트의 SEO, 접근성, 성능 감사
• 구조화된 디자인 평가 기준으로 경쟁사 웹사이트 벤치마킹

빠른 시작

1. 1

   skills CLI를 사용해 awwwards 스킬을 전역으로 설치합니다

   npx skills add juliobsz/skills -g
2. 2

   새 에이전트 세션을 열고 웹사이트를 만들어 달라고 요청하거나 /awwwards를 입력합니다

사용 전 알아둘 점

• !전체 실행에는 긴 세션과 많은 토큰이 필요합니다.
• !결과는 기반 모델이 자체 스크린샷을 평가하는 능력에 따라 달라집니다.
• !사이트에는 자리 표시자 콘텐츠가 포함되어 있으므로 실제 프로젝트와 문구로 교체해야 합니다.
• !/jury 점수는 제휴 관계가 없는 추정치이며, 단 두 개 사이트에서만 검증되었습니다.

토픽

자주 묻는 질문

skills은(는) 무엇인가요?

한 줄 브리프만으로 수상작 스타일의 웹사이트를 만드는 AI 코딩 에이전트용 스킬과 사이트 평가용 /jury 스킬 awwwards는 Claude Code, Codex, Antigravity 같은 코딩 에이전트용 스킬입니다. “포트폴리오를 만들어 줘. 내 이름은 Julio야”처럼 짧은 브리프를 받으면 콘셉트 구상부터 아트 디렉션, 개발, QA까지 진행해 AI가 만든 사이트에서 흔히 보이는 평범한 템플릿 느낌을 피하는 것을 목표로 합니다. DESIGN.md에 디자인 시스템을 작성하고 콘셉트와 대표 모션 장면을 정한 뒤, 모션과 WebGL에는 GSAP, Lenis, OGL을 사용해 Next.js 또는 Astro로 사이트를 만듭니다.

skills은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

skills은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

skills은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. skills의 마지막 커밋은 2026년 10월 18일입니다.

skills은(는) 어디에 사용할 수 있나요?

AI 코딩 에이전트에 짧은 설명을 입력해 개인 포트폴리오나 스튜디오 사이트 생성 기존 랜딩 페이지를 재설계해 시각적 임팩트 강화 jury 스크립트로 사이트의 SEO, 접근성, 성능 감사 구조화된 디자인 평가 기준으로 경쟁사 웹사이트 벤치마킹

skills는 어떻게 설치하나요?

skills CLI를 사용해 awwwards 스킬을 전역으로 설치합니다: npx skills add juliobsz/skills -g 새 에이전트 세션을 열고 웹사이트를 만들어 달라고 요청하거나 /awwwards를 입력합니다

skills은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/juliobsz/skills