awesome-design-md는 애플·스트라이프·노션 같은 유명 서비스의 웹 디자인 규칙을 DESIGN.md라는 마크다운 파일로 정리해 모은 GitHub 저장소입니다. AI에게 "애플 느낌으로 만들어 줘"라고만 하면 흰 바탕에 파란 버튼 정도로 끝나기 쉬운데, 이 파일을 함께 주면 색 코드와 글꼴 크기, 버튼 모양, 간격까지 근거를 갖고 화면을 짭니다. 제 PC(Windows 11)에서는 이 저장소를 Claude Code 스킬로 감싸 brand-design-md라는 이름으로 설치했습니다.

awesome-design-md는 무엇인가

VoltAgent가 관리하는 MIT 라이선스 저장소입니다. README 배지에 DESIGN.md가 84개로 표시되어 있고, 제가 받은 사본(2026-10-14 커밋)의 design-md 폴더도 84개였습니다. 캡처 시점 GitHub 별은 약 12만 2천 개였습니다.

DESIGN.md는 Google Stitch가 내놓은 형식으로, AI 에이전트가 읽고 화면을 일관되게 만들도록 디자인 시스템을 평범한 텍스트로 적은 문서입니다. 피그마 내보내기나 JSON 스키마가 필요 없고 프로젝트 루트에 두기만 하면 됩니다. README는 AGENTS.md가 프로젝트를 어떻게 만들지 정하고, DESIGN.md는 어떻게 보일지 정한다고 설명합니다.

분야별 구성

분야 예시 브랜드
AI·LLM 플랫폼 Claude, Mistral AI, Ollama, ElevenLabs
개발 도구 Cursor, Vercel, Raycast, Warp
백엔드·DB Supabase, MongoDB, Sentry, ClickHouse
생산성·SaaS Linear, Notion, Cal.com, Zapier
디자인 도구 Figma, Framer, Webflow, Miro
핀테크·암호화폐 Stripe, Revolut, Wise, Coinbase
커머스 Airbnb, Nike, Starbucks, Shopify
미디어·소비자 기술 Apple, Spotify, Pinterest, SpaceX
자동차 Tesla, BMW, Ferrari, Lamborghini

1990년대 웹을 재현한 Dell(1996), Nintendo.com(2001) 같은 복고 시리즈도 들어 있습니다.

DESIGN.md 한 장에 들어 있는 것

모든 파일이 Stitch 형식에 절을 더한 같은 9개 절 구조를 따릅니다.

# 절 담는 내용
1 Visual Theme & Atmosphere 분위기, 밀도, 디자인 철학
2 Color Palette & Roles 색 이름, 헥스 값, 쓰임
3 Typography Rules 글꼴과 크기 위계표
4 Component Stylings 버튼·카드·입력창·내비게이션과 상태별 모양
5 Layout Principles 간격 단위, 그리드, 여백
6 Depth & Elevation 그림자, 면의 높낮이
7 Do's and Don'ts 지킬 것과 피할 것
8 Responsive Behavior 중단점, 터치 영역, 접히는 방식
9 Agent Prompt Guide 색 요약표, 바로 쓰는 프롬프트

애플 파일은 482줄입니다. 맨 위 설정 부분에 primary 색 #0066cc, 본문 글자색 #1d1d1f, 히어로 제목 SF Pro Display 56px·굵기 600·자간 -0.28px처럼 값이 적혀 있습니다. 색과 글꼴이 숫자로 정해져 있어서 AI가 짐작으로 채울 부분이 줄어듭니다.

설치 방법

공식 안내

README의 사용법은 두 단계입니다. 원하는 브랜드의 DESIGN.md를 프로젝트 루트에 복사하고, AI 에이전트에게 그 파일을 쓰라고 말합니다. 공식 사이트 getdesign.md의 브랜드 페이지에는 명령 한 줄도 붙어 있습니다.

npx getdesign@latest add apple

프로젝트 루트에서 실행한 뒤 AI에게 DESIGN.md를 기준으로 화면을 만들라고 하라는 설명이 있습니다. 이 명령은 제가 직접 실행해 보지 않았습니다.

제가 한 방법: 스킬로 감싸기

프로젝트마다 파일을 찾아 복사하기 번거로워서 84개를 통째로 Claude Code 스킬 폴더에 넣었습니다.

git clone https://github.com/VoltAgent/awesome-design-md
mkdir -p ~/.claude/skills/brand-design-md
cp -r awesome-design-md/design-md ~/.claude/skills/brand-design-md/library

그다음 같은 폴더에 SKILL.md를 직접 썼습니다. Claude Code는 SKILL.md 맨 위 description을 보고 스킬을 꺼낼지 정하기 때문에, 여기에 "애플 스타일로", "테슬라 느낌", "OO 브랜드처럼" 같은 한국어 호출 문구를 적었습니다. 본문 규칙은 짧습니다.

  1. 사용자가 말한 브랜드를 library 폴더 이름에서 찾는다. 없으면 가장 가까운 2~3곳을 제안한다.
  2. 그 DESIGN.md를 전부 읽고 색·글꼴·간격·버튼·그림자 규칙을 결과물에 적용한다.
  3. 로고·상표·브랜드명은 쓰지 않고 분위기만 빌린다.

사용 예시

스킬을 넣은 뒤에는 평소처럼 요청하면 됩니다.

동네 카페 소개 페이지를 스타벅스 느낌으로 만들어 줘. 로고와 이름은 쓰지 말고.

SKILL.md 규칙대로라면 Claude는 library/starbucks/DESIGN.md를 먼저 읽고 그 색과 글꼴 규칙으로 페이지를 만듭니다. README 설명에 따르면 스타벅스 파일은 네 단계 초록 체계와 따뜻한 크림색 바탕, 전용 서체 SoDoSans를 다룹니다. 서체는 브랜드 전용이라 실제 페이지에서는 비슷한 무료 글꼴로 바꿔야 합니다. 목록에 없는 브랜드를 말하면 비슷한 곳 2~3곳을 먼저 제안하게 해 두었습니다.

주의할 점

  • 저장소와 사이트의 수가 다릅니다. 저장소는 84개, getdesign.md 카탈로그는 550개 이상으로 표시됩니다. 저장소에 없는 브랜드는 사이트에서 따로 받아야 합니다.
  • README는 브랜드마다 preview.html과 preview-dark.html이 들어 있다고 적고 있지만, 제가 받은 사본의 브랜드 폴더에는 DESIGN.md와 README.md 두 파일만 있었습니다. 그 README.md도 자세한 내용은 getdesign.md로 옮겼다는 안내 한 줄입니다. 색 견본을 눈으로 보려면 사이트를 열어야 합니다.
  • 공개된 CSS 값을 뽑아 정리한 분석 문서이고, 각 브랜드와 관계없다고 저장소와 사이트가 밝히고 있습니다. 상표와 로고까지 가져다 쓰면 사칭이 됩니다.
  • 이미 자기 디자인 기준이 있는 사이트라면 기준을 덮어쓰지 말고 색을 고를 때만 참고하는 편이 안전합니다. 저도 SKILL.md에 그렇게 적었습니다.

비슷한 도구와 차이

도구 주는 것 형태
awesome-design-md 브랜드별 디자인 규칙(색·글꼴·간격 값) 마크다운 파일, MIT
getdesign.md 같은 형식의 DESIGN.md 카탈로그, 미리보기, 맞춤 제작 요청 웹사이트, npx 명령
Google Stitch DESIGN.md 형식을 만든 곳, 화면 생성 도구 웹 서비스
Mobbin MCP 실제 앱 화면 캡처 검색 MCP 서버, 유료 플랜

DESIGN.md는 규칙을 글로 주고, Mobbin 같은 화면 레퍼런스는 그림을 줍니다. 화면 구조를 처음 정할 때는 화면 레퍼런스가, 정해 둔 구조에 색과 글꼴을 입힐 때는 DESIGN.md가 맞습니다.

저장소: https://github.com/VoltAgent/awesome-design-md
공식 사이트: https://getdesign.md/

 

 

Posted by 블로그하는프로그래머
,

