이미지와 화면을 만드는 도구들

BI가 파란색인 발주처에 내는 밝은 그라데이션 제안서입니다. 제목 위 56×5px 바가 시그니처이고, 캡션은 24px 아래로 내려가지 않습니다.

빨강 BI 발주처용입니다. 레드는 결론에만, 블루는 데이터에 쓰는 2색 체계라 빨강 덱인데도 눈이 피로하지 않습니다.

주황 BI 발주처용입니다. 오렌지 덱에서 본문을 검정으로 두면 차갑게 떠 보이기 때문에 딥브라운을 씁니다.

자홍 BI 발주처용입니다. 메인 색 하나로 전부 칠하면 강조가 사라지므로, 결론만 메인 색이 말하고 데이터는 서브 컬러가 받는 2층 구조를 씁니다.

포스터나 그림처럼 보고 끝나는 시각물을 PNG·PDF 로 만듭니다. 화면용 UI 가 아니라 인쇄물이나 이미지 한 장을 겨냥한 스킬입니다.

p5.js 로 코드가 그리는 그림을 만듭니다. 플로 필드, 파티클 같은 기법을 다루고 값을 바꿔 가며 실험할 수 있습니다.

슬랙에 올릴 짧은 애니메이션 GIF 를 만듭니다. 이모지 규격에 맞춰 나오므로 바로 업로드해서 팀 채널 반응 이미지로 쓸 수 있습니다.

이미지 생성 프롬프트 1만여 개를 모아 두고, 원하는 걸 말하면 맞는 걸 최대 3개까지 예시 이미지와 함께 찾아 줍니다. 글을 통째로 붙여 넣으면 그 내용에 맞는 삽화 프롬프트로 바꿔 주는 모드도 있습니다.

제미나이 이미지 모델을 명령줄에서 부릅니다. 512px 부터 4K 까지 해상도와 화면 비율을 고르고, 참고 이미지를 넣어 편집하거나 스타일을 옮길 수 있습니다. 배경을 지운 투명 이미지도 바로 뽑힙니다.

색과 서체를 묶은 테마를 만들어 PPT, 보고서, 웹페이지 전체에 일관되게 입힙니다. 산출물마다 톤이 달라지는 문제를 뿌리에서 잡습니다.

정해진 브랜드 색과 서체를 모든 결과물에 자동으로 적용합니다. 회사 규정에 맞춘 자료를 반복해서 만들 때 톤이 흔들리지 않습니다.

화면을 만들 때의 시각 방향과 타이포그래피를 잡아 줍니다. 흔한 템플릿처럼 보이지 않게 하는 데 초점이 있습니다.

만들려는 서비스의 성격을 먼저 묻고, 거기에 맞는 화면 스타일·색 조합·글꼴 짝·컴포넌트 구조를 통째로 짜 줍니다. UI 스타일 84종, 색 팔레트 192종, 글꼴 조합 74종, 업종별 판단 규칙 161개를 갖고 있어서 "알아서 예쁘게" 대신 "이 업종엔 이게 맞는다"는 근거를 답니다.

AI가 만든 화면에서 흔히 나오는 어색한 패턴 59가지를 규칙으로 잡아냅니다. 컬러 위 회색 글씨, 남발되는 글꼴, 카드 안에 카드, 낡은 이징 같은 것들입니다. 이 검사는 모델을 부르지 않고 돌아가서 API 비용이 들지 않습니다. audit(품질 점검), polish(마무리), animate(모션), typeset(타이포) 등 명령 23개를 갖췄습니다.

마음에 드는 사이트 주소를 주면 그 디자인을 뜯어 색·간격·글꼴 같은 수치로 뽑아 줍니다. 여기서 그치지 않고 "왜 이렇게 했는가"까지 정리해 주기 때문에 그대로 베끼는 대신 내 화면에 옮겨 적용할 수 있습니다.

리액트 코드로 영상을 만드는 Remotion 사용법을 담고 있습니다. 데이터가 바뀌면 영상도 자동으로 바뀌는 구조를 만들 수 있습니다.

WWDC 디자인 발표에서 정리한 애플의 인터페이스·모션 원칙을 웹(CSS·JS)에 맞게 옮겼습니다. 제스처 기반 UI, 스프링 애니메이션, 드래그·스와이프·시트 인터랙션, 반투명 재질과 깊이감, 타이포그래피까지 다룹니다.

Vercel·Linear 에서 쌓은 디자인 엔지니어링 경험을 담은 가이드입니다. 애니메이션 타이밍·이징 선택부터 버튼·팝오버·토스트 같은 컴포넌트 설계 원칙, 성능·접근성까지 UI를 다듬는 전반을 다룹니다.

기능 검토가 아니라 애니메이션·모션 코드만 전문적으로 검토합니다. 기본값은 '지적'이고, 통과하려면 이징·지속시간·중단 가능 여부·성능·접근성 기준을 실제로 충족해야 합니다.

코드는 고치지 않고, 코드베이스 전체의 애니메이션을 감사해 우선순위가 매겨진 개선 계획만 작성합니다. 다른 에이전트나 저비용 모델이 그대로 실행할 수 있는 형태로 나옵니다.

"팝오버가 튀어나오는 그거" 같은 애매한 설명을 정확한 애니메이션 전문 용어로 바꿔 줍니다. 직접 효과를 설계하지는 않고, 정확한 이름을 찾아주는 역할만 합니다.

어도비의 AI 기반 크리에이티브 도구로 이미지를 편집하고 디자인 작업을 자동화합니다.

템플릿 티 나지 않는, 완성도 높은 프론트엔드 화면을 만들도록 도와주는 공식 플러그인입니다.

Higgsfield MCP

https://mcp.higgsfield.ai/mcp

이미지와 영상을 대화로 만듭니다. 구글·OpenAI·바이트댄스·xAI·Kling 등 여러 회사의 생성 모델을 커넥터 하나로 묶어 줘서, 서비스마다 따로 가입하지 않고 필요한 모델을 골라 쓸 수 있습니다.

ElevenLabs MCP

npx -y elevenlabs-mcp

문장을 음성으로 바꾸고 목소리를 복제합니다. 내레이션이 들어가는 교육 영상이나 팟캐스트 작업에 씁니다.

Canva MCP

https://mcp.canva.com/mcp

캔바 디자인을 만들고 편집하고 내보냅니다. 브랜드 템플릿을 불러와 자료를 자동으로 채울 수 있습니다.

HeyGen MCP

https://mcp.heygen.com/mcp/v1/

텍스트를 아바타가 말하는 영상으로 바꿉니다. 다국어 립싱크, 스트리밍 아바타 제어까지 대화로 처리합니다.

Figma MCP

http://127.0.0.1:3845/mcp

디자인 파일의 레이어 구조와 변수, 화면 이미지를 가져옵니다. 시안을 코드로 옮기거나 디자인 시스템 값을 확인할 때 씁니다.