# Google Stitch + Claude Code: “AI 같은 느낌” 없이 웹사이트 디자인하기

> Google Stitch HTML/CSS를 로컬로 내보내 DESIGN.md를 작성하고 페이지를 제작·검증하는 전체 수동 경로와 미해결 MCP 인증 처리를 설명합니다.

Source: https://ailoot.ai/blog/ko/google-stitch-claude-code-design/
Canonical: https://ailoot.ai/blog/ko/google-stitch-claude-code-design/
Language: ko
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-106
Revision: sha256-430633dba4770223c1ec54faa311ef0cbd9d4e5bbae80e9c2d958e39900657e7


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

Claude Code는 로직을 훌륭하게 작성하지만, 디자인은 한눈에 티가 납니다. 어두운 배경, 보라색 그라데이션, Inter 글꼴, 똑같은 블록 세 개가 특징이죠. Google Stitch는 텍스트 설명으로 디자인을 생성하고, DESIGN.md 파일에 색상과 타이포그래피 토큰을 제공하며, Claude Code는 그 파일을 바탕으로 사이트를 만듭니다. 여기서는 전체 작업 흐름을 단계별로 살펴보고, 어디서 문제가 생기는지도 보여드립니다.

</div>

Ailoot 사용에 관한 추가 안내는 [문서](https://ailoot.ai/docs/)에서 확인할 수 있습니다.

## Claude Code로 만든 웹사이트는 왜 “AI slop”처럼 보일까요?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

디자인 시스템이 없으면 Claude Code는 평범한 인터페이스를 그립니다. 어두운 배경, 보라색 강조색, Inter 글꼴, 그림자가 똑같은 카드 세 개가 들어갑니다. 모델은 학습 데이터에서 가장 흔한 패턴을 재현하는데, 그 데이터는 Tailwind를 사용하는 인터넷 전체와 똑같은 랜딩 페이지 수천 개이기 때문입니다. 정밀한 제약 조건이 없으면 에이전트는 모든 템플릿의 산술 평균을 내놓습니다.

</div>

실제 사례에서는 통화 앱의 홈페이지 작업이 빈 프로젝트에서 시작됐고, Claude Code에 랜딩 페이지를 만들어 달라고 요청했습니다. 결과는 전형적이었습니다. 배경은 `slate-950`, 강조색은 `indigo-500`, 제목은 굵은 Inter, 그 아래에는 그림자가 있는 똑같은 카드 세 개. 첫 번째 v0, 첫 번째 Lovable, 첫 번째 ChatGPT 생성 결과와 같은 레이아웃이었습니다. 프롬프트를 다섯 번 다시 쓰고 “프리미엄”, “남들과 다르게”, “현대적인” 같은 표현을 추가했지만 페이지는 여전히 2015년 WordPress 테마처럼 보였습니다.





논리는 간단합니다. 제약 조건이 없으면 모델은 지금껏 본 것의 통계적 평균을 취합니다. 모델은 Bootstrap과 Tailwind로 만든 똑같은 랜딩 페이지를 백만 개나 봤습니다. 평범하지 않은 결과를 얻으려면 어떤 색과 글꼴, 간격을 쓸지, 어떤 컴포넌트를 기준으로 삼을지 구체적으로 에이전트에 알려줘야 합니다. 모델에게 “아름다운”이라는 말은 “2020년의 중앙값”을 뜻합니다. 형용사로는 결과가 달라지지 않습니다. 정확한 매개변수가 필요합니다.

저는 [Refero로 바로 쓸 수 있는 디자인 시스템](https://ailoot.ai/blog/ko/claude-code-refero-design-md/)을 다룬 가이드에서도 같은 간극을 살펴봤습니다. 그때는 다른 사람의 스타일(Apple, Linear, Stripe)을 가져와 에이전트에 제공합니다. Google Stitch는 반대 방향으로 접근합니다. 다른 사람의 스타일을 빌리는 대신, 직접 설명한 내용을 바탕으로 나만의 스타일을 생성합니다.

## Google Stitch란 무엇이며 어떤 도움이 되나요?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

Stitch는 텍스트 설명이나 이미지를 완성된 UI 디자인으로 바꿔주는 무료 Google Labs 도구입니다. 화면, 색상, 타이포그래피, 레이아웃을 생성하며 브라우저에서 Gemini 모델로 실행됩니다. Claude Code 작업 흐름에서 가장 유용한 점은 Stitch가 디자인을 구조화된 데이터로 제공한다는 것입니다. 색상, 글꼴, 간격이 정확한 값으로 주어집니다. 에이전트는 이를 읽어 코드로 재현하므로 스크린샷을 “눈대중으로” 따라 하지 않습니다.

</div>

Stitch는 2025년 5월 Google I/O에서 소개된 Google Labs 실험 도구입니다. 앱이 어떤 모습이길 원하는지 프롬프트 입력란에 작성하거나 스크린샷, 화이트보드 스케치, 경쟁사 페이지를 업로드하면 Stitch가 무한 캔버스에 인터페이스 화면을 생성합니다. 내부적으로 Gemini 2.5 Pro와 Flash를 사용하며, 더 세련된 레이아웃을 위해 2025년 12월 Gemini 3가 추가됐습니다.

유용한 기능은 다음과 같습니다.

- **Vibe Design**—원하는 분위기를 말로 설명하면(“Stripe처럼 미니멀하고 프리미엄하게”) 여러 가지 시각적 방향을 제안해 선택할 수 있습니다.
- **참조 이미지**—Dribbble이나 Pinterest의 이미지를 업로드하면 Stitch가 레이아웃을 유지하면서 요구사항을 적용합니다.
- **세 가지 형식으로 내보내기**: 편집 가능한 레이어가 있는 Figma, 깔끔한 HTML/CSS, 에이전트로 바로 전달하는 MCP.

Refero 같은 준비된 스타일과의 차이가 중요합니다. Refero는 실제 웹사이트에서 추출한 디자인 시스템 라이브러리이므로 기존 브랜드를 가져옵니다. Stitch는 제품을 위한 시스템을 처음부터 생성합니다. 참고 디자인 없이 나만의 스타일을 원한다면 Stitch를 쓰세요. 잘 알려진 제품의 스타일을 빠르게 적용하고 싶다면 Refero가 적합합니다. 두 도구는 서로 다른 단계를 담당하며 잘 어울립니다.

Claude에도 기본 제공되는 디자인 모드가 있습니다. 이에 대해서는 [Claude Design](https://ailoot.ai/blog/ko/claude-design-guide/) 가이드에서 다뤘습니다. Stitch는 에이전트가 무언가를 만들 때마다 읽을 수 있는 준비된 시스템을 외부 파일로 제공한다는 점이 다릅니다.

## Google Stitch 이용 가능 지역과 요건

Stitch를 모든 국가에서 이용할 수 있는 것은 아닙니다. Google 관계자는 공식 포럼에서 18세 이상 사용자가 212개 국가에서 서비스를 이용할 수 있고, 이용 가능 국가 목록은 확대 중이라고 밝혔습니다. 이용 제한 지역에서는 방문 시 “죄송합니다. Stitch를 이용할 수 없습니다.”라는 메시지만 표시됩니다.

Google 계정이 필요하며, Google 계정으로만 로그인할 수 있습니다.

## Stitch MCP 인증이 Claude Code 작업을 막을 때 {#mcp를-통해-google-stitch를-claude-code에-연결하는-방법}

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

여기서 remote MCP https://stitch.googleapis.com/mcp를 Claude Code에 연결하다 인증에 실패했습니다. 검증된 호환 설정은 제공하지 않으므로 아래 전체 경로는 로컬 HTML/CSS 내보내기를 사용합니다.

</div>

온라인에는 MCP 연결에 관한 부실한 안내가 많고, 그중 절반은 작동하지 않습니다. 예를 들어 인기 있는 영문 가이드를 비롯한 여러 안내에서 `@google/stitch-mcp` 패키지를 `npx -y @google/stitch-mcp@latest` 명령어로 설치하라고 권합니다. 그 패키지는 존재하지 않아 npm에서 `404`가 반환됩니다. 이 명령어를 복사하지 마세요. 시간을 낭비하게 됩니다. 같은 이유로 실제 작업에서 설치와 검증을 마친 통합 방식을 선택하세요.

설명한 원격 연결은 Claude Code에서 Incompatible auth server 오류에 도달했습니다. 작동법이나 모든 현재 설정의 실패 증거는 아닙니다. 구체적이지 않은 MCP 연결 단계로 진행하지 말고 정확한 호환 구성을 검증할 때까지 아래 수동 HTML/CSS 경로를 사용하세요.



먼저 키를 만드세요. Stitch에서 아바타를 클릭하고 → **Stitch settings** → **API key** 섹션 → **Create key**를 선택한 다음 키를 복사합니다.

다음 명령어 하나로 Claude Code에 프록시를 추가합니다.

bash



키를 환경 변수에 넣습니다(가장 쉬운 방법으로, Google 콘솔을 만지거나 만료되는 토큰을 다룰 필요가 없습니다).

```bash
export STITCH_API_KEY="your-key-from-stitch-settings"
```

직접 설정하고 싶다면 다음과 같이 작성합니다(프로젝트 루트의 `~/.claude.json` 또는 `.mcp.json` 파일에 입력).

json



Claude Code를 다시 시작하고 연결이 작동하는지 확인합니다.

```bash
claude mcp list
```



Stitch와 DESIGN.md를 사용하는 작업 흐름은 가장 순수한 형태의 컨텍스트 엔지니어링입니다. 정확한 토큰을 미리 Claude의 컨텍스트에 넣어두면, Claude는 “내가 무슨 뜻이었는지 추측”하지 않고 그에 따라 만듭니다. 전체 방법론은 세 가지 축, 즉 AI 클론, Second Brain, 컨텍스트 엔지니어링을 결합합니다. 이 조합을 통해 Claude는 “추측하는 도우미”에서 예측 가능한 결과를 내는 도구로 바뀝니다.

## DESIGN.md란 무엇이며 스크린샷보다 나은 이유는 무엇인가요?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

DESIGN.md는 디자인 시스템 매개변수를 담은 기계 판독 가능한 Markdown 파일입니다. 16진수 색상, 타이포그래피 단계, 간격 단위, 컴포넌트 규칙이 들어 있습니다. Claude Code는 이를 컨텍스트로 읽고 동일한 토큰을 사용해 모든 요소를 만듭니다. 에이전트는 스크린샷만 보고 정확한 16진수 값이나 간격 크기를 추출할 수 없어 추측해야 합니다. Markdown에서는 숫자를 그대로 읽으므로 모든 화면이 “한 디자이너가 만든 것처럼” 보입니다.

</div>

대부분의 안내가 잘못 설명하는 중요한 점이 있습니다. Stitch에는 “Export DESIGN.md” 버튼이 없습니다. 에이전트가 직접 파일을 구성합니다. Google 공식 코드랩에 따르면 프롬프트는 대략 다음과 같습니다. “Stitch MCP를 통해 프로젝트로 이동해 색상 팔레트와 타이포그래피를 추출하고 이를 바탕으로 DESIGN.md를 구성해.” 그 코드랩은 작동하는 MCP 연결을 전제로 합니다. 여기 수동 방식은 내보낸 HTML/CSS를 읽어 루트에 구조 파일을 쓰며 이미지에서 없는 토큰을 추측하지 말고 누락으로 표시해야 합니다.

DESIGN.md에는 형용사 대신 구체적인 값이 들어갑니다.

```markdown
# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)
```

Claude Code가 이 파일을 사용하도록 `CLAUDE.md`에서 파일을 참조하세요(예: “모든 컴포넌트는 `DESIGN.md`의 디자인을 사용하세요”라는 문구). 그러면 에이전트가 매 세션 같은 토큰을 불러옵니다. 월요일에 만든 버튼과 금요일에 만든 카드의 스타일이 같은 것은 하나의 기준이 있기 때문입니다.



두 로컬 참조를 결합합니다. DESIGN.md는 색, 글꼴, 간격, 컴포넌트 규칙을 담고 Stitch의 HTML/CSS와 에셋은 구체적 배치를 제공합니다. MCP는 선택 사항이며 이 경로의 필수 조건이 아닙니다.

## 웹사이트를 만드는 방법: 텍스트부터 디자인까지 전체 과정

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

수동 전체 경로는 제공 여부 확인, 제품 설명, 참조 추가, 한 화면 다듬기, HTML/CSS 내보내기, 그 파일로 DESIGN.md 작성, Claude Code에서 한 페이지 제작·검증의 일곱 단계입니다. 미해결 MCP 인증을 피하며 반응형·탐색·상호작용은 여전히 구현·시험해야 합니다.

</div>

전체 과정은 다음 순서로 진행됩니다.

1. **Stitch 열기.** 지역 제공 여부를 확인하고 본인 Google 계정으로 stitch.withgoogle.com에 로그인하세요.
2. **제품 설명.** 화면과 사용자 흐름을 적고 제안 목록을 확인·수정하세요.
3. **참조 추가.** 스크린샷과 유지할 색, 글꼴, 배치를 지정하세요.
4. **생성·다듬기.** 한 화면을 완성한 뒤 확장하세요.
5. **선택 화면 HTML/CSS 내보내기.** 필요한 에셋과 프로젝트 참조 폴더에 저장하고 로컬 HTML이 선택 화면인지 확인하세요. 스크린샷만으로 정확한 CSS 값을 얻지는 못합니다.
6. **로컬 내보내기로 DESIGN.md 작성.** 실제 색, 글꼴, 간격, 배치, 컴포넌트를 기록하고 누락 값은 결정 요청 목록으로 두세요. Stitch API 키나 MCP 인증이 필요하지 않습니다.
7. **한 페이지 제작·검증.** 아래의 경로를 실제 로컬 내보내기 위치로 바꾸세요.

```
refs/stitch-export/의 Stitch HTML/CSS를 읽고 실제 값으로 프로젝트 루트에 DESIGN.md를 만드세요. 없는 값을 만들어 내지 말고 표시하세요.
```

```
DESIGN.md와 로컬 Stitch 파일로 한 페이지를 만드세요. 컴포넌트를 모듈화하고 데스크톱·모바일 너비에서 렌더링을 원본과 비교하세요. 탐색과 상호작용 상태는 별도로 검증하세요.
```

이제부터는 Claude Code가 화면 간 라우팅, DESIGN.md의 브레이크포인트에 맞춘 반응형 처리, 애니메이션, 상호작용을 맡습니다. Stitch는 정적인 화면과 클릭 가능한 프로토타입을 제공하지만, 실제 작동하는 로직을 만들거나 호스팅에 게시하지는 않습니다. 그 일은 에이전트가 담당합니다.

## “AI 같은 느낌”을 없애려면 무엇을 바꿔야 할까요?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

주관적인 형용사를 정밀한 제약 조건으로 바꾸면 “AI 같은 느낌”이 사라집니다. 핵심 변경 사항은 세 가지입니다. 기본 보라색 강조색을 없애고 원하는 16진수 색상을 지정합니다. Inter 대신 개성 있는 글꼴 조합을 선택합니다. “현대적인”이라는 말 대신 실제 웹사이트를 참고 자료로 제공합니다. 이 모든 것을 DESIGN.md에 기록하면 에이전트가 템플릿의 산술 평균으로 돌아가는 일을 멈춥니다.

</div>

사이트가 더 이상 티 나지 않게 되는 구체적인 지점은 다음과 같습니다.

- **색상.** 보라색 `indigo-500`은 첫 번째 단서입니다. DESIGN.md에 기본 색상과 강조색을 정확한 16진수 값으로 지정하세요. 에이전트마다 “브랜드 블루”를 다르게 해석합니다.
- **글꼴.** Inter는 가장 무난해서 가장 쉽게 알아볼 수 있는 “AI 글꼴”입니다. 개성 있는 조합을 선택하세요. 예를 들어 본문에는 산세리프를, 제목에는 특징이 뚜렷한 글꼴을 사용할 수 있습니다. Stitch의 디자인에서 지정하고 DESIGN.md에 기록하세요.
- **형용사 대신 참고 자료.** 모델은 “현대적으로 만들어”를 “2020년의 중앙값”으로 해석합니다. 실제 스크린샷과 함께 “이 페이지의 레이아웃을 사용해”라고 하면 그대로 받아들입니다. Stitch에 참고 이미지를 업로드하세요. 취향은 말로 전달하기 어렵습니다.
- **간격과 여유 공간.** 템플릿 같은 레이아웃은 빽빽하고 똑같은 블록으로 알아볼 수 있습니다. DESIGN.md에서 넉넉한 간격 단계를 지정하면 에이전트가 요소를 더 자유롭게 배치합니다.

구체성이 주관적인 형용사보다 낫습니다. Stitch는 사용자의 “이런 느낌으로 해줘”를 정확한 토큰으로 변환하는 기계와 같습니다. 그러면 에이전트가 추측할 것이 남지 않습니다.

## Google Stitch와 대안 중 무엇을 선택해야 할까요?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

예산이 없고 처음부터 디자인해야 한다면 Google Stitch가 좋은 선택입니다. 사이트가 이미 Figma에 그려져 있나요? Figma MCP를 사용하세요. 바로 쓸 수 있는 React 코드가 필요하신가요? v0를 사용하세요. 알려진 브랜드의 스타일이 필요한가요? Refero를 이용하세요. 백엔드가 포함된 앱이 바로 필요한가요? Lovable을 사용하세요. 예산이 한정된 바이브 코더에게 Stitch는 가장 접근하기 쉬운 시작점이지만 게시 기능이나 백엔드는 제공하지 않습니다.

</div>

예산을 아끼며 바이브 코딩을 할 때 실제로 중요한 기준에 따라 도구를 비교했습니다.

| 도구 | 가격 | 제공 기능 | Claude Code 통합 |
|----|----|----|----|
| **Google Stitch** | 무료 | 텍스트로 처음부터 디자인: 화면, HTML, Figma | 로컬 HTML/CSS 내보내기. MCP는 호환 설정 검증 시만 |
| **v0 (Vercel)** | 무료 + \$20/월 | 바로 쓸 수 있는 React / Tailwind 코드, Vercel 게시 | 프롬프트와 코드 사용 |
| **Figma Dev Mode MCP** | 베타에서 무료 | Figma의 준비된 디자인을 코드에 활용하도록 제공 | Figma 공식 MCP |
| **Refero Styles** | 무료 라이브러리 | 실제 웹사이트에서 만든 준비된 DESIGN.md 파일 | Refero 공식 MCP |
| **Lovable** | 무료 + \$25/월 | 올인원: 인터페이스 + 데이터베이스 + 게시 | 별도 플랫폼 |

제가 사용하는 작업 흐름은 디자인 탐색에 Stitch를 쓰고, 개발과 로직에는 Claude Code를 쓰는 것입니다. 예산이 한정된 바이브 코더에게 Stitch가 좋은 이유는 무료이며 제품을 위한 고유한 스타일을 처음부터 그려주기 때문입니다. 시장의 전체 도구 구성을 알고 싶다면 [2026년에 무엇으로 코딩할까](https://ailoot.ai/blog/ko/ai-coding-tools/)라는 중심 글에서 다뤘습니다.

## Google Stitch는 어디서 한계가 드러날까요?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

Stitch는 UI만 처리합니다. 백엔드, 게시, 프레젠테이션은 제공하지 않습니다. 수동 편집 기능도 제한적입니다. Figma처럼 개별 요소를 옮길 수 없고 다시 생성해야 합니다. 결과는 비결정적이어서 한 프롬프트로도 화면이 다르게 나올 수 있습니다. 무료 생성 횟수 제한이 있고 추가 구매 옵션도 없으며, 실험적 서비스라 보장이 없고 Claude Code에서는 인증 문제도 있습니다.

</div>

세 번째 화면에서 실망하지 않도록 단점을 솔직하게 정리했습니다.

- **인터페이스만 제공.** 백엔드, 데이터베이스, 호스팅 게시 기능이 없습니다. 이를 위해 Claude Code가 필요합니다(모든 기능을 한곳에서 쓰고 싶다면 Lovable도 선택지입니다).
- **도구 내 편집 기능 제한.** 마우스로 개별 요소를 옮길 수 없고 프롬프트로 변경한 뒤 다시 생성해야 합니다. Figma와는 다릅니다.
- **비결정성.** 같은 프롬프트에서도 결과가 달라집니다. 아이디어를 탐색하기에는 좋지만 반복 가능한 결과가 필요할 때는 불편합니다.
- **할당량.** 무료 생성 횟수 제한에 도달하게 됩니다(현재는 일일 제한). 추가로 구매할 수 없으므로 할당량이 초기화될 때까지 기다려야 합니다. 정확한 횟수는 달라지므로 인터페이스에서 확인하세요.
- **실험적 서비스.** Google Labs는 장기 지원을 약속하지 않습니다. 서비스가 바뀌거나 종료될 수 있습니다.
- **지역 제한** 및 Claude Code의 MCP 인증 문제. 이용 가능 지역과 설정 섹션에서 언급했습니다.

Stitch가 적합하지 않은 경우는 여러 프로젝트에 엄격한 브랜드 가이드가 필요한 경우, 디자인이 이미 Figma에 있는 경우, 백엔드가 있는 게시 완료 앱이 필요한 경우입니다.

## 다음 단계는 무엇인가요?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="핵심 요점">

핵심 요점

다음으로 직접 작업 흐름을 만들어 보세요. Stitch에서 첫 화면을 생성하고 DESIGN.md를 추출한 뒤, Claude Code에서 이를 사용해 페이지 하나를 만듭니다. 저녁 한 번이면 끝나며 사이트가 또 “AI가 생성한 것처럼” 보일까 하는 가장 큰 걱정도 해결할 수 있습니다. 핵심은 하나의 기술, 즉 에이전트의 컨텍스트에 무엇을 넣을지 제어하는 능력입니다. 나머지는 연습으로 익힐 수 있습니다.

</div>

화면 하나로 가장 작은 작업 흐름을 만들어 보세요. Stitch에서 제품을 설명하고 홈페이지를 생성해 HTML/CSS를 내보내고 Claude Code에 그 로컬 파일로 DESIGN.md를 구성하고 페이지를 만들게 하세요. 보라색 그라데이션이 저절로 사라지는 것을 보면 나머지는 쉬워집니다.

Stitch를 사용한 디자인은 컨텍스트 엔지니어링 기법 중 하나입니다. 완전한 시스템은 AI 클론, Second Brain, 컨텍스트 엔지니어링을 결합해 Claude가 미리 준비한 규칙과 컨텍스트에 따라 작업하게 합니다.

<div class="section" role="doc-bibliography" aria-label="출처">

### 출처

- [Google Developers Blog - Stitch: UI를 디자인하는 새로운 방법](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/)
- [Google Blog - Stitch와 Gemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/)
- [Google Codelab - Stitch MCP로 디자인을 코드로 변환하기](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch)
- [Figma - Claude Code용 MCP 설정](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)

</div>

AI 클론, Second Brain, 컨텍스트 엔지니어링은 제품에 중요합니다. Stitch를 활용한 디자인은 이 조합을 이루는 첫 번째 구성 요소입니다.



모델을 더 활용하고 싶다면 [Ailoot](https://ailoot.ai/)으로 이동하세요.

## Google Stitch + Claude Code: “AI 같은 느낌” 없이 웹사이트 디자인하기: 자주 묻는 질문

### Stitch MCP가 Incompatible auth server를 반환하면 어떻게 하나요?

선택 화면을 HTML/CSS로 내보내 에셋과 저장하고 로컬 검증 후 Claude Code가 DESIGN.md를 만들게 하세요. 이 글에는 검증된 MCP 설정이 없으므로 연결을 완료 단계로 간주하지 마세요.

### DESIGN.md에 추측한 디자인 토큰이 들어가지 않게 하려면 어떻게 하나요?

스크린샷만이 아닌 HTML/CSS를 주고 실제 값만 기록하며 누락된 색, 글꼴, 간격, 컴포넌트를 결정 목록으로 두게 하세요. 렌더링한 한 페이지를 원본과 비교하세요.


## Ailoot · 회사와 그 프로젝트 포트폴리오

Ailoot는 축적된 운영 경험, 폭넓은 고객 기반, 안정적인 서비스, 지속적인 KPI 관리를 바탕으로 합니다.

회사와 그 프로젝트 포트폴리오: 수백만 고객, 매월 수십억 규모의 매출.

Ailoot는 이러한 운영 경험을 고객의 제품, 에이전트, 애플리케이션, 자동화에서 AI 기능을 이용할 수 있는 API 접근에 활용합니다.