canvas-design은 Anthropic이 공식 스킬 저장소(anthropics/skills)에 공개한 Claude 스킬입니다. 포스터, 카드, 아트 프린트처럼 한 장짜리 시각물을 PNG나 PDF 파일로 만듭니다. 디자인 툴을 열지 않고 Claude Code에 말로 요청해 이미지 파일을 받고 싶을 때 쓰는 스킬입니다. 설치 방법, 스킬이 Claude에게 시키는 2단계 작업 방식, 들어 있는 글꼴, 한국어로 쓸 때 주의할 점을 SKILL.md 원문 기준으로 정리합니다.

canvas-design은 무엇인가

anthropics/skills 저장소의 skills 폴더에 들어 있는 예제 스킬 가운데 하나입니다. 저장소 README는 스킬을 Claude가 특정 작업을 할 때 불러 쓰는 지시문, 스크립트, 자료가 든 폴더라고 정의합니다. canvas-design 폴더는 세 가지로 되어 있습니다.

  • SKILL.md: 130줄 분량의 작업 지시문
  • canvas-fonts: 글꼴 파일(.ttf) 54개와 글꼴별 OFL 라이선스 문서
  • LICENSE.txt: Apache License 2.0

SKILL.md의 설명(description)은 포스터, 예술 작품, 디자인 같은 정적인 결과물을 요청받으면 이 스킬을 쓰라고 적고 있습니다. 기존 작가의 작품을 베끼지 말고 독창적인 디자인을 만들라는 조건도 같은 줄에 있습니다. GitHub 스타는 저장소 전체 기준 약 18.2만입니다(2026-10-17 캡처).

설치 방법

방법 1. 플러그인 마켓플레이스

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

README가 안내하는 방법입니다. canvas-design은 example-skills 플러그인에 묶여 있어서, 이렇게 설치하면 algorithmic-art, frontend-design, skill-creator 등 예제 스킬 12개가 함께 들어옵니다.

방법 2. 폴더만 복사

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/canvas-design ~/.claude/skills/

저는 이 방법을 썼습니다. 다른 예제 스킬은 필요 없어서 canvas-design 폴더만 사용자 스킬 폴더에 복사했습니다. 내려받은 원본 저장소는 남겨 두고, 업데이트가 있으면 git pull 뒤 다시 복사합니다. 참고로 README에는 claude.ai 유료 요금제에 이 예제 스킬들이 이미 들어 있다고 적혀 있습니다.

작동 방식: 철학을 먼저 쓰고 그림을 그린다

SKILL.md는 Claude에게 결과물을 2단계로 만들게 합니다. 출력 파일도 .md, .pdf, .png 세 종류로 제한합니다.

단계 만드는 것 SKILL.md의 지시
1. 디자인 철학 .md 파일 1~2단어로 된 가상의 미술 사조 이름을 짓고, 형태, 공간, 색, 구성 원칙을 4~6문단으로 씀
2. 캔버스 .png 또는 .pdf 그 철학을 한 장짜리 시각물로 표현. 시각 요소 90%, 글자 10%
마무리 같은 파일 수정 요소를 더하지 말고 이미 있는 구성을 다듬는 2차 작업

지시문에 반복해서 나오는 원칙은 네 가지입니다.

  • 글자는 최소로: 문단 대신 짧은 단어나 라벨만 넣고, 글꼴은 대부분 가늘게 씁니다.
  • 넘침 금지: 글자와 도형이 캔버스 밖으로 나가거나 서로 겹치면 안 되고 여백을 둡니다.
  • 주제는 은근하게: 요청한 주제를 그대로 그리기보다 아는 사람만 알아챌 정도로 녹여 넣으라고 합니다.
  • 반복과 패턴: 반복되는 무늬, 정확한 도형, 제한된 색 조합을 권합니다.

여러 장이 필요하면 같은 철학으로 페이지를 이어서 PDF 하나나 PNG 여러 장으로 묶습니다.

사용 예시

Claude Code에서 스킬 이름을 직접 부르거나, 포스터를 만들어 달라고 요청하면 됩니다.

canvas-design 스킬로 동네 재즈 공연 포스터를 A3 세로 PDF로 만들어 줘.
글자는 공연 이름과 날짜만 넣어 줘.

지시문대로라면 Claude는 먼저 디자인 철학 .md를 쓰고, 그다음 코드로 캔버스를 그려 PDF로 저장합니다. 어떤 라이브러리로 그릴지는 SKILL.md에 정해져 있지 않아서 Claude가 작업 환경에 맞게 고릅니다. 크기, 파일 형식, 넣을 글자를 요청에 같이 적으면 결과를 예측하기 쉽습니다.

주의할 점

  • 한글 글꼴이 없습니다: canvas-fonts의 글꼴 54개 이름을 확인해 보면 Lora, Work Sans, IBM Plex, JetBrains Mono 같은 라틴 글꼴뿐입니다. 한국어 문구를 넣을 계획이면 PC에 있는 한글 글꼴 파일 경로를 요청에 적어 주는 편이 안전합니다. SKILL.md도 필요한 글꼴은 내려받아 쓰라고 적고 있습니다.
  • 결과가 추상적으로 나올 수 있습니다: 주제를 은근하게 녹이라는 지시 때문에, 요청한 대상이 그대로 그려지지 않을 수 있습니다. 구체적인 그림이 필요하면 요청에 분명히 적습니다.
  • 정보가 많은 문서에는 맞지 않습니다: 표와 설명이 많은 안내문은 같은 저장소의 pdf, pptx 스킬이 더 맞습니다.

비슷한 스킬과 차이

스킬 결과물 쓰는 곳
canvas-design 정적인 PNG, PDF 포스터, 카드, 아트 프린트
algorithmic-art p5.js 코드로 만드는 생성 예술 시드 난수, 흐름장, 파티클처럼 매개변수로 바뀌는 작품
frontend-design 웹 화면 코드 웹페이지, UI
pdf, pptx 문서, 슬라이드 정보 전달용 문서

공식 저장소: https://github.com/anthropics/skills

 

 

Posted by 블로그하는프로그래머
,

prompts.chat은 예전 이름이 Awesome ChatGPT Prompts인 오픈소스 프롬프트 라이브러리입니다. Claude Code 플러그인으로 설치하면 터미널을 떠나지 않고 공개 프롬프트와 에이전트 스킬을 검색해 가져올 수 있습니다. 플러그인 설치 명령, 플러그인에 들어 있는 명령과 MCP 도구, API 키가 있어야 쓸 수 있는 기능을 공식 문서와 제 PC에서 직접 호출한 결과로 정리합니다.

prompts.chat은 무엇인가

2022년 12월 ChatGPT용 프롬프트 목록으로 시작한 저장소입니다. README는 스스로를 가장 큰 오픈소스 AI 프롬프트 라이브러리라고 소개하고, 지금은 ChatGPT뿐 아니라 Claude, Gemini, Llama, Mistral에 두루 쓰는 프롬프트를 모읍니다. 누구나 사이트에서 프롬프트를 올릴 수 있고, 올라온 프롬프트는 GitHub 저장소와 자동으로 동기화됩니다.

  • 저장소: github.com/f/prompts.chat (만든 사람 Fatih Kadir Akın)
  • 라이선스: 소스 코드와 사이트 글은 MIT, 프롬프트 데이터(prompts.csv, 사용자 제출 프롬프트)는 CC0 1.0 퍼블릭 도메인
  • GitHub 스타: 2026-10-17 캡처 기준 약 17.3만
  • 등록된 프롬프트 수: 공식 페이지에서 정확한 숫자를 찾지 못했습니다(모름).

사이트에는 프롬프트 외에 스킬, Taste, 워크플로우 메뉴가 있고, 28개가 넘는 장으로 된 무료 프롬프팅 교재도 공개되어 있습니다. 회사 안에서만 쓰도록 직접 서버를 띄우는 자체 호스팅도 지원합니다.

Claude Code 플러그인 설치

/plugin marketplace add f/prompts.chat
/plugin install prompts.chat@prompts.chat

Claude Code 안에서 두 줄을 차례로 입력합니다. 첫 줄은 저장소를 플러그인 마켓플레이스로 등록하고, 둘째 줄이 플러그인을 설치합니다. 제 PC에 설치된 버전은 1.0.0입니다.

