웹사이트 설계용 무료 에이전트 스킬 모음은 사실 자료와 페르소나 설정부터 프로토타입 테스트와 CMS 인계까지 AI 에이전트와 단계별로 진행하도록 돕는다. SKILL.md 형식의 오픈 Agent Skills를 지원하는 Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI 등에서 사용할 수 있다.
각 단계는 다음 단계가 따라야 할 파일을 만들고, 사용자가 검토할 HTML 페이지와 결정 항목을 제공한다. 사용자는 ‘피드백 복사’를 눌러 답변을 채팅에 붙여 넣고 진행을 결정한다. 프로젝트 상태는 STATUS.md와 DECISIONS.md에 저장돼 나중에 이어서 작업할 수 있다.
전체 흐름은 사실 자료와 사이트 현황 정리, 페르소나와 목표 설정, 포지셔닝, 사이트맵과 와이어프레임, 무드보드, 디자인 방향과 시스템, 페이지별 문구 작성, 프로토타입과 품질 점검, 페르소나 테스트, CMS 인계와 측정으로 이어진다. 제작자는 사실에 기반한 자료, 기본 디자인을 피하기 위한 명시적 지침, DESIGN.md와 디자인 토큰을 활용하며, 모델이 스크린샷을 확인하는 품질 점검도 포함한다고 설명한다.
설치하려면 저장소의 스킬 폴더를 에이전트의 스킬 디렉터리에 복사한다. Claude Code에서 모든 프로젝트에 적용하는 명령은 다음과 같다.
git clone https://github.com/caelo-cms/website-design-skills cp -r website-design-skills/skills/* ~/.claude/skills/
단일 프로젝트에만 적용하려면 .claude/skills/에 복사한다. 다른 에이전트는 해당 제품의 문서에서 스킬 폴더 위치를 확인해야 한다. 새 웹사이트를 만들 때는 빈 프로젝트 폴더에서 “I want to design a new website for my company.”라고 요청하고, 개편은 “Let's redesign example.com.”이라고 시작한다. 같은 폴더에서 “Let's continue”라고 말하면 작업을 이어갈 수 있다.
파일을 읽고 쓸 수 있는 에이전트가 필요하다. 스크린샷을 위한 브라우저 도구가 있으면 5·9·10단계가 더 효과적이라고 안내한다. 기존 웹사이트나 서비스 소개 자료도 준비해야 하며, 페르소나 질문에는 약 10분, 무드보드에는 선호하거나 선호하지 않는 참고 자료 20~30개가 필요하다.
웹사이트를 AI와 설계하는 방법과 사례를 확인할 수 있다. 관련 도구로는 Impeccable, Vercel 웹 디자인 가이드라인, Anthropic 스킬이 소개돼 있다. 11단계는 모든 CMS와 함께 사용할 수 있으며, Caelo용 안내도 포함한다. 라이선스는 MIT다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요