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

파란색 계열 회사에 내는 제안서용
'삼성 스타일 제안서' 한마디로 .pptx 완성
레이아웃 10종 · 배경 3종 · 한글 폰트 고정

빨간색 계열 회사에 내는 제안서용
빨강은 강조에만, 표·그래프는 차분하게
레이아웃 12종 · 배경 5종 · 한글 폰트 고정

주황색 계열 회사에 내는 제안서용
글자색까지 주황에 맞춰 조합 고민 없음
레이아웃 12종 · 배경 3종 · 한글 폰트 고정

자홍(마젠타) 계열 회사에 내는 제안서용
핵심 문장만 메인 색, 나머지는 차분하게
레이아웃 12종 · 배경 4종 · 한글 폰트 고정

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

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

슬랙에 올릴 짧은 애니메이션 GIF 를 만듭니다. 이모지 규격에 맞춰 나옵니다. 바로 올려 팀 채널 반응 이미지로 쓰면 됩니다.

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

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

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

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

아키텍처도·플로차트·시퀀스·ER·간트·Sankey·피시본·Wardley map 등 서른아홉 가지 도식을 HTML 한 파일로 뽑습니다. SVG 와 CSS 가 파일 안에 들어 있어 그대로 열리고 PNG 로도 내보냅니다. 이미 있는 .drawio 나 Mermaid 파일을 읽어 크기와 상세도를 바꿔 다시 그리는 것도 됩니다.

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

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

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

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

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

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

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

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

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

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

애플 휴먼 인터페이스 가이드라인(HIG) 122장을 근거로, 이미 만들어 놓은 화면을 검사합니다. 플러터·리액트 네이티브·타우리·일렉트론·스위프트UI·UIKit·AppKit 을 모두 알아듣고, 애플의 용어를 그 프레임워크의 말로 바꿔 지적합니다. 접근성, 플랫폼 관례, 문구 표기까지 봅니다.

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

피그마 공식 플러그인입니다. 원격 MCP 서버(mcp.figma.com)를 설정하고, 디자인 구현·Code Connect 연결·디자인 시스템 규칙 작성 스킬을 함께 넣습니다. 서버는 디자인 컨텍스트, 스크린샷, 변수, 디자인 시스템 검색, 캔버스 쓰기를 다룹니다.

캔바 공식 플러그인입니다. 캔바 원격 MCP 서버(mcp.canva.com)에 스킬 6종이 붙습니다. SNS 크기별 리사이즈, 표 데이터로 대량 생성, 댓글 피드백 반영, 디자인 편집, 디자인 피드백 받기, 브랜드 킷 점검입니다.

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

Higgsfield MCP

https://mcp.higgsfield.ai/mcp

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

ElevenLabs MCP

https://api.elevenlabs.io/v1/mcp

문장을 음성으로 바꾸고 목소리를 복제합니다. 2026년 9월부터는 같은 연결로 음악·효과음·더빙·받아쓰기까지 만듭니다. 내레이션이 들어가는 교육 영상이나 팟캐스트 작업에 씁니다.

Canva MCP

https://mcp.canva.com/mcp

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

HeyGen MCP

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

텍스트를 아바타가 말하는 영상으로 바꿉니다. 다국어 번역·립싱크, 짧은 클립 생성, 영상 일괄 제작까지 대화로 처리합니다.

Figma MCP

http://127.0.0.1:3845/mcp

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