🤔 AI가 만든 티 안 나게, 감각을 입히는 확장 도구 3가지 (설치법)

AI한테 UI를 만들라고 하면 왜 딱 봐도 'AI가 만든 티'가 날까요. AI가 감각이 없는 게 아니라, 감각을 입힐 도구를 안 붙였을 뿐이에요. 브랜드처럼 만들고 마케터처럼 쓰게 해주는 확장 도구 3가지입니다.

전부 무료(MIT 오픈소스)고, 아래 명령어를 복사해서 붙여넣으면 돼요.

⚠️ 공통 주의: 세 도구 모두 터미널(CLI) 에서 설치해요. 데스크탑 앱(Claude Desktop)의 Code 탭에서는 /plugin·mcp add 명령어가 막혀 있어서("isn't available in this environment"), 최초 설치는 터미널에서 해야 합니다.

---

① better-design MCP (무료) — 유명 브랜드 감각을 통째로 입혀요

출처: https://github.com/marvkr/better-design

"AI가 만든 UI가 색·간격·위계가 어정쩡해서 밋밋하다" 하던 일을 없애요.
Linear·Stripe·Vercel·Notion·Apple 등 31개 브랜드 디자인시스템을 실제 토큰·컴포넌트로 주입하고, WCAG·시각 규칙으로 셀프 리뷰까지 해줘요. MIT 오픈소스(169★)예요.

설치 (두 갈래 — 편한 걸로)

1. 키 없이 바로 — 원하는 컴포넌트만 받기:

npx shadcn@latest add https://www.better-design.com/registry/linear/button.json

1. 풀버전 MCP — better-design.com/mcp 에서 무료 가입·키 발급 후 등록:

claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"

이렇게 쓰면 돼요

• "better-design 써서 Linear 스타일 설정 페이지 만들어줘 (결제·팀원·API키 탭)"
• "개발자 툴 스타트업에 어울리는 디자인시스템 찾아서 대시보드 짜줘"
• "이 폼 better-design 접근성·시각 규칙으로 리뷰하고 고쳐줘"

💡 그냥 컴포넌트만 받을 땐 npx shadcn add 한 줄이라 키가 필요 없어요. 대화하며 "~스타일로 만들어줘"까지 시키고 싶을 때 MCP 풀버전을 붙이면 돼요.

⚠️ 결과물은 shadcn/ui(React + Tailwind) 기준이라 웹 UI에 가장 잘 맞아요.

---

② power-design SKILL (무료) — 발표 덱·랜딩을 '브랜드처럼' 만들어요

출처: https://github.com/ItsssssJack/power-design

AI가 뽑은 덱·랜딩이 템플릿처럼 밋밋하던 일을 없애요.
브랜드 사이트의 DNA(색·타이포·톤)를 뽑아 발표 덱과 랜딩페이지를 AI티 안 나게 만들어줘요(슬라이드 20 + 웹 20 디자인 원칙 내장). MIT 오픈소스예요.

설치 (git clone 1회)

git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design

설치 후 클로드 코드에서 use power-design 라고 부르면, 덱이냐 웹이냐 → 어떤 브랜드 톤이냐를 물어보고 만들어줘요.

이렇게 쓰면 돼요

• "use power-design — stripe.com 톤으로 신제품 소개 덱 만들어줘"
• "use power-design — linear.com 스타일 랜딩페이지 짜줘"
• "AI가 만든 티 안 나게 이 발표자료 다시 디자인해줘"

💡 브랜드 감각을 사이트에서 긁어올 때 Firecrawl(vol.3에서 다뤘어요)을 써요. 이미 붙여뒀다면 바로 이어져요.

⚠️ 결과물은 HTML(덱/웹). git clone 방식이라 최초 1회만 설치하면 계속 써요.

---

③ marketingskills SKILL (무료) — 마케터의 감각(전환·카피·SEO)을 넣어요

출처: https://github.com/coreyhaines31/marketingskills

AI 카피가 밋밋하고 전환·SEO 관점이 없던 일을 없애요.
CRO(전환)·카피라이팅·SEO·분석·그로스까지 마케터의 감각을 스킬 묶음으로 넣어, "이 페이지 전환 잘 되게 고쳐줘"를 실제로 되게 해줘요. MIT 오픈소스예요.

설치 (스킬 설치 한 줄)

npx skills add coreyhaines31/marketingskills

필요한 것만 골라 깔 수도 있어요(가벼움):

npx skills add coreyhaines31/marketingskills --skill cro copywriting

이렇게 쓰면 돼요

• "이 랜딩 카피 CRO 관점에서 전환 잘 되게 개선해줘"
• "우리 제품 SEO 잘 잡히게 블로그 글 구조 짜줘"
• "이 가격페이지 전환율 높이게 카피 다시 써줘"

💡 세 도구의 '감각'이 조금씩 달라요 — better-design은 제품 UI 디자인 감각, power-design은 발표·랜딩 감각, marketingskills는 마케팅 카피·전환 감각. 필요한 걸 골라 쓰면 돼요.

⚠️ 이건 디자인이 아니라 마케팅 카피·전환 쪽이에요. 스킬이 여러 개라 --list로 보고 필요한 것만 깔면 가벼워요.

---

세 도구 다 "AI에 감각을 입혀 브랜드처럼 만들고 마케터처럼 쓰게" 하는 확장 도구예요. 필요하면 찾는 게 아니라,
있는 줄 알아야 찾을 수 있는 것들이라 정리해봤어요.
설치하다 막히면 인스타 DM으로 편하게 물어보세요 👀

@oliveves.ai