구글이 이 기술을 공개하며 AI 디자인의 문제를 해결했습니다

원제 · Google Just Fixed AI Design By Releasing This

13:474분 읽기AI LABS2026. 10. 13.컴퓨터/소프트웨어 · AI/미래기술

핵심 요약

Stitch CLI와 Claude Code를 결합하고 단계별 검토 스킬을 적용하면, AI가 기획부터 반응형 디자인 및 스크롤 애니메이션까지 일관된 완성도의 웹사이트를 직접 구축할 수 있다.

하이라이트

  • Stitch CLI 도구를 사용하면 Claude Code 같은 AI 에이전트가 Google Cloud 설정 과정 없이 터미널에서 바로 디자인을 생성할 수 있다.

  • Claude Code가 Stitch에 프롬프트를 입력할 때 brief.md 파일을 가이드로 활용하여 모든 디자인의 스타일과 일관성을 유지한다.

  • Stitch 검토 스킬은 컴퓨터뿐만 아니라 스마트폰과 태블릿 같은 다양한 화면 크기에서 사이트의 스크린샷을 찍어 원본 디자인과 일치하는지 확인한다.

  • 스크롤텔링 스킬을 적용하면 정적인 웹사이트가 사용자의 스크롤 동작에 맞춰 스토리와 애니메이션을 유기적으로 전송하는 형태로 탈바꿈한다.

  • 스토리 검토 스킬은 애니메이션의 과도함이나 전환 속도 같은 완성도를 어워드 수상작 수준으로 엄격하게 평가하여 보고서로 제공한다.

타임라인

  1. Stitch의 터미널 지원과 CLI 도입 배경

    Stitch는 Gemini 모델과 이미지 생성 모델이 내장되어 있어 고품질의 디자인을 만들어내지만, 독립된 앱 형태여서 코딩 에이전트와 연동하기 다소 까다로웠습니다. 이를 해결하기 위해 구글은 CLI 도구를 선보였으며, 이는 상시 대기하는 MCP와 달리 Claude가 실제로 필요할 때만 도구를 로드하므로 토큰 사용량을 절약해 줍니다. 결과적으로 Claude Code가 CLI를 통해 직접 Stitch에 접근하여 디자인을 빌드할 수 있는 최적의 워크플로우가 마련되었습니다.

    • Stitch는 구글의 디자인 도구로 모바일 앱과 웹사이트의 정교한 디자인을 생성한다.
    • 기존에는 전용 앱에서 프롬프트를 입력하고 코딩 에이전트로 내보내야 하는 번거로움이 있었다.
    • 구글이 출시한 Stitch CLI 도구를 통해 에이전트가 복잡한 Google Cloud 설정 없이 터미널에서 바로 도구를 사용할 수 있게 되었다.

  2. 프로젝트 준비와 스킬 및 기획 브리프 설정

    본격적인 빌드에 앞서 터미널에서 Stitch CLI를 설치하고 로그인한 뒤, 에이전트가 인식할 수 있도록 .claud 폴더 경로에 Stitch 스킬과 scrollytelling 스킬을 추가합니다. 이 스킬들은 색상, 폰트 유지 가이드 및 스크롤 애니메이션 지침을 담고 있습니다. 또한 Claude에게 직접 사이트 기획에 관해 인터뷰를 진행하게 한 후, 스토리와 목적이 담긴 brief.md를 작성하게 함으로써 모든 후속 프롬프트가 일관된 방향성을 갖추도록 합니다.

    • Stitch CLI와 스크롤텔링 스킬을 프로젝트 내 .claud 폴더에 설치해야 Claude가 정상적으로 로드할 수 있다.
    • Claude Code에게 제작하고 싶은 사이트에 대해 설명하고 인터뷰를 요청하여 전체 아이디어를 brief.md 파일로 문서화한다.
    • 문서화된 브리프는 디자인마다 스타일이 바뀌는 Stitch의 고질적인 문제를 해결하고 일관성을 부여한다.

  3. Stitch를 활용한 디자인 생성과 코드 변환

    브리프가 준비되면 Claude는 Stitch 스킬을 로드하여 프로젝트를 생성하고 여러 디자인 버전을 요청합니다. 마음에 드는 결과물이 나올 때까지 수정을 거듭하여 총 8개의 버전 중 가장 적합한 디자인을 확정합니다. 이후 Stitch의 신규 도구를 활용해 디자인 에셋들을 Claude Code 프로젝트로 곧바로 불러와 정적 상태의 웹사이트 구현을 마칩니다.

    • Claude는 brief.md를 가이드로 삼아 Stitch에 여러 버전의 디자인 생성을 요청하고 수정 과정을 거친다.
    • 디자인이 완료되면 Stitch 도구를 통해 웹페이지와 이미지, 폰트를 Claude Code 프로젝트에 직접 다운로드한다.
    • 초기 변환된 사이트에는 간단한 애니메이션이 추가되지만, 본격적인 거대한 스크롤 효과는 아직 적용되지 않은 상태이다.

  4. Stitch 검토 스킬을 통한 화면 크기별 정합성 검사

    Stitch 디자인은 주로 컴퓨터 화면 기준으로 생성되기에 모바일 기기에서의 시인성을 별도로 검증해야 합니다. 이를 위해 고안된 Stitch 검토 스킬은 다양한 기기 해상도에서 스크린샷을 찍어 원본과의 일치 여부를 대조합니다. 심각도 순으로 정리된 리포트를 통해 모바일 화면의 결함을 완벽하게 보완하고 다음 단계인 애니메이션 작업으로 넘어갈 수 있습니다.

    • 컴퓨터 화면에서는 정상적으로 보여도 스마트폰이나 태블릿에서는 디자인이 깨지는 문제가 발생할 수 있다.
    • Stitch 검토 스킬은 다양한 화면 크기에서 스크린샷을 촬영하여 원본 디자인과 일치하는지 확인한다.
    • 가장 심각한 문제부터 순서대로 나열된 보고서를 바탕으로 Claude에게 수정을 요청하여 화면 깨짐 현상을 해결한다.

  5. 스크롤텔링과 스토리 검토 스킬을 통한 최종 완성도 확보

    사이트의 뼈대가 완성되면 스크롤에 따라 이야기가 전개되는 몰입형 애니메이션을 주입합니다. 다만 애니메이션이 과도할 경우 별들이 너무 많이 쏟아지는 등의 부작용이 발생하므로, 스토리 검토 스킬을 활용해 전환 속도와 시각적 피로도를 엄격하게 심사합니다. 최종 보고서에 따라 문제점을 수정함으로써 눈이 편안하면서도 완성도 높은 최종 웹사이트를 도출해 냅니다.

    • 스크롤텔링 스킬을 적용하면 정적인 사이트가 우주 여행 같은 몰입감 넘치는 스크롤 애니메이션과 챕터 마커를 갖추게 된다.
    • 과도한 애니메이션으로 인한 시각적 피로감을 해결하기 위해 스토리 검토 스킬을 도입하여 전체적인 완성도를 평가한다.
    • 스토리 검토 보고서를 바탕으로 애니메이션 속도와 요소들을 정제하여 어워드 수상작 수준의 매끄러운 사이트를 완성한다.

설명

AI design just got better: Google Stitch now runs in your terminal, so Claude Code can design with AI for you. Here's our full Claude design workflow for Claude AI website design, plus Claude motion design with scroll animations and review skills that make motion design with AI easier on the eyes. Thanks to Wispr Flow for sponsoring. Get a month of Wispr Flow Pro with unlimited words at https://ref.wisprflow.ai/ai-labs-yt and spend less time typing prompts and more time building. Community with All Resources: https://ailabspro.io/?v=au2TI8sdq8E The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ Got a software idea but don't have the team to build it? Autometa turns your ideas into production-ready software. Check out https://autometa.dev/yt to see what we can build for you. Resources used in this video: Stitch CLI install commands: https://stitchprompt.com/blog/google-stitch-cli-tutorial Scrollytelling skill: https://github.com/doodledood/claude-code-plugins/blob/HEAD/claude-plugins/frontend-design/skills/scrollytelling/SKILL.md In this video, we show you how to use Google Stitch's new CLI with Claude Code to build a complete website that tells its story as you scroll. Then we explain every step so you can build one too. Stitch is Google's AI design app. It uses Gemini models to create designs for mobile apps and websites, and its designs are much more refined than what those models make on their own. It also has Google's image generation model built in, so it can make images for your designs. The problem was that Stitch was only a design app. You had to prompt it yourself and then export the designs to your coding agent. Stitch did release an MCP, but setting it up took a lot of steps on Google Cloud. With the new CLI, Claude Code can prompt Stitch directly, the setup is much easier, and it uses fewer tokens because Claude only reads the Stitch skill when it needs it. Claude can use skills and Stitch can't. So when Claude Code is the one prompting Stitch, you can build a whole AI system design around it. Here's the agentic AI system design we used for AI web design: 1. Prepare the project. Install the Stitch CLI, log in with your Google account, and add the Stitch skill to the .claude folder so Claude can actually load it. Then add the Scrollytelling skill for scroll stories and animation. 2. Write the brief. Claude interviews you about your site and writes everything into brief.md. Every Stitch prompt comes from that same brief, so your designs stay consistent. 3. Design the site in Stitch. Claude prompts Stitch for several versions, checks each one, and asks for a better one whenever it finds a problem. In our case it went through eight designs. 4. Bring the design into your project. Stitch hands each design to Claude as a web page plus a picture of it, and Claude builds the real site from them. 5. Review the site against the design. Our Stitch Review skill compares the site with the original design and takes screenshots at computer, tablet, and phone sizes, so the site doesn't break on smaller screens. 6. Add the scroll animations. The Scrollytelling skill turned the still site into a motion graphic experience: a shake when the rocket launches, stars that streak past as you scroll, a chapter marker, a timeline that moves sideways, and numbers that scramble at each new chapter. 7. Review the story and motion. Our Story Review skill judges the site like the best-designed sites on Awwwards and checks the story, the animations, the pacing, and the writing. After the fixes, the animations were smoother and there were fewer stars, so the site was easier on the eyes. Whether you come from graphic design, web design, or no design background at all, this workflow shows how website design AI tools and Claude design skills work together. Web design AI no longer has to look like everyone else's, and Claude AI website design can go well past a still mockup into real Claude motion design. All the skills we created in this video, along with other resources, are available in AI Labs Pro. 0:00 Intro 1:00 What Is Stitch 2:44 Setup 5:00 Writing the Brief 6:17 Generating Designs 7:43 Sponsor 8:34 Building the Site 9:25 Stitch Review 10:58 Scroll Animations 12:05 Story Review Hashtags: #ClaudeDesign #MotionDesign #GraphicDesign #MotionGraphic #Design #WebDesign #ClaudeMotionDesign #AIDesign

이 영상에 대해 글쓰기