클로드스킬마트스킬 둘러보기스킬이 뭐예요?
목록으로

알고리즘 아트 (Algorithmic Art)

공식

p5.js로 시드 기반 제너러티브 아트를 만들고, 파라미터를 실시간으로 조절할 수 있는 인터랙티브 뷰어까지 한 번에 생성해 주는 공식 스킬입니다.

디자인·UI중급167,13619,920AI 점수 9/10마지막 업데이트: 2026. 8. 7.

무엇을 해주나

코드로 그림을 그리는 '제너러티브 아트'를 처음부터 끝까지 만들어 줍니다. 진행 방식은 두 단계입니다.

  1. 알고리즘 철학(.md): "Organic Turbulence", "Stochastic Crystallization" 같은 미학 운동 이름과 4~6단락의 선언문을 먼저 작성합니다. 어떤 노이즈, 어떤 입자 거동, 어떤 수학적 관계로 표현할지 방향을 정하는 단계입니다.
  2. p5.js 구현(.html): 그 철학을 실제 코드로 옮깁니다. 결과물은 CDN에서 p5.js를 불러오는 단일 HTML 파일로, 브라우저에서 바로 열립니다.

뷰어에는 시드 표시/이전·다음·랜덤·특정 시드 점프, 파라미터 슬라이더, 컬러 피커, Regenerate·Reset·Download PNG 버튼이 포함됩니다. randomSeed()/noiseSeed()를 항상 사용하므로 같은 시드는 항상 같은 그림을 만들어, Art Blocks 스타일의 에디션 탐색이 가능합니다.

이런 분께 추천

  • 플로우 필드, 파티클 시스템, 보로노이 같은 제너러티브 아트를 코드로 만들어 보고 싶은 분
  • 발표 자료·굿즈·NFT·프린트용 추상 비주얼을 대량 변형으로 뽑아야 하는 디자이너
  • p5.js를 배우는 중이라 잘 정리된 실전 예제 코드가 필요한 분
  • 특정 작가 작품을 베끼지 않는, 저작권 안전한 오리지널 비주얼이 필요한 팀

활용 예시

  • "심해의 해류를 주제로 알고리즘 아트를 만들어 줘" → 레이어드 펄린 노이즈 플로우 필드 + 입자 궤적 누적 작품과 노이즈 스케일·입자 수 슬라이더가 달린 HTML 뷰어 생성
  • "우리 브랜드 컬러 3색으로 포스터용 배경 100종 뽑고 싶어" → 컬러 피커가 붙은 뷰어에서 시드 1~100을 넘겨 보며 마음에 드는 것만 PNG로 저장
  • "재귀 분기 구조로 나무 같은 형태를 만들어 줘" → L-system/재귀 세분화 기반 알고리즘과 분기 각도·깊이·선 굵기 파라미터 제공

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 anthropics/skills 의 skills/algorithmic-art 폴더를 내 ~/.claude/skills/algorithmic-art/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills && mkdir -p ~/.claude/skills && cp -r /tmp/anthropic-skills/skills/algorithmic-art ~/.claude/skills/

제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널(맥은 터미널, 윈도우는 Git Bash)을 엽니다.
  2. 스킬 저장소를 내려받습니다: git clone https://github.com/anthropics/skills.git
  3. 스킬 폴더가 없으면 만듭니다: mkdir -p ~/.claude/skills
  4. 폴더 전체를 복사합니다(템플릿 파일이 함께 있어야 합니다): cp -r skills/skills/algorithmic-art ~/.claude/skills/
  5. ls ~/.claude/skills/algorithmic-art 를 실행해 SKILL.mdtemplates/viewer.html이 있는지 확인합니다.
  6. Claude Code를 재시작한 뒤 "플로우 필드로 알고리즘 아트를 만들어 줘"처럼 요청하면 스킬이 자동으로 호출됩니다.
  7. 생성된 HTML 파일을 더블클릭해 브라우저에서 열고, 슬라이더와 시드 버튼으로 변형을 탐색하세요.