본문으로 건너뛰기

트렌딩 - GitHub 인기 레포 & HuggingFace 모델

elayadesign/ai-design-skills

0 / 0

AI coding tool에 랜딩 페이지 디자인 규칙을 설치하는 Skill 모음이다.

TL;DR

AI Design Skills는 Claude Code, Cursor, Codex, Windsurf 등 Markdown 규칙 파일을 읽는 AI coding tool에 디자인 작업 지침을 주입하는 plugin-extension-skill 모음이다. 현재는 랜딩 페이지 제작용 landing-page-design Skill 하나를 제공하며, 요구사항 질문부터 페이지 구조, conversion copy, typography와 motion을 포함한 visual system까지 한 파일의 규칙으로 연결한다. 사용자는 도구별 규칙 경로에 SKILL.md를 복사한 뒤 자연어로 작업을 요청하고, 파일 하단의 디자인 값을 프로젝트에 맞게 편집할 수 있다. 실행 라이브러리나 benchmark를 찾는다면 맞지 않지만 AI coding tool의 랜딩 페이지 생성 과정을 일정한 디자인 기준으로 통제하려면 적합하다.

핵심 포인트

  • 이 레포지토리는 독립 실행형 애플리케이션이 아니라 AI coding tool용 plugin-extension-skill이다. Claude Code, Cursor, Codex, Windsurf처럼 Markdown 규칙 파일을 읽는 도구에 디자인 작업 지침을 추가하는 방식이다. 특정 생태계에 종속되지 않고 각 도구의 프로젝트 규칙 경로에 SKILL.md를 복사해 사용한다.
  • 현재 포함된 핵심 Skill은 landing-page-design 하나다. intake 질문으로 요구사항을 받고 페이지 구조와 conversion copy를 정한 뒤 typography, spacing, radius, motion을 포함한 visual system에 따라 랜딩 페이지를 만들도록 유도한다. 새 사이트 제작이 아닌 기존 사이트 개선은 별도 redesign-skill 레포지토리의 범위다.
  • 설치는 도구별 규칙 디렉터리에 Skill 폴더나 SKILL.md를 복사하는 구조다. Claude Code는 .claude/skills에 폴더를 복사하고 Cursor는 .cursor/rules에 파일을 내려받으며 Codex와 Windsurf, Cline은 각각 AGENTS.md, .windsurfrules, .clinerules 같은 경로를 사용한다. 설치 뒤에는 해당 Skill이 다루는 작업을 자연어로 요청하면 된다.
  • 각 Skill 파일 하단의 한 구역에 fonts, colors, spacing, motion 같은 디자인 값이 모여 있어 프로젝트에 맞게 수정하기 쉽다. 값을 바꾸면 나머지 지침이 그 설정을 따르는 구조다. 다만 README에는 실행 코드, 라이브러리 API, 의존성, 테스트 결과나 benchmark 수치가 없어 개발용 프레임워크보다 규칙 템플릿에 가깝다.

1.2k

Stars

88

Forks

+207

Trending

0

조회수

1.2k watchers1 open issuesMIT License

관련 토론

아직 관련 토론이 없습니다.

댓글

댓글을 작성하려면 로그인이 필요합니다.