설치된 플러그인 폴더를 열어 보면 구성이 단순합니다.

종류 이름 하는 일
명령 /prompts.chat:prompts 프롬프트 검색, 가져오기, 저장, 개선
명령 /prompts.chat:skills 에이전트 스킬 검색, 가져오기, 설치
에이전트 prompt-manager, skill-manager 프롬프트와 스킬 관리를 맡는 서브에이전트
스킬 prompt-lookup, skill-lookup "코드 리뷰 프롬프트 찾아 줘" 같은 요청에 붙도록 설명이 적힌 스킬
MCP 서버 https://prompts.chat/api/mcp 실제 검색과 저장을 처리하는 원격 서버

명령 사용법

/prompts.chat:prompts code review
/prompts.chat:prompts midjourney --type IMAGE
/prompts.chat:prompts writing assistant --category writing
/prompts.chat:skills documentation --category coding

검색어 뒤에 --type(TEXT, STRUCTURED, IMAGE, VIDEO, AUDIO), --category, --tag를 붙여 범위를 좁힙니다. 결과에는 제목, 설명, 작성자, 태그, prompts.chat 링크가 붙습니다. 마음에 드는 프롬프트는 ID로 전체 내용을 가져옵니다. 프롬프트 안에 ${topic} 같은 변수가 있으면 값을 채우라고 묻고, ${topic:coffee}처럼 기본값이 붙은 변수는 비워 둬도 됩니다.

MCP 도구 10개

MCP 서버에 도구 목록을 직접 요청하니 10개가 돌아왔습니다(2026-10-17 기준). 같은 자리에서 search_prompts로 "code review"를 검색한 결과와 키 없이 improve_prompt를 부른 결과도 함께 찍었습니다.

도구 하는 일 API 키
search_prompts 키워드로 프롬프트 검색 (기본 10개, 최대 50개) 필요 없음
get_prompt ID로 프롬프트 가져오기, 변수 채우기 필요 없음
save_prompt 내 계정에 프롬프트 저장 (기본 비공개) 필요
improve_prompt 짧은 프롬프트를 구조 있는 프롬프트로 다시 씀. 출력 종류(text, image, video, sound)와 형식(text, JSON, YAML)을 고름 필요
search_skills, get_skill 스킬 검색, 스킬 파일 전체 가져오기 공개 스킬은 필요 없음
save_skill, add_file_to_skill, remove_file_from_skill 여러 파일로 된 스킬 만들기, 파일 추가와 삭제 필요
update_skill_file 스킬 안의 파일 수정 공식 문서에 표기 없음

API 키가 필요한 기능

검색과 가져오기는 로그인 없이 됩니다. 공식 API 문서도 공개 API이고 무료라고 적고 있습니다. 저장과 개선은 다릅니다. 제 PC에서 키 없이 improve_prompt를 부르자 Authentication required. Please provide an API key.가 돌아왔습니다. MCP 도구 목록의 설명과 플러그인의 스킬 문서에는 키 이야기가 없어서 직접 불러 보기 전에는 알기 어렵습니다.

  1. prompts.chat에 로그인해 Settings에서 API 키를 만듭니다. 키는 pchat_으로 시작합니다.
  2. 환경 변수 PROMPTS_API_KEY에 넣거나, MCP 연결 헤더에 PROMPTS_API_KEY를 붙입니다.
export PROMPTS_API_KEY=pchat_xxxxxxxx

Windows PowerShell이라면 setx PROMPTS_API_KEY pchat_xxxxxxxx로 사용자 환경 변수에 저장한 뒤 터미널을 새로 엽니다. 요청 횟수 제한은 숫자로 공개되어 있지 않습니다(모름). 문서에는 요청 빈도를 배려해 달라는 부탁과, 대량으로 쓰려면 자체 호스팅을 고려하라는 안내만 있습니다.

플러그인, MCP 직접 연결, CLI 차이

방식 설치 얻는 것
Claude Code 플러그인 /plugin 명령 두 줄 슬래시 명령, 서브에이전트, 스킬, MCP 서버
원격 MCP만 등록 MCP 설정에 https://prompts.chat/api/mcp 추가 MCP 도구와 MCP 프롬프트. VS Code, Windsurf, Cursor, Codex, Gemini 설정 예시가 공식 문서에 있음
로컬 MCP npx -y prompts.chat mcp MCP 서버를 내 PC에서 실행
CLI npx prompts.chat 터미널에서 바로 검색

MCP 주소 뒤에 ?categories=coding이나 ?tags=writing처럼 조건을 붙이면 특정 분야의 프롬프트만 MCP 프롬프트로 불러올 수 있습니다. Claude Code를 쓴다면 명령과 스킬이 같이 들어오는 플러그인 쪽이 손이 덜 갑니다.

주의할 점

  • 공개 프롬프트는 누구나 올릴 수 있습니다. 검색 결과를 그대로 쓰기 전에 내용을 한 번 읽어 보는 편이 안전합니다.
  • save_prompt로 저장한 프롬프트는 기본이 비공개지만, 계정 설정을 바꿨다면 공개로 올라갈 수 있습니다.
  • 플러그인 명령 문서의 스킬 설치 경로와 스킬 문서의 설치 경로 표기가 서로 다릅니다. 스킬을 설치한 뒤에는 실제로 어느 폴더에 저장됐는지 확인하는 것이 좋습니다.

공식 사이트: https://prompts.chat · API 문서: https://prompts.chat/docs/api

 

 

Posted by 블로그하는프로그래머
,

gstack은 Y Combinator CEO Garry Tan이 공개한 Claude Code 스킬 묶음입니다. 아이디어 검토, 계획 검토, 코드 리뷰, 버그 추적, 브라우저 QA를 슬래시 명령 하나로 맡길 수 있습니다. 빈 프롬프트에 매번 "리뷰해 줘"라고 적는 대신 역할과 절차가 정해진 명령을 고르는 방식입니다. 공식 README와 제 PC(Windows 11)에 실제로 설치한 파일을 기준으로 설치 방법, 주요 명령, Windows에서 막혔던 부분을 정리합니다.

gstack은 무엇인가

저장소는 github.com/garrytan/gstack 이고 MIT 라이선스로 무료입니다. README는 gstack이 Claude Code를 가상 엔지니어링 팀으로 바꾼다고 설명합니다. 제품을 다시 생각하는 CEO, 아키텍처를 정하는 엔지니어링 매니저, 디자이너, 리뷰어, 실제 브라우저를 여는 QA 리드, 보안 담당, 릴리스 엔지니어가 각각 슬래시 명령으로 들어 있습니다. 전부 Markdown 파일이라 열어서 지시 내용을 읽고 고칠 수 있습니다.

  • 만든 사람: Garry Tan (Y Combinator 대표)
  • README 표기: 전문가 역할 23개와 보조 도구 8개
  • 제 PC에 설치된 버전: 1.91.101.0, SKILL.md가 있는 폴더 56개
  • GitHub 스타: 2026-10-17 캡처 기준 약 13.7만

README는 gstack을 도구 목록보다 절차로 소개합니다. 생각, 계획, 구현, 리뷰, 테스트, 배포, 회고(Think → Plan → Build → Review → Test → Ship → Reflect) 순서로 명령이 이어지고, 앞 단계의 결과물을 다음 단계가 읽습니다. /office-hours가 쓴 설계 문서를 /plan-ceo-review가 읽고, /plan-eng-review가 만든 테스트 계획을 /qa가 이어받는 식입니다.

설치 방법

준비물

  • Claude Code, Git
  • Bun: README 기준 v1.4.2 이상이 시험된 버전이고, 1.3.3보다 낮으면 setup이 설치를 거부합니다.
  • Node.js: Windows에서만 추가로 필요합니다. Bun이 Windows에서 Playwright 파이프 연결에 버그가 있어 브라우저 서버는 Node.js로 돌아갑니다.

설치 명령

git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack
./setup

README는 이 명령을 Claude Code에 붙여 넣고 맡기라고 안내합니다. setup은 스킬 등록, 실행 파일 빌드, 내장 Chromium 내려받기를 한 번에 처리합니다. README에 적힌 소요 시간은 4코어 리눅스 클라우드 서버 기준 31초입니다. 설치가 끝났는지는 같은 폴더에서 ./setup --status로 확인합니다.

제 PC에는 Codex CLI가 없어서 상태 화면 마지막 줄에 "Codex: not installed"가 나옵니다. /codex처럼 다른 모델에게 교차 리뷰를 맡기는 기능은 Codex CLI가 따로 있어야 하고, 나머지 명령은 그대로 쓸 수 있습니다.

주요 명령

명령 역할 하는 일
/office-hours YC 오피스아워 코드를 쓰기 전에 질문 6개로 아이디어를 다시 짚고 설계 문서를 씀
/plan-ceo-review CEO 범위를 넓히거나 줄이는 4가지 모드로 계획 검토
/plan-eng-review 엔지니어링 매니저 데이터 흐름, 예외 경로, 테스트 계획 확정
/autoplan 검토 파이프라인 CEO, 디자인, DX, 엔지니어링 검토를 차례로 자동 실행
/review 스태프 엔지니어 CI는 통과해도 운영에서 터질 버그를 찾고 명백한 것은 고침
/investigate 디버거 원인 조사 없이 고치지 않는 원칙, 수정 3번 실패하면 멈춤
/qa, /qa-only QA 브라우저, API, CLI를 직접 돌려 버그 재현. qa-only는 보고만 함
/browse QA 엔지니어 에이전트가 브라우저를 열어 클릭하고 화면을 찍음
/cso 보안 책임자 OWASP, STRIDE 기준 보안 점검
/ship 릴리스 엔지니어 테스트, 버전, 변경 기록 정리 후 PR 생성

이 밖에 /careful(위험한 명령 전 경고), /freeze(지정한 폴더 밖 수정 금지), /retro(주간 회고), /make-pdf, /diagram 같은 보조 명령이 있습니다.

사용 예시

README의 시나리오를 따라가 보면 흐름이 잡힙니다. "캘린더 일일 브리핑 앱을 만들고 싶다"고 말한 뒤 /office-hours를 실행하면 Claude가 기능보다 불편한 점을 먼저 묻습니다. 답을 들은 뒤 요청의 틀을 다시 짚고, 구현 방법 3가지와 예상 작업량을 내놓으며 설계 문서를 씁니다. 이어서 /plan-ceo-review와 /plan-eng-review로 범위와 구조를 정하고, 구현이 끝나면 /review, 스테이징 주소로 /qa를 돌립니다.

/office-hours
/plan-ceo-review
/plan-eng-review
/review
/qa https://staging.example.com

처음부터 전부 쓸 필요는 없습니다. README도 /office-hours, /plan-ceo-review, /review, /qa 네 개만 먼저 써 보고 맞는지 판단하라고 권합니다.

Windows에서 설치하며 겪은 것

README는 Windows 11에서 Git Bash 또는 WSL로 쓸 수 있다고 적고 있습니다. PowerShell용 setup.ps1도 들어 있는데, Git, Bun, Node.js가 PATH에 있는지 확인한 뒤 Git Bash에서 ./setup을 대신 실행하는 스크립트입니다.

  • setup.ps1 실패: 제 PC의 Windows PowerShell 5.1에서는 인용부호 처리 문제로 setup.ps1이 끝까지 가지 못했습니다. Git Bash를 열어 cd ~/.claude/skills/gstack && ./setup을 직접 실행하니 설치가 끝났습니다.
  • /cso 평가 불가: 보안 점검용 네이티브 도우미를 빌드하려면 Visual Studio 2022 Build Tools(C++ 데스크톱 개발 워크로드)가 필요합니다. 제 PC에는 없어서 /cso는 "not assessed"로 끝납니다. README에 따르면 이 경우에도 나머지 설치는 정상으로 끝납니다.
  • 업데이트 뒤 setup 다시 실행: 개발자 모드가 꺼진 Windows에서는 심볼릭 링크 대신 파일을 복사해 설치합니다. 그래서 git pull 뒤에는 ./setup을 다시 돌려야 스킬 파일이 맞춰집니다.
  • Smart App Control: README에 적힌 알려진 문제입니다. 로컬에서 빌드한 서명 없는 실행 파일을 Windows 11 Smart App Control이 막을 수 있고, 이때 Git Bash에 Permission denied가 뜹니다.
  • 브라우저: README가 우선 쓰는 Aside 브라우저는 macOS 전용이라 Windows에서는 setup이 받아 둔 내장 Chromium을 씁니다.

설치 안내문은 CLAUDE.md에 "웹 탐색은 모두 /browse로 하라"는 문구를 넣으라고 합니다. 저는 로그인된 크롬이 필요한 작업이 있어서 이 문구는 넣지 않았습니다. /ship도 PR, VERSION, CHANGELOG를 전제로 한 흐름이라 제 배포 방식과 맞지 않아, 직접 이름을 대고 시킬 때만 쓰기로 정했습니다.

비슷한 도구와 차이

구분 gstack superpowers 플러그인 Claude Code 내장 명령
구성 역할별 슬래시 명령 수십 개와 실행 파일 브레인스토밍, 계획 작성, TDD, 체계적 디버깅 같은 작업 절차 스킬 /code-review 같은 몇 개의 기본 명령
설치 부담 Bun, Node.js, 로컬 빌드 필요 플러그인 설치로 끝 없음
브라우저 확인 내장 Chromium으로 직접 클릭하고 캡처 별도 도구와 조합 별도 도구와 조합

제 PC에는 둘 다 깔려 있습니다. 아이디어와 계획 검토는 gstack으로 하고, 버그 원인 추적은 gstack /investigate와 superpowers의 체계적 디버깅 스킬 가운데 상황에 맞는 쪽을 고릅니다.

공식 저장소: https://github.com/garrytan/gstack

 

 

Posted by 블로그하는프로그래머
,

InspoAI MCP는 Claude 같은 AI 앱에서 짧은 설명이나 스크린샷만으로 완성된 반응형 화면(HTML + Tailwind)을 만들어 주는 원격 MCP 서버입니다. 웹사이트 레퍼런스 검색, 사이트 주소로 브랜드 색·글꼴 뽑기, 아이콘 검색, 무드보드 저장까지 한 커넥터에 들어 있습니다.
※ 이 글은 InspoAI 공식 페이지(MCP 안내·요금·GitHub)만 근거로 정리했습니다. 제가 직접 연결해 써 보지는 않았고, 공식 자료에서 확인하지 못한 부분은 ‘모름’으로 적었습니다.

개요

공식 MCP 페이지의 첫 문장은 “AI 에이전트에서 실제 UI 화면을 생성하라”입니다. Claude에게 “이런 랜딩 페이지 만들어 줘”라고 하면 InspoAI가 화면을 디자인해 자기 캔버스에 저장하고, Claude는 그 캔버스 링크와 HTML 다운로드를 돌려받는 구조입니다.

  • 누구에게 맞나: 디자이너 없이 화면 시안이 필요한 개발자, 여러 화면을 빠르게 비교해 보고 싶은 기획자·1인 창업자, 내 브랜드 색을 정리해 두고 싶은 사람.
  • 왜 Claude와 함께 쓰나: Claude는 코드를 잘 쓰지만 화면 디자인 자체는 결과가 들쭉날쭉할 수 있습니다. InspoAI는 “디자인 시스템을 고정하고 실제 문구·이미지를 넣어 흔한 AI 느낌을 없앤다”고 소개합니다. Claude가 대화 흐름을 맡고, 화면 생성은 InspoAI에 맡기는 분업입니다.
  • 공식 페이지가 밝힌 지원 앱: Claude(웹·데스크톱·Claude Code), ChatGPT(개발자 모드), Cursor, Codex, 그리고 Streamable HTTP 방식 MCP를 지원하는 앱.

출시·업데이트 정보

  • MCP 서버가 처음 공개된 날짜: 모름. 공식 블로그 목록과 MCP 페이지에서 출시일을 찾지 못했습니다.
  • MCP 페이지의 경쟁 비교표에는 “경쟁사 정보는 2026년 10월 기준”이라는 각주가 붙어 있어, 페이지 자체는 최근에 손본 것으로 보입니다. 다만 이것이 기능 업데이트 날짜인지는 모릅니다.
  • 변경 이력(changelog) 페이지: 찾지 못했습니다(모름).

주요 기능 — MCP 도구 전체

공식 MCP 페이지 “What your agent can do” 절에 나온 도구는 아래와 같습니다. 각 도구의 정확한 입력 파라미터 이름과 형식은 공개 페이지에 없어 모름이고, 표의 입력·결과는 페이지 설명문을 옮긴 것입니다.

도구 입력(설명 기준) 돌려주는 것
generate_ui 짧은 브리프, 또는 UI 이미지 링크(+ 바꿀 지시) 반응형 HTML(Tailwind) 화면 1~4개, 웹·iOS·태블릿, 라이트·다크. 캔버스 링크 + HTML 다운로드
edit_ui 기존 화면 + 한 줄 지시 수정본을 캔버스의 원본 옆에 저장
get_generation 진행 중인 생성 작업 완료된 결과. 조회는 무료
find_website_inspiration 업종·스타일·섹션(예: “다크 SaaS 랜딩”) 스크린샷 + 원본 크기 링크 + 실제 사이트 링크
extract_brand 실제 웹사이트 주소 로고, CSS 실사용 순으로 정렬한 색상표, 글꼴, SNS 링크
list_design_systems / get_design_system 모름 엄선된 디자인 시스템 16개를 제품에 맞게 순위 매김. CSS 변수·Tailwind 설정·W3C 디자인 토큰·코딩 에이전트용 규칙 파일로 내보내기
search_icons 아이콘 이름 Material Symbols·Iconoir·Remix 등 오픈소스 아이콘, 미리보기, SVG·PNG 다운로드
save_moodboard / get_moodboard / list_moodboards 이미지 링크, 보드 이름 InspoAI 보관함에 무드보드 저장, 보드의 색상 팔레트
  • generate_ui는 스크린샷 재현도 맡습니다. 이미지 링크를 주면 레이아웃·문구·색·글꼴을 읽어 같은 팔레트로 깔끔한 화면을 다시 만들고, “우리 브랜드 색으로”, “다크로”, “iOS 버전으로” 같은 지시를 함께 줄 수 있다고 합니다.
  • 생성 시간은 공식 FAQ 기준 화면 묶음당 보통 30~90초입니다.
  • SVG 아이콘은 글자색을 따라가도록 만들어져 라이트·다크 모드 모두에서 보인다고 설명합니다.
  • 디자인 감사(스크린샷에서 문제 지점을 짚어 주는 기능)는 InspoAI 웹 앱에만 있고 MCP에는 없다고 FAQ가 밝힙니다.

요금·조건

MCP는 도구 종류와 상관없이 요청 1건 = 1콜로 셉니다. 진행 중인 생성 확인은 무료이고, 실패한 요청은 세지 않습니다. 콜은 매월 1일(UTC)에 초기화되며, 사용량·초기화 날짜·최근 활동은 app.inspoai.io/mcp에서 볼 수 있다고 합니다.

플랜MCP 콜(월 결제)MCP 콜(연 결제)요금 페이지 가격(연 결제)
Free월 15-$0
Lite월 200월 175월 $10(연 $120)
Freelancer월 400월 350월 $18.33(연 $220)
Pro월 700월 650월 $32.50(연 $390)
  • 요금 페이지에는 할인 전 가격으로 $12·$22·$39가 줄을 그어 표시되고 “기간 한정 연간 25% 할인” 문구가 있습니다. 결제는 환불 불가라고 적혀 있습니다.
  • MCP 페이지에는 “Lifetime 플랜은 월 700콜”이라는 문장이 있지만, 요금 페이지에서는 Lifetime 플랜을 찾지 못했습니다. 가격은 모름.
  • 공식 페이지끼리 숫자가 다릅니다. MCP 페이지는 무료 “월 15콜”인데, 요금 페이지의 무료 플랜은 “하루 검색 25회, 평생 UI 생성 5회, 평생 브랜드 스캔·감사 5회”입니다. 두 한도가 따로 적용되는지, MCP 콜이 앱 한도도 차감하는지는 모름입니다. 연결 후 사용량 페이지에서 직접 확인하시는 게 안전합니다.

연결 방법

공식 페이지 기준으로 Claude·ChatGPT·Claude Code는 InspoAI 계정 로그인(OAuth), Cursor·Codex는 API 키 방식입니다. Claude 쪽은 복사할 키가 없습니다.

claude.ai / Claude 데스크톱

  1. 설정(Settings) → 커넥터(Connectors) → 커스텀 커넥터 추가(Add custom connector).
  2. 주소 https://app.inspoai.io/mcp 를 붙여 넣습니다.
  3. InspoAI 창이 열리면 로그인하고 Allow를 누릅니다.

Claude Code

  1. 터미널에서 아래 명령을 실행합니다.
claude mcp add --transport http inspoai https://app.inspoai.io/mcp
  1. Claude Code 안에서 /mcp 를 입력하고 Authenticate를 고릅니다.
  2. 브라우저에서 InspoAI 로그인 후 허용합니다.

연결을 끊으려면 AI 앱에서 커넥터를 지우고, app.inspoai.io/mcp의 “Keys and connected apps”에서 권한을 회수하라고 안내합니다.

활용 예시 3가지

1. 내 사이트 브랜드로 가격 페이지 시안 만들기

상황: 서비스 사이트는 있는데 가격 페이지가 없고, 기존 색·글꼴과 맞는 시안이 필요합니다.

InspoAI로 https://내사이트주소 의 브랜드를 뽑아 줘.
그 브랜드로 3단 요금제 가격 페이지를 라이트 모드로 만들고 캔버스 링크를 줘.
  1. Claude가 extract_brand를 호출 → 로고, 사용 빈도순 색상표, 글꼴, SNS 링크를 받습니다.
  2. 그 정보를 브리프에 담아 generate_ui를 호출 → 생성이 길어지면 get_generation으로 결과를 받아 옵니다.
  3. 캔버스 링크와 HTML 다운로드 링크를 알려 줍니다.

결과물 활용: 받은 HTML(Tailwind)을 Claude에게 그대로 넘겨 내 프로젝트 템플릿 구조로 옮겨 달라고 하면 됩니다. 콜은 최소 2건(브랜드 추출 1 + 생성 1) 쓰입니다.

2. 레퍼런스 조사 → 같은 결의 랜딩 페이지

상황: 다크 톤 SaaS 랜딩을 만들고 싶은데 기준이 될 사례부터 보고 싶습니다. 공식 페이지의 예시 프롬프트를 옮긴 것입니다.

InspoAI로 다크 SaaS 랜딩 페이지 5개를 찾아서, 잘한 점을 정리해 줘.
그다음 그 스타일로 내 랜딩 페이지를 만들어 줘.
  1. find_website_inspiration → 스크린샷과 원본·실제 사이트 링크가 대화에 표시됩니다.
  2. Claude가 스크린샷을 보고 공통점(구성·여백·강조 방식 등)을 정리합니다.
  3. generate_ui로 그 방향을 담은 화면을 만들고, 필요하면 edit_ui로 “히어로를 더 어둡게” 같은 수정을 이어 갑니다.

결과물 활용: 수정본은 원본 옆에 쌓이므로 캔버스에서 안끼리 비교한 뒤 고른 것만 HTML로 내려받습니다.

3. 디자인 시스템을 CSS 변수로 내보내기

상황: 새 프로젝트를 시작하는데 색·글자 크기 규칙을 처음부터 정하기 번거롭습니다.

어두운 톤의 가계부 앱에 맞는 InspoAI 디자인 시스템을 골라 줘.
고른 것을 CSS 변수로 내보내고, 그 시스템으로 대시보드 화면도 하나 만들어 줘.
  1. list_design_systems → 16개 중 제품에 맞는 순서로 후보를 받습니다.
  2. get_design_system → 고른 시스템을 CSS 변수(또는 Tailwind 설정·W3C 토큰·규칙 파일)로 받습니다. 공식 문장은 “내보낼 수 있다”까지만 적혀 있어, 이 내보내기가 MCP 응답으로 오는지 웹 앱에서 하는지는 모릅니다.
  3. generate_ui를 그 시스템에 고정해 화면을 만듭니다.

결과물 활용: CSS 변수는 :root에 붙여 공통 스타일로 쓰고, 규칙 파일은 Claude Code가 이후 화면을 만들 때 참고하도록 저장소에 두면 됩니다. 내보낸 파일의 정확한 모양은 보지 못했습니다(모름).

활용 팁 5가지

  1. 프롬프트에 “InspoAI로”를 넣으세요. 공식 예시 프롬프트가 모두 그렇게 시작합니다. 다른 디자인 MCP와 함께 연결했을 때 도구를 헷갈리지 않게 합니다.
  2. 콜을 아끼려면 한 번에 묶으세요. generate_ui는 한 번에 최대 4화면까지 만들 수 있습니다. 무료 월 15콜이면 화면을 하나씩 따로 부르기보다 흐름 단위로 요청하는 편이 낫습니다.
  3. 진행 확인은 공짜입니다. 30~90초 걸리는 생성을 기다리는 동안 get_generation 조회는 콜에 잡히지 않습니다.
  4. 스크린샷은 링크로 주세요. 공식 안내는 “이미지 링크”를 넘기라고 합니다. 파일을 대화창에 바로 올리는 방식이 되는지는 모릅니다.
  5. 브랜드를 먼저 고정하세요. extract_brand나 디자인 시스템으로 색·글꼴을 정한 뒤 생성하면 화면마다 톤이 흔들리는 일을 줄일 수 있습니다.

비슷한 도구와 비교

InspoAI 공식 비교표(경쟁사 정보는 각 사 문서 기준, 2026년 10월)는 “Mobbin·Refero는 남의 디자인을 보여 주고, InspoAI는 화면을 직접 만든다”고 정리합니다. 같은 시리즈의 다른 도구까지 간단히 나누면 이렇습니다.

  • Mobbin MCP: 실제 iOS·안드로이드 앱 화면과 사용 흐름 검색. 화면 생성은 없음, 유료 구독 전용(InspoAI 비교표 기준).
  • Refero MCP: 웹 페이지 섹션·스타일 레퍼런스, DESIGN.md 내보내기. 생성 없음, 유료(같은 표 기준).
  • Nicelydone · Lazyweb: 레퍼런스 검색 계열 도구입니다. 자세한 차이는 각 소개 글을 참고해 주세요.
  • InspoAI MCP: 위 도구들과 달리 화면 생성·수정·스크린샷 재현이 핵심이고, 무료 월 15콜로 시작할 수 있습니다.

주의할 점

  • 남의 브랜드 자산: extract_brand는 아무 사이트나 읽을 수 있지만, 다른 회사 로고·색 조합을 그대로 내 서비스에 쓰면 상표·저작권 문제가 될 수 있습니다. 내 브랜드 정리나 분위기 참고용으로 쓰세요. 스크린샷 재현도 같습니다.
  • 저장되는 데이터: 공식 FAQ에 따르면 생성한 화면은 그 화면을 만든 브리프와 함께 계정에 저장되고, 무드보드도 저장됩니다. 나머지 도구는 어떤 도구를 언제 썼는지만 기록한다고 합니다. 공개 전 기획 내용을 브리프에 넣을 때는 이 점을 감안하세요.
  • 숫자 불일치: 위에서 본 무료 한도처럼, 공식 페이지마다 수치가 다릅니다. 보관 중인 레퍼런스 개수도 요금 페이지는 20만+, 오픈소스 페이지는 5만+ 화면이라고 적혀 있습니다.
  • 오픈소스판과 다릅니다: GitHub의 inspoai-studio에도 MCP 서버(/api/mcp/sse)가 있다고 적혀 있지만, 이 글의 호스팅 MCP(app.inspoai.io/mcp)와 같은 도구를 주는지는 모릅니다. 라이선스도 오픈소스 페이지는 “MIT”, GitHub 저장소는 “PolyForm Noncommercial(비상업)”로 서로 다르게 적혀 있습니다.

자주 묻는 질문

API 키가 필요한가요?

Claude(웹·데스크톱)와 Claude Code는 필요 없습니다. InspoAI 계정으로 로그인하고 Allow만 누르면 됩니다. Cursor·Codex는 app.inspoai.io/mcp에서 키를 만들어 넣어야 합니다.

콜을 다 쓰면 어떻게 되나요?

공식 FAQ에 따르면 에이전트가 한도 소진을 알려 주고, 다음 달 1일(UTC) 초기화 때나 업그레이드하는 즉시 다시 쓸 수 있습니다.

한국어 브리프도 되나요?

모릅니다. 공식 예시는 모두 영어입니다. 결과 화면에 한국어 문구가 자연스럽게 들어가는지는 직접 확인이 필요합니다.

디자인 시스템은 어디서 미리 볼 수 있나요?

MCP 페이지는 16개 디자인 시스템을 “Design skills” 페이지에서 둘러볼 수 있다고 안내합니다. 다만 그 페이지는 “150개 이상의 스펙 시트”를 내세우고 있어, 16개와 어떻게 대응하는지는 모릅니다.

마무리

InspoAI MCP는 레퍼런스를 “보여 주는” 데서 멈추지 않고 Claude 대화 안에서 화면을 바로 “만들어 주는” 쪽입니다. 무료 월 15콜이면 브랜드 추출과 화면 몇 장을 시험해 보기에 충분하니, 내 사이트 주소 하나로 먼저 시작해 보세요. 공식 안내: https://www.inspoai.io/mcp
 
 

Posted by 블로그하는프로그래머
,

지수·ETF와 차트

Candlestick

하루 동안의 시가·고가·저가·종가 네 가격을 막대 하나에 담은 그림입니다.

캔들의 굵은 몸통은 시가와 종가 사이, 위아래로 뻗은 가는 꼬리는 그날의 고가와 저가까지입니다. 한 개가 하루(일봉), 한 주(주봉), 한 달(월봉)을 나타낼 수 있습니다.

종가가 시가보다 높으면 양봉, 낮으면 음봉입니다. 국내 차트는 양봉을 빨강, 음봉을 파랑으로 칠합니다(미국은 대개 초록과 빨강입니다).

꼬리가 길다는 것은 장중에 그 가격까지 갔다가 되돌아왔다는 뜻입니다. 위 꼬리가 길면 올랐다가 밀렸고, 아래 꼬리가 길면 내렸다가 회복했습니다.

알아 둘 점

  • 몸통이 없이 가로줄만 있으면 시가와 종가가 같았다는 뜻입니다.
  • 캔들 하나의 모양만으로 다음 날 가격을 알 수는 없습니다. 거래량과 앞뒤 흐름을 함께 봅니다.

함께 읽기

원문: https://stock.famousbros.com/market/learn/candlestick/
 
 

Posted by 블로그하는프로그래머
,

지수·ETF와 차트

Moving Average

최근 며칠 동안의 종가 평균을 날마다 이어 그린 선 — 들쭉날쭉한 가격을 매끈하게 펴서 흐름을 봅니다.

N일 이동평균 = 최근 N거래일 종가의 합 ÷ N

짧은 선 (5·20일)

  • 가격 변화에 빨리 반응
  • 자주 꺾임
  • 단기 흐름

긴 선 (60·120·200일)

  • 천천히 움직임
  • 잘 꺾이지 않음
  • 큰 흐름
짧은 선과 긴 선.

20일 이동평균은 오늘을 포함한 최근 20거래일 종가의 평균입니다. 내일이 되면 가장 오래된 하루가 빠지고 새 하루가 들어와 평균이 옮겨 가므로 '이동'평균이라 부릅니다.

국내 증권사 차트는 흔히 5·20·60·120일 선을 기본으로 띄웁니다. 20일은 약 한 달, 60일은 약 석 달, 120일은 약 반년입니다. 미국에서는 50일·200일 선을 많이 봅니다.

기간이 짧은 선은 가격에 빨리 붙어 따라가고, 긴 선은 느리게 움직입니다. 그래서 가격이 긴 선보다 위에 있는지 아래에 있는지로 큰 흐름을 가늠하곤 합니다.

알아 둘 점

  • 1년은 약 250거래일입니다. 200일선은 1년보다 조금 짧습니다.
  • 이동평균은 지난 가격의 평균이라 늘 한발 늦습니다. 앞으로의 가격을 알려 주지는 않습니다.

이 사이트에서 보기

함께 읽기

원문: https://stock.famousbros.com/market/learn/moving-average/

Posted by 블로그하는프로그래머
,

힉스필드(Higgsfield) 커넥터를 Claude에 붙이면 별도 편집 프로그램을 열지 않고 대화만으로 이미지와 영상을 만들고 고칠 수 있습니다. 여기에 10월에 공개된 Katana는 “이 편집 영상을 내 사진으로 다시 만들어 줘”를 한 번에 처리하는 편집 스킬로, /katana로 부릅니다. 이 글에서는 커넥터가 무엇을 하는지, Katana가 어떤 순서로 움직이는지, 요금과 연결 방법, 실제로 입력해 볼 만한 프롬프트까지 정리했습니다.

※ 이 글은 힉스필드 공식 블로그·헬프센터·CLI 페이지·공식 GitHub를 기준으로 정리했습니다. 유료 크레딧이 들어 제가 직접 연결해 보지는 않았고, 공식 문서에서 확인되지 않는 내용은 ‘모름’으로 적었습니다.

개요 — 무엇이고, 누구에게 필요한가요?

힉스필드는 여러 회사의 이미지·영상 생성 모델을 한곳에서 쓰게 해 주는 서비스입니다. 공식 CLI 페이지 기준으로 Soul, Cinema Studio, Flux, Seedream, Kling, Minimax Hailuo, Veo 등 30개가 넘는 모델을 다루고, 이미지는 최대 4K, 영상은 최대 15초까지 만든다고 안내합니다.
힉스필드 MCP는 이 기능을 Claude 같은 AI 에이전트 안으로 가져오는 커넥터입니다. MCP(Model Context Protocol)는 AI가 외부 서비스의 도구를 불러 쓰게 하는 공개 규격이고, 인증은 OAuth 로그인으로 처리돼 API 키가 필요 없습니다.
Claude에서 쓰면 달라지는 점은 크게 세 가지입니다.

  • 기획과 생성이 한 대화에서 이어집니다. 콘셉트를 Claude와 정리한 뒤 그 자리에서 바로 생성을 요청합니다.
  • 모델 고르기·프롬프트 다듬기를 Claude가 맡습니다. 사용자는 원하는 결과를 말로 설명하면 됩니다.
  • 결과는 힉스필드 계정에 쌓입니다. 대화창에서 미리보기·다운로드가 되고, 힉스필드 웹의 Assets에도 MCP 출처로 표시돼 저장됩니다.

숏폼 B-roll이 자주 필요한 1인 크리에이터, 제품 사진은 있는데 광고 영상이 없는 쇼핑몰 운영자, 시안을 빠르게 여러 벌 뽑아야 하는 마케터에게 특히 맞습니다. 반대로 힉스필드 유료 구독이 없다면 쓸 수 없습니다.

출시·업데이트 정보

  • 힉스필드 MCP 출시일: 모름. 헬프센터의 연결 안내 글은 2026-08-01 게시, 2026-09-24 수정으로 표시되지만, 이는 글 날짜이지 출시일이 아닙니다. 공식 체인지로그에는 6월부터 MCP 관련 항목(6-07 참고 이미지 업로드, 6-25 오디오 추가 등)이 보입니다.
  • Katana 공개일: 공식 체인지로그는 2026-10-08, 공식 블로그 소개 글은 2026-10-12로 날짜가 다릅니다. 어느 쪽이 정식 출시일인지는 모름입니다.
  • 최근 MCP 업데이트(체인지로그): 9-23 Claude용 Production Skills Bundle, 9-30 Genjutsu Restyle MCP 지원 등이 올라와 있습니다. 기능이 자주 바뀌니 연결 전 체인지로그를 한 번 보는 것을 권합니다.

주요 기능

커넥터(MCP)로 할 수 있는 일

헬프센터가 밝힌 MCP 도구 범위는 다음과 같습니다.

  • 이미지·영상 생성(힉스필드의 모든 모델)
  • 업스케일, 배경 제거(이미지·영상 모두)
  • 이미지 확장(아웃페인팅), 영상 비율 바꾸기(리프레임)
  • Kling 3.0 모션 컨트롤 — 인물 이미지 1장과 동작 참고 영상 1개가 필요
  • Soul 캐릭터(같은 얼굴을 계속 쓰는 기능)와 참고용 Elements
  • 오디오: 보이스오버, 목소리 복제, 목소리 변환, 영상 더빙
  • Personal Clipper — 유튜브 영상을 짧은 클립으로 자르기
  • 크레딧 잔액 확인, 지난 생성물·업로드 목록 보기

참고 자료는 세 가지 방식으로 넣습니다. 내 PC 파일은 대화 중 열리는 힉스필드 업로드 창으로, 웹 이미지는 직접 파일 주소로, 지난 생성물·Soul 캐릭터는 이름이나 ID로 부릅니다.

Katana가 하는 일, 단계별로

Katana는 “참고 편집 영상 + 내 사진 최대 5장 → 내 소재로 다시 만든 편집 영상”을 만드는 스킬입니다. 공식 블로그가 설명하는 흐름은 다음 세 단계입니다.

  1. 참고 영상 고르기: 내가 가진(또는 사용 허락을 받은) 영상을 올리거나, Katana 프리셋 라이브러리에서 하나를 고릅니다.
  2. 소재 넣기: 영상에 등장할 인물·제품·옷 사진을 최대 5장 넣습니다.
  3. 다시 만들기: 참고 영상이 컷 순서·속도·타이밍을 정하고, 사진이 “누가·무엇이 나오는지”를 정합니다. 결과는 대화창 위젯(미리보기·다운로드 버튼)과 Assets에 저장됩니다.

부르는 방법은 세 가지입니다. /katana는 프리셋 목록을 열고, /katana/프리셋이름은 특정 프리셋을 바로 실행하며, 명령어 없이 “힉스필드로 이 제품 편집 영상 만들어 줘”처럼 말해도 시작됩니다. higgsfield.ai/katana 페이지에서 참고 영상·캐릭터·지침을 채우고 Claude에서 전송 & 생성하기를 눌러 넘기는 방법도 있습니다.

프리셋은 개인화 편집, 스타일 전환, 모션 전환으로 나뉘고, 힉스필드 제작분과 커뮤니티 제작분이 있습니다. 커뮤니티 프리셋은 3~30초 동작 영상, 이미지 최대 40장, 이미지를 @로 부르는 프롬프트로 누구나 올릴 수 있습니다.
수정은 같은 대화에서 이어 말하면 됩니다. 블로그 작성자의 테스트에서는 바뀐 장면만 다시 생성됐다고 하며, 결과물은 참고 영상과 같은 길이·비율·프레임레이트의 MP4였다고 합니다. 이 값들은 Claude에서 따로 정할 수 없습니다.

요금·크레딧 조건

  • 힉스필드 유료 구독이 필수입니다. API 키는 필요 없습니다(API 키는 별도 상품인 Higgsfield API용).
  • MCP·CLI로 생성할 때마다 요금제와 상관없이 표준 단가로 크레딧이 차감됩니다. MCP 별도 요금이나 수수료는 없다고 밝힙니다.
  • 웹에서 제공하는 무제한 모델·무료 생성은 MCP·CLI에서 적용되지 않습니다. 무제한 모델을 MCP로 썼을 때 크레딧이 빠지는 것은 버그가 아니라 정상 동작이라고 명시돼 있습니다.
  • Katana는 생성 전에 정확한 크레딧 비용 카드를 보여 줍니다.
  • 세션당 크레딧 상한 기능은 없습니다. 프롬프트로 “얼마까지만”이라고 부탁할 수는 있지만 강제 한도는 아닙니다.

2026-10-14에 공식 요금 페이지를 열어 본 화면(연간 결제 기준)은 아래와 같습니다. 블로그는 요금제·크레딧이 지역별로 다르다고 밝히므로 결제 전 본인 화면을 다시 확인하세요. 모델별·작업별 크레딧 단가는 모름입니다.

요금제월 크레딧월 요금(연간 결제)
Starter270US$19
Plus1,200US$47
Ultra3,000부터US$99
팀용자리당 1,000부터자리당 US$65부터

연결 방법

claude.ai·Claude 데스크톱

  1. Claude 설정 → 커넥터로 갑니다. (공식 자료 중 일부는 Customize → Connectors로 적혀 있어, 메뉴 이름은 화면에 따라 다를 수 있습니다.)
  2. 커스텀 커넥터 추가를 누르고 이름은 Higgsfield, URL은 https://mcp.higgsfield.ai/mcp를 넣습니다.
  3. Connect를 누르고 힉스필드 창에서 로그인·허용합니다. 이미 higgsfield.ai에 로그인돼 있으면 자동으로 넘어갑니다.
  4. 활성 커넥터 목록에 Higgsfield가 보이는지 확인합니다.
  5. 새 대화에서 “내 힉스필드 크레딧 잔액 알려 줘”라고 물어봅니다. 도구를 부르지 않고 답하면 커넥터를 다시 연결합니다.

Claude Code

공식 안내는 Claude Code에 커넥터 URL 대신 힉스필드 CLI를 쓰라고 합니다. CLI 페이지는 아래 문장을 Claude Code에 그대로 보내 설치를 맡기라고 안내합니다. 직접 실행해도 같습니다.

npm i -g @higgsfield/cli
higgsfield auth login
npx skills add higgsfield-ai/skills
  1. 첫 줄로 CLI를 설치합니다(npm 레지스트리 기준 최신 1.1.26).
  2. higgsfield auth login을 실행하면 브라우저가 열리고, 거기서 로그인합니다.
  3. 셋째 줄로 공식 스킬 묶음을 설치합니다. 업데이트도 같은 명령을 다시 실행하면 됩니다.
  4. 이후 /higgsfield:generate 또는 “힉스필드로 이미지 만들어 줘”처럼 요청합니다.

공식 GitHub 저장소는 Claude Code 플러그인으로 넣는 방법도 적어 두었습니다: /plugin marketplace add higgsfield-ai/skills 후 /plugin install higgsfield@higgsfield. 다만 Claude Code에서 /katana가 동작하는지는 공식 문서에 없어 모름입니다(Katana 안내는 claude.ai·데스크톱만 다룹니다).

활용 예시 3가지

1. 쇼츠에 넣을 B-roll 만들기

상황: 나레이션 쇼츠를 만드는데 “새벽 도시” 장면 소스가 없습니다.

힉스필드로 9:16 세로 영상 하나 만들어 줘.
새벽 5시 비 갠 도시 골목, 젖은 바닥에 가로등이 비치는 느린 달리 샷.
사람은 나오지 않게. 생성 전에 쓸 모델과 크레딧 비용을 먼저 보여 줘.
  1. Claude가 요청을 영상 프롬프트로 다듬고 쓸 모델을 고릅니다.
  2. 비용을 알려 주고, 승인하면 생성 작업을 보낸 뒤 결과를 기다려(비동기 확인) 가져옵니다.
  3. 대화창에서 미리보고 내려받습니다. 같은 파일이 Assets에도 남습니다.

활용: 편집 프로그램에 받아 나레이션 뒤에 깝니다. 원하는 결과가 아니면 “조금 더 밝게, 카메라 고정”처럼 이어서 고칩니다.

2. 제품 사진 3장으로 출시 영상 만들기(Katana)

상황: 신제품 사진은 있는데 광고 영상이 없습니다.

/katana
제품 소개용 프리셋 목록 보여 줘. 고른 다음에는 업로드 창을 열어 줘.
제품 사진 3장을 올릴게.
  1. Claude가 프리셋 목록을 보여 주고, 고르면 힉스필드 업로드 창을 엽니다(대화창에 직접 붙인 사진은 Katana로 넘어가지 않습니다).
  2. 비용 카드를 보여 주고, 승인 뒤 프리셋의 컷 순서·타이밍에 내 제품을 넣어 다시 만듭니다.
  3. “3번째 컷은 배경을 흰색으로”처럼 고치면 문서상 해당 컷만 다시 생성됩니다.

활용: 상세페이지 상단 영상, 인스타 릴스 광고 시안으로 씁니다.

3. 상품 누끼·배너 일괄 정리

상황: 쇼핑몰 썸네일을 같은 규격으로 맞춰야 합니다.

힉스필드 업로드 창 열어 줘. 상품 사진 4장 올릴게.
각각 배경 제거한 다음, 가로 배너용으로 좌우를 확장해 줘.
끝나면 결과 목록과 쓴 크레딧을 정리해 줘.
  1. 업로드 창으로 파일을 받습니다.
  2. 배경 제거 → 이미지 확장(아웃페인팅)을 차례로 부릅니다.
  3. 생성물 목록과 잔액 확인 도구로 결과를 정리합니다.

활용: 상품 목록 썸네일과 메인 배너에 같은 톤으로 씁니다.

활용 팁 5가지

  1. “생성 전에 비용 보여 줘”를 습관처럼 붙이세요. 세션당 상한이 없으니 확인 단계가 유일한 브레이크입니다.
  2. 사진은 업로드 창으로 올리세요. 에이전트가 “대화창에 첨부해 달라”고 하면 힉스필드 업로드 창을 열어 달라고 다시 말하면 됩니다.
  3. 참고 영상은 파일이나 직접 링크로. 인스타그램·틱톡 프로필 링크는 받지 않습니다.
  4. 같은 인물이 반복되면 Soul 캐릭터를 쓰세요. 한 번 학습시키면 이름이나 ID로 계속 부를 수 있습니다.
  5. 필요한 도구만 켜 두세요. 헬프센터도 작업에 필요한 도구만 허용하라고 권합니다. 도구를 안 부르면 새 대화에서 “힉스필드”를 명시해 보세요.

주의할 점

  • 크레딧: 웹에서 무제한이던 모델도 MCP로는 크레딧이 빠집니다. 다시 만들기·수정도 새 생성이면 크레딧이 추가될 수 있습니다.
  • 초상권: 실존 인물 사진을 넣을 때는 본인이거나 허락을 받은 경우에만 쓰세요. 힉스필드는 Katana용 별도 동의 절차를 밝히지 않았지만, MCP 사용은 이용약관의 개발자 약관을 따르고 에이전트가 내 계정으로 만든 결과물의 책임은 사용자에게 있다고 명시합니다.
  • 저작권: 참고 영상은 내 것이거나 사용 허락을 받은 것만 쓰라고 공식 블로그가 안내합니다. 남의 편집 영상을 그대로 따라 만드는 것은 피하세요.
  • 검수: 일부 생성은 모더레이션으로 거절될 수 있습니다.
  • 보관 기간: 결과는 보통 작업 완료 후 60초 안에 Assets에 뜬다고 하지만, 업로드 사진·생성물의 보관 기간과 삭제 정책은 모름입니다.

자주 묻는 질문

무료로 써 볼 수 있나요?

MCP·CLI 경로에는 무료 생성이 적용되지 않고 유료 구독이 필요합니다.

API 키를 발급받아야 하나요?

아닙니다. OAuth 로그인으로 연결합니다. API 키는 자기 서비스에 생성 기능을 넣는 별도 상품(Higgsfield API)용입니다.

만든 결과물은 어디서 다시 찾나요?

higgsfield.ai의 Assets에 MCP 출처 표시와 함께 저장됩니다. 60초가 지나도 없으면 계정의 사용량(Usage)을 확인하고, 크레딧이 빠졌다면 생성 ID와 시각을 적어 지원팀에 문의하라고 안내합니다.

“Authorization with the MCP server failed”가 뜹니다.

토큰이 만료된 경우입니다. 설정 → 커넥터에서 Higgsfield 연결을 끊었다가 다시 연결하면 됩니다.

마무리

힉스필드 커넥터는 “기획은 Claude, 생성은 힉스필드”를 한 대화로 묶어 주고, Katana는 그중 가장 손이 많이 가는 편집 재현을 자동화합니다. 다만 모든 생성이 크레딧을 쓰고 상한도 없으니, 비용 카드를 확인하는 습관이 가장 중요합니다. 연결 전 공식 안내를 꼭 확인하세요.

Posted by 블로그하는프로그래머
,