랜딩 페이지 디자인 스킬 · ai-design-skills

북마크 1만 5천 개가 붙은 랜딩 페이지들, 만든 디자이너가 그때 쓴 AI 스킬을 무료로 풀었어요

Claude Code나 Cursor 같은 코딩 AI에 이 스킬을 넣고 랜딩 페이지를 부탁하면, AI가 방문자가 할 행동 하나부터 묻고 페이지 구조·카피·FAQ·디자인 값을 정해 처음부터 만들어 줘요. 두바이의 8년 차 프로덕트 디자이너 Elaya가 무료로 공개한 스킬이에요. 자기 서비스 홈페이지를 이 스킬로 바꿔 내건 사례를 모아 봤어요.

2026.10.26·사례 3

Elaya — 출시 글, 2026-10-24(10월 26일 조회 530,942 · 좋아요 9,255 · 북마크 15,082)

elayadesign/ai-design-skills README(MIT 라이선스, 쓰는 법)

ai-design-skills 커밋 기록(2026-10-26 a2735a3 출처 표기)

10월 24일, 두바이의 프로덕트 디자이너 Elaya가 X에 랜딩 페이지 여러 장을 이어 붙인 15초 영상을 올렸어요. 글은 "I designed all of these landing pages in the last two months, using @higgsfield, Claude, and Cursor with my custom AI designer skill. The skill is open source(지난 두 달 동안 이 랜딩 페이지를 전부 Higgsfield, Claude, Cursor와 제가 만든 AI 디자이너 스킬로 디자인했어요. 스킬은 오픈소스예요)"였어요. 10월 26일까지 조회 53만 회를 넘겼고, 나중에 다시 보려고 저장한 수(북마크 1만 5천 개)가 좋아요(9천 개)보다 많았어요. 이 스킬로 자기 서비스 홈페이지를 다시 짜서 내건 창업자 셋을 모았어요. 한 명은 출시 글 나흘 전인 10월 20일, 두 명은 출시 글 다음 날인 10월 25일이에요. 랜딩 페이지 스킬은 7월부터 같은 저장소에 공개돼 있었어요.

이 스킬을 써 본 일본 소프트웨어 엔지니어 nogu는 이렇게 적었어요. "素のAIエージェントでもLP自体の完成はできると思うけど、原理原則に沿って作成することができる(맨 AI 에이전트로도 랜딩 페이지 자체는 완성할 수 있다고 생각하지만, 원리원칙에 맞춰 만들 수 있다)"

Elaya는 8년 차 프로덕트 디자이너로, 자기 제품 slopscan.co를 만들고 있고 디자인 의뢰도 받아요. 스킬은 MIT 라이선스로 무료이고, 이걸로 만든 페이지를 팔아도 출처를 적지 않아도 돼요. 공개 직후 다른 디자인 스킬 taste-skill을 만든 Leon Lin이 출처 표기를 요청했고, Elaya는 10월 26일 출처를 밝히고 겹치던 부분을 새로 썼어요.

스킬은 AI가 코드를 쓰기 전에 질문부터 하게 해요. 첫 질문은 "What is the ONE primary action?(방문자가 할 단 하나의 주요 행동은 무엇인가요?)"이에요. 답을 받으면 AI는 페이지 개요, 첫 화면 카피, 장점, 이용 순서, FAQ, 검색 노출(SEO/AEO), 배치안을 먼저 내놓고, 디자이너가 정해 둔 글꼴·간격·모서리·움직임 값으로 페이지를 만들어요.

Reference 01걸프 지역 회사용 AI 재무 도구 Hysaab를 만든 Wahaj Siddiqui · 자기 제품 홈페이지

AI 재무 도구 홈페이지에, 세 단계가 그림으로 움직이며 설명되는 이용 순서와 FAQ 8문항이 생겼어요

Wahaj는 이 저장소의 스킬로 Hysaab 영어 홈페이지를 다시 짰어요. 스킬에 든 글꼴·색 값은 자기 브랜드 값으로 바꾸고, 구조·카피·간격·모서리·움직임 규칙을 적용했다고 PR에 적었어요.

새 홈은 Request access를 하나뿐인 주요 버튼으로 두고, Book a demo를 그 옆에 붙였어요. 새로 생긴 How it works는 세 단계마다 실제로 움직이는 그림이 붙었고, 결과 카드 4장은 화면에 들어올 때만 움직이고, 화면 밖으로 나가면 멈춰요. 스크롤하면 단어가 하나씩 켜지는 태그라인과, 사이트에 이미 적힌 내용으로 답한 FAQ 8문항도 생겼어요.

10월 25일 같은 작업에서 아랍어 홈페이지도 같은 디자인으로 바꿨어요.

Hysaab 홈페이지 첫 화면. 'Your finance team. Without changing your accounting system.' 제목 아래 Request access 버튼과 Book a demo 링크, Xero·Zoho Books·QuickBooks·Odoo·Wafeq·ERPNext 연동 띠, 오른쪽에 월말 결산 달력 패널 — hysaab.ai 첫 화면, 2026-10-26 캡처예요. 오른쪽 패널의 숫자는 페이지가 예시라고 밝힌 값이에요.

Reference 02회의록 앱 Breeze를 만든 Julianchoo · 자기 제품 홈페이지

회의록 앱 홈페이지가 지키지 못하던 '녹음 다시 듣기' 약속을 지우고, 버튼 하나로 시작하는 페이지가 됐어요

Julianchoo는 landing-page-design을 프로젝트의.claude/skills/ 폴더에 넣기 전에 먼저 읽어 봤어요. "plain markdown with no scripts and no hidden content(스크립트도 숨은 내용도 없는 그냥 마크다운)"였다고 적었고, 스킬을 적용할 범위는 공개 홈페이지로만 좁혔어요.

새 홈은 첫 화면에 Google 로그인으로 시작하는 'Record your first meeting' 버튼 하나를 두고, 문제와 해결, 장점 5개, 녹음부터 요약까지 세 단계, 개인정보·기기·오디오 처리에 관한 FAQ 11문항, 써 보기 전의 부담을 덜어 주는 안내, 마지막 요청 버튼 순서로 이어져요.

옛 홈은 '오디오를 다시 들을 수 있다'고 약속했지만, 서버에 올라간 오디오는 받아쓰기가 끝나면 지워져요. 새 카피는 이 사실을 그대로 적었어요. 휴대폰 폭(390px)과 데스크톱 폭(1440px), 밝은 테마와 어두운 테마에서 화면이 옆으로 넘치지 않았고 콘솔 오류도 없었다고 해요.

Breeze 홈페이지 첫 화면. 크림색 바탕에 'Stay in the conversation. Breeze writes the notes.' 제목, 'Record your first meeting' 버튼 하나, 'No bot joins your call. Breeze listens from its own tab.' 문구 — breeze-ai-lime.vercel.app 첫 화면, 2026-10-26 캡처예요.

Reference 03아랍어·영어 AI 이력서 서비스 Seera AI를 만든 Nasser · 자기 제품 홈페이지

아랍어 이력서 서비스 홈페이지에서 있지도 않던 '리뷰 53개, 4.8점'이 사라지고, 두 언어 FAQ가 생겼어요

Nasser가 Claude Code에 맡겨 만든 PR에 따르면, 원래 홈에는 FAQ도, 크게 보여 주는 태그라인도, 본문 바로가기 링크도 없었어요. 영어 페이지 제목은 옛 이름 CVCraft였고, 검색용 데이터에는 실제로 없는 '리뷰 53개, 4.8점' 평점이 들어 있었어요.

바꾼 뒤에는 첫 화면 제목의 첫 줄이 흰색에서 회색으로 흐려지고, 금색 둘째 줄은 그대로 남아요. 마지막 요청 버튼 앞에 아랍어·영어 FAQ 6문항이 생겼고, 키보드로 쓰는 사람을 위한 본문 바로가기 링크도 들어갔어요. 영어 브랜드 이름은 Seera AI로 바꿨고, 가짜 평점은 지웠어요.

스킬의 규칙을 전부 따르지는 않았어요. "I skipped the skill rules that clash with Seera glass on purpose(Seera의 유리 질감 디자인과 부딪히는 스킬 규칙은 일부러 뺐다)"라고 적었어요. 움직이는 배경과 Readex Pro 글꼴은 남기고, 스킬이 정한 평평한 배경·글꼴·간격·모서리 값은 쓰지 않았어요.

Seera AI 홈페이지 아랍어 첫 화면. 짙은 녹색 바탕에 'سيرتك الذاتية الاحترافية، جاهزة في دقائق.' 제목, 이력서 편집기 패널, 요청 버튼 — cvcrft.com 아랍어 첫 화면, 2026-10-26 캡처예요. 제목은 '전문가다운 이력서를 몇 분 만에'라는 뜻이에요.

사람들의 반응

좋았다는 반응

“craft tells 14→0 ... the judge picked this branch on all three.”
디자인 흠 14개 → 0개 … 심사자는 세 번 모두 이 브랜치를 골랐다.
Claude Code용 도구 모음 gstack에 "Absorb all the interesting parts of this design skill(이 디자인 스킬의 흥미로운 부분을 전부 흡수해)"라고 요청해 /design-html에 맞게 고쳐 넣은 뒤, 브리프 세 개로 기존판과 블라인드 비교한 결과예요.
Garry Tan · gstack 관리자 · GitHubgithub.com
“The skill arm had all six. The control had none.”
스킬을 넣은 쪽에는 여섯 개가 다 들어갔다. 뺀 쪽에는 하나도 없었다.
같은 브리프로 자사 제품 랜딩을 스킬을 넣은 쪽과 뺀 쪽으로 한 번씩 만들어, 디자이너가 정한 움직임 곡선·제목 그라데이션·본문 폭 같은 값 여섯 개가 들어갔는지 센 실험이에요. 자사 제품을 소개하는 글이에요.
ThakiCloud · 기술 블로그thakicloud.com
“Clean work. The hero spacing beats most hand-built pages I see.”
깔끔하다. 첫 화면 간격이 내가 보는 손으로 만든 페이지 대부분보다 낫다.
출시 영상을 보고 단 답글이에요.
PrinceOwems · 웹디자이너 · Xx.com
“Another design-related skill, looks pretty cool.”
디자인 스킬이 또 하나 나왔다. 꽤 멋져 보인다.
Povilas Korop · AI 코딩 강사 · Xx.com

아쉬웠다는 반응

“the skill does not control facts.”
스킬이 사실까지 통제하지는 않는다.
스킬을 넣은 쪽 페이지에 브리프에 없던 '9m 41s', '$38.42' 같은 숫자가 들어갔다는 지적이에요.
ThakiCloud · 기술 블로그thakicloud.com
“does the skill need a lot of planning and direction? it js gave me back a generic tech look for a perfume store”
이 스킬은 계획과 방향을 많이 줘야 해? 향수 가게를 부탁했더니 그냥 흔한 테크 분위기로 돌려줬어.
simpcns · Xx.com
“Not carried over because they conflict with gstack's rules: fixed font lists, gradient hero text, fixed palettes and spacing, mandatory scroll reveals, one designer's signature nav.”
gstack 규칙과 부딪혀 가져오지 않은 것: 정해진 글꼴 목록, 그라데이션 첫 화면 제목, 정해진 색과 간격, 반드시 넣는 스크롤 등장 효과, 디자이너 한 사람의 시그니처 내비게이션.
Garry Tan · gstack 관리자 · GitHubgithub.com
“The skill's aesthetic (light, minimal editorial) is tuned to one direction”
이 스킬의 미감(밝고 미니멀한 에디토리얼)은 한 방향에 맞춰져 있다.
ThakiCloud · 기술 블로그thakicloud.com
“What used to be a leet landing page 2 months ago looks like ai slop rn”
두 달 전엔 끝내주던 랜딩 페이지가 지금은 AI가 찍어낸 것처럼 보인다.
출시 글에 단 답글이에요.
The Web Tailor(@r3ttila) · Xx.com

시작하는 법

Claude Code, Cursor, Codex 같은 코딩 에이전트에 아래 요청을 붙여 넣으면 돼요. 터미널을 쓰지 않으면 Claude.ai 프로젝트에 SKILL.md를 올리고 'follow this'라고 하면 돼요. 완성한 화면을 짧은 소개 영상(MP4·GIF)으로도 뽑고 싶으면 같은 저장소의 design-to-motion을 함께 넣어 달라고 하세요. 영상을 뽑으려면 컴퓨터에 ffmpeg가, Figma 프레임을 쓰려면 Figma 개인 접근 토큰이 있어야 해요.

시작 요청
이 글을 참고해 줘: https://www.working-ref.com/reference/ai-design-skills-2026-10 GitHub의 elayadesign/ai-design-skills 저장소에서 landing-page-design 스킬을 이 프로젝트에 넣어 줘(Claude Code면 .claude/skills/, Codex면 AGENTS.md, Cursor면 .cursor/rules/). 넣기 전에 SKILL.md에 스크립트나 숨은 지시가 없는지 먼저 확인해 줘. 그다음 내 서비스를 살펴보고, 이 스킬로 해 볼 만한 일 세 가지를 제안해 줘. 내가 하나 고르면 스킬의 질문을 한 번에 물어보고 바로 시작해 줘. 고를 게 없으면 홈페이지 첫 화면부터 다시 짜 줘. 글꼴과 색은 지금 쓰는 내 브랜드 값을 그대로 써 줘.

이 레퍼런스 공유하기

매주 1회 · 무료

이 레퍼런스가 도움이 되셨나요?

매주 쏟아지는 AI 소식 중 BEST
딱 3개만, 메일함에 꽂아 드릴게요

Work Smarter with AI

구독 완료 다음 호부터 메일함에서 만나요.