🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Web Design의 품질은 모델 자체보다 디자인 skill, 제약 조건, 제품 맥락을 얼마나 잘 주입하느냐에 따라 크게 달라진다.

📌 핵심 요점

1. AI가 기본값으로 만든 웹사이트는 보라색 그라데이션, 이모지, 3개 카드, 일반 CTA처럼 비슷한 패턴으로 수렴하기 쉽다.
2. Claude는 코드 이해력은 높지만, 별도 디자인 원칙이 없으면 주제와 무관한 일반 템플릿형 UI를 만들 가능성이 크다.
3. 오픈소스 또는 자체 제작 디자인 skill을 연결하면 색상, 폰트, 여백, 강조 규칙을 반복 적용해 사이트별 분위기를 다르게 만들 수 있다.
4. 좋은 AI 웹디자인은 빈 템플릿이 아니라 실제 제품 맥락에서 출발하고, 한 화면에서 모든 요소를 강조하지 않는 절제된 구조가 필요하다.
5. 영상의 before/after 사례들은 디자인 skill 적용 후 페이지가 더 주제에 맞고, 덜 일반적이며, 더 정돈된 시각적 결과로 바뀐다는 점을 보여준다.

🧩 배경과 문제 정의

• 영상은 AI로 생성한 웹사이트가 서로 비슷해지는 문제에서 출발한다.
• 기본 AI 웹디자인은 보라색 그라데이션, 이모지, 3개 카드형 구성, 일반적인 CTA 같은 패턴으로 수렴하기 쉽다.
• Claude 같은 모델은 코드 이해력은 높지만, 별도 디자인 원칙과 제품 맥락을 주지 않으면 주제와 무관한 템플릿형 UI를 반복할 수 있다.
• 해결 방향은 오픈소스 디자인 skill이나 직접 만든 커스텀 skill을 에이전트에 연결해 색상, 폰트, 여백, 강조 방식, 레이아웃 규칙을 반복 적용하게 만드는 것이다.
• 목표는 “AI가 만든 티가 나는” 기본 랜딩페이지에서 벗어나, 제품과 주제에 맞는 분위기와 구조를 가진 웹페이지를 더 빠르게 만드는 것이다.
• 검증 필요: 제공된 section-detail 기준 마지막 확인 타임스탬프는 12:10이며, 영상 전체 길이 14:40의 후반부 추가 발언은 별도 transcript 확인이 필요하다.

🕒 시간순 섹션별 상세정리

1. AI 웹사이트의 반복 패턴과 디자인 skill 방식

• AI로 만든 기본 웹사이트는 같은 색상, 같은 이모지, 동일한 3개 카드 구조를 반복하며, 랜딩페이지 빌더 결과물도 보라색 그라데이션과 일반적인 레이아웃에 치우친다 [00:05]
• Claude에 새 디자인 원칙을 한 번에 주입하면 같은 프롬프트라도 전후 결과가 달라지고, 오픈소스 디자인 skill이나 직접 만든 skill을 사용할 수 있다 [00:33]
• 프런트엔드 디자인, ShadCN UI, UI UX Pro Max 같은 오픈소스 skill은 GitHub에서 가져와 Hermes, Claude, 선호하는 디자인 도구에 연결할 수 있다 [02:03]
• skill은 Claude가 피해야 할 디자인 습관과 실제 구현해야 할 디자인 원칙을 함께 제공하며, UI UX Pro Max skill은 GitHub 별 9만6000개 수준의 공개 자료로 묶인다 [02:30]

2. 실제 사이트 예시와 커스텀 skill의 효과

• agentos.guide의 튜토리얼 가이드는 커스텀 skill을 기반으로 만들어지며, 새 가이드 생성 때 이미지, 폰트, 상단 CTA, 모바일 반응형 구조가 함께 적용된다 [04:29]
• 튜토리얼 주제에 따라 맞춤형 프레임워크, 외부 소스, 인용 블록, 설명 블록, testimonials가 포함되며, 한 페이지의 여러 구성 요소가 AI로 생성된다 [04:59]
• 첫 원칙은 빈 템플릿이 아니라 실제 제품과 사용 맥락에서 출발하는 것이며, AI나 기술 주제라면 웹사이트도 그에 맞는 기술적 분위기를 가져야 한다 [06:19]
• Claude를 기본 상태로 쓰면 주제를 무시하고 매번 같은 일반 레이아웃을 가져오기 쉽지만, skill 기반 시스템은 페이지가 주제를 반영하도록 만든다 [06:41]

3. 여러 before/after 사례에서 드러나는 차이

• 7개 예시의 원본과 개선본을 비교하면, 원본은 문구와 시각 구성이 모두 평범하고 개선본은 주제와 스타일에 맞춰 더 독자적인 인상을 만든다 [08:43]
• 애니메이션이 들어간 개선본은 일반적인 카드형 구성을 벗어나며, 같은 화면 전환 상황에서도 generic slop 웹사이트와 다른 느낌을 낸다 [09:10]

4. 기존 방식과 새 방식의 규칙 차이

• AI를 기본 상태로 쓰면 모든 웹디자인이 같은 보라색 그라데이션으로 수렴하지만, 새 엔진은 같은 시간 안에서도 서로 다른 결과물을 만든다 [10:01]
• 기존 방식은 중앙 정렬된 보라색 그라데이션 hero에 의존하고, 새 방식은 색상을 주제의 실제 세계에 고정해 페이지의 분위기를 제품 맥락과 연결한다 [10:16]

5. 디자인 skill과 agent operating system의 결합

• 디자인 skill은 landing page, app, dashboard 등 다양한 웹사이트 유형에 자동 적용될 수 있고, 사이트마다 디자인된 결과물을 만들 수 있다 [12:00]
• Claude, Hermes, Open Claude 같은 agent 환경에 skill을 연결하면 같은 제작 흐름 안에서 서로 다른 디자인 스타일을 학습시키고 재사용할 수 있다 [12:10]

6. Agent OS 안에서 확장되는 디자인 skill

• 디자인 skill은 Claude, Hermes, Open Claude 같은 제작 환경에 꽂아 넣을 수 있고, 다른 agent에게도 학습시켜 서로 다른 스타일의 결과물을 만들 수 있다 [12:20]
• 이 skill들은 전체 시스템의 일부이며, Claude·Open Claude·Hermes를 공유 메모리 대시보드로 연결할 때 더 큰 힘을 낸다 [12:34]
• agent가 브랜드, 비즈니스, 목표를 이미 알고 있는 상태에서 페이지를 디자인하게 만드는 것이 핵심이다 [12:40]
• 전체 시스템은 로드맵, 코칭콜, 튜토리얼, 프롬프트 라이브러리, 멤버 맵과 함께 AI Profit Boardroom에서 제공된다고 안내한다 [12:55]

7. 디자인 반론에 대한 답과 최종 요약

• 디자이너가 아니어도 skill이 디자인 규칙을 맡기 때문에 사용자는 직접 디자인하는 것이 아니라 방향을 지시하는 역할을 한다 [13:05]
• AI 디자인이 generic해지는 이유는 AI 자체의 한계가 아니라 제약과 디자인 원칙 없이 만들기 때문이라고 정리한다 [13:21]
• 같은 프롬프트와 같은 시간이라도 디자인된 페이지는 더 좋은 첫인상을 만들고 더 많은 관심을 얻는다고 강조한다 [13:45]
• 마지막으로 generic 웹사이트를 피하고, 매번 다른 디자인을 만들고, 디자이너 없이 open-source skill과 agent operating system으로 구현하는 방법을 배웠다고 요약한 뒤 전체 시스템 참여 링크를 안내한다 [14:38]

🧾 결론

• 이 영상의 핵심은 “Claude가 웹디자인을 못한다”가 아니라, Claude에게 좋은 디자인 제약과 기준을 주지 않으면 결과물이 반복된다는 점이다.
• 디자인 skill은 AI에게 피해야 할 습관과 따라야 할 원칙을 함께 제공해, 같은 프롬프트에서도 더 차별화된 웹페이지를 만들게 하는 장치로 설명된다.
• 특히 제품 맥락에 맞는 색상, 폰트, 여백, 하나의 강한 시각 요소, 목적 있는 애니메이션이 generic한 AI 웹사이트를 줄이는 핵심 요소로 제시된다.
• 다만 외부 skill은 누구나 만들 수 있으므로, 그대로 설치하기보다 내용을 검토하거나 자체 버전으로 정리해 사용하는 방식이 더 안전하다고 언급된다.
• 결과적으로 AI 웹디자인의 개선 포인트는 더 강한 모델만 찾는 것이 아니라, 반복 가능한 디자인 규칙을 작업 흐름 안에 넣는 데 있다.

📈 투자·시사 포인트

• AI 웹사이트 제작 도구의 경쟁력은 단순 생성 속도보다, 산업·제품별 디자인 맥락을 얼마나 잘 반영하는지로 이동할 가능성이 있다.
• 랜딩페이지, 앱, 대시보드 제작에서 “AI 티가 덜 나는 결과물”은 첫인상과 체류, 신뢰 형성에 영향을 줄 수 있는 차별화 요소가 될 수 있다.
• 오픈소스 디자인 skill과 커스텀 skill은 비전문가도 일정 수준 이상의 웹디자인 결과물을 만들게 해주는 생산성 레이어로 해석할 수 있다.
• 디자인 리소스가 부족한 개인 제작자나 소규모 팀에는, 디자이너를 완전히 대체한다기보다 기본 품질을 끌어올리는 보조 시스템으로 의미가 크다.
• 검증이 필요한 부분: 영상에서 제시된 개선 사례가 실제 전환율, 매출, 사용자 행동 지표까지 개선했는지는 transcript만으로 확인되지 않는다.

⚠️ 불확실하거나 확인이 필요한 부분

• UI UX Pro Max skill이 “GitHub 별 9만6000개 수준”이라는 언급은 영상 내 주장으로 보이며, 실제 저장소 주소와 현재 star 수는 별도 확인이 필요하다.
• 오픈소스 design skill을 Hermes, Claude, Open Claude 등 여러 에이전트 환경에 연결할 수 있다고 설명하지만, 각 환경별 설치 방식·호환성·권한 범위는 실제 문서나 저장소를 확인해야 한다.
• before/after 예시에서 개선본이 더 “디자인된” 결과물로 보인다는 평가는 영상의 시각 비교에 기반한 주장이라, 실제 성능 지표나 사용자 반응 데이터가 제시된 것은 아니다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 사용하려는 오픈소스 design skill의 GitHub 저장소, README, 라이선스, 최근 업데이트 여부를 먼저 확인한다.
• 외부 skill을 그대로 설치하기 전에 skill MD 내용을 직접 읽고, 위험한 명령·불필요한 권한·의심스러운 지시가 없는지 검토한다.
• Claude나 Hermes에 적용할 자체 design skill 초안을 만들 때 “피해야 할 패턴”과 “반드시 따를 디자인 원칙”을 함께 정의한다.
• 랜딩페이지를 만들기 전에 제품의 실제 맥락, 사용자, 브랜드 분위기, 핵심 시각 요소를 먼저 브리핑에 포함한다.

❓ 열린 질문

• 우리 팀이나 프로젝트에서 반복적으로 나오는 “AI 티 나는 디자인 패턴”은 무엇이며, 이를 skill 규칙에 어떻게 명시해야 할까?
• 제품별로 다른 분위기를 만들기 위해 브랜드·업종·사용자 맥락 중 어떤 정보를 shared memory에 저장해두는 것이 가장 효과적일까?
• 외부 오픈소스 design skill을 그대로 쓰는 것과 내부 기준에 맞춰 커스텀 skill로 재작성하는 것 중 어느 방식이 더 안전하고 유지보수하기 쉬울까?