GPT-5.4 프론트엔드 디자인 완전 가이드 — AI가 '예쁜 웹사이트' 만드는 법을 배웠다

들어가며: AI가 만든 웹사이트는 왜 다 똑같았나?

2024년, "AI로 웹사이트 만들기" 붐이 일었다. Vercel의 v0, Bolt.new, Lovable — 프롬프트 한 줄로 웹사이트가 뚝딱 만들어졌다. 하지만 결과물을 보면 묘하게 다 비슷했다.

둥근 모서리 카드가 3열로 나열되고, 보라색-파란색 그라디언트 배경에, "Revolutionize Your Workflow"같은 헤드라인이 붙는다. 디자이너가 보면 한눈에 "아, AI가 만들었네"라고 알 수 있는 특유의 SaaS 템플릿 냄새가 났다.

왜 그럴까? AI 모델이 학습한 데이터 대부분이 Bootstrap, Tailwind UI, shadcn/ui 같은 컴포넌트 라이브러리의 예제 코드였기 때문이다. 모델은 "카드를 배치하면 안전하다"는 패턴을 학습했고, 결과적으로 모든 웹사이트가 카드 그리드 대시보드처럼 보이게 됐다.

2026년 3월 20일, OpenAI가 "Designing Delightful Frontends with GPT-5.4"라는 가이드를 공개했다. 이 가이드는 단순한 기능 소개가 아니다. AI가 왜 못생긴 웹사이트를 만들었는지 진단하고, 어떻게 하면 프로덕션 수준의 아름다운 UI를 만들 수 있는지 구체적인 규칙과 방법론을 제시한다.

이 글은 그 가이드를 완전 해부한다. AI 프론트엔드 생성의 역사부터 GPT-5.4의 혁신, 실전 프롬프팅 전략, 그리고 2026년 웹 개발의 미래까지.

제1장: AI 프론트엔드의 역사 — 스크린샷에서 코드까지

1.1 시작: 이미지를 코드로 바꾸는 꿈 (2017–2019)

AI로 UI를 만들겠다는 아이디어는 2017년으로 거슬러 올라간다.

덴마크 코펜하겐의 연구자 토니 벨트라멜리(Tony Beltramelli)가 발표한 논문 "pix2code"가 최초의 시도였다. 이 시스템은 GUI 스크린샷을 입력받아 세 가지 플랫폼(iOS, Android, Web)의 코드를 자동 생성했다. 원리는 간단했다 — CNN으로 이미지를 인코딩하고, LSTM으로 코드 토큰을 순차 생성하는 인코더-디코더 구조였다.

성능은 인상적이었다. 단순한 레이아웃에서 77%의 정확도를 보였다. 하지만 한계도 명확했다. 복잡한 레이아웃, 반응형 디자인, 실제 프로덕션 코드와는 거리가 멀었다.

2018년, 마이크로소프트가 Sketch2Code를 공개했다. 손으로 그린 와이어프레임을 촬영하면 HTML로 변환해주는 도구였다. 화이트보드에 대충 그린 네모 박스들이 실제 웹 컴포넌트로 바뀌는 데모 영상이 화제가 됐다. 하지만 이것도 실제 프로덕션에서는 못 쓸 수준이었다.

흥미로운 사실이 하나 있다. pix2code의 저자 토니 벨트라멜리는 이후 Uizard라는 회사를 공동 창립했다. AI로 와이어프레임을 디자인 목업으로 변환하는 도구였다. 학계의 아이디어가 바로 스타트업으로 이어진 최초의 사례 중 하나다.

같은 해(2017년), Airbnb도 내부적으로 비슷한 시도를 했다. 화이트보드 스케치를 촬영하면 React 컴포넌트를 생성하는 프로토타입이었다. 기술 발표에서 데모가 공개되어 화제가 됐지만, 실제 프로덕션에 배포되지는 않았다.

이 시기의 핵심 한계는 "이해 없는 변환"이었다. 모델은 픽셀을 코드로 매핑할 뿐, 왜 그 디자인이 좋은지, 어떤 인터랙션이 필요한지 이해하지 못했다.

1.2 대전환: LLM이 코드를 "쓰기" 시작하다 (2022–2024)

2023년 3월, OpenAI의 GPT-4가 게임 체인저였다. pix2code가 "이미지 → 코드 변환기"였다면, GPT-4는 "자연어 → 코드 작성기"였다. "로그인 페이지를 만들어줘"라고 말하면, HTML/CSS/JavaScript를 한 번에 생성했다.

하지만 진짜 혁명은 2023년 10월, Vercel이 v0를 공개하면서 시작됐다. v0는 GPT-4를 기반으로 하되, shadcn/ui + Tailwind CSS라는 특정 디자인 시스템에 특화된 프론트엔드 생성 도구였다. 프롬프트를 입력하면 React 컴포넌트가 즉시 렌더링되어 화면에 나타났다.

v0의 성공은 핵심 인사이트를 증명했다: 제약 조건이 있는 AI가 더 나은 결과를 만든다. 아무 코드나 생성하는 것보다, "Tailwind CSS + React + shadcn/ui"라는 명확한 스택 안에서 생성할 때 품질이 훨씬 높았다.

2024년에는 Bolt.new와 Lovable이 폭발적으로 성장했다. 이들의 차별점은 "프롬프트 → 코드" 수준을 넘어 배포까지 원클릭으로 해결한다는 것이었다. StackBlitz의 WebContainers 기술 덕에 브라우저 안에서 Node.js 앱이 돌아갔고, 사용자는 코드를 한 줄도 보지 않고 웹사이트를 만들 수 있었다.

그 직전인 2023년 11월, 협업 화이트보드 도구 tldraw의 창립자 스티브 루이즈가 "Make Real"이라는 기능을 공개해 화제를 모았다. 화이트보드에 손으로 그린 UI를 GPT-4V가 실시간으로 HTML로 변환하는 데모였다. pix2code의 꿈이 6년 만에 LLM으로 실현된 순간이었다.

2024년에는 학계에서도 이 현상을 분석하기 시작했다. Stanford와 Georgia Tech의 연구팀이 발표한 "Design2Code: How Far Are We From Automating Front-End Engineering?"(arXiv:2403.03163) 논문은 멀티모달 LLM의 디자인-to-코드 능력을 체계적으로 벤치마킹했다. GPT-4V는 레퍼런스 디자인과 약 49%의 시각적 유사도로 코드를 생성할 수 있었다. 절반은 맞추고 절반은 틀리는 수준 — 가능성은 보이지만 아직 갈 길이 멀다는 결론이었다.

같은 해, Anthropic의 Claude Artifacts와 Anysphere의 Cursor가 개발자 시장을 뒤흔들었다. Claude Artifacts는 대화 중에 React 컴포넌트를 실시간으로 렌더링했고, Cursor는 AI가 코드베이스 전체를 이해하고 수정하는 AI IDE 시대를 열었다.

1.3 문제: "다 똑같아 보이는" AI 프론트엔드

하지만 이 모든 도구에 공통된 문제가 있었다. 디자인 품질이었다.

AI가 만드는 웹사이트들은 기능적으로는 작동했지만, "프로 디자이너가 만든 것 같은 느낌"이 없었다. 구체적으로:

왜 이런 일이 벌어졌을까? 답은 학습 데이터에 있다. LLM은 GitHub의 수억 개 코드 저장소에서 학습했다. 그 코드의 대다수는 컴포넌트 라이브러리 문서, SaaS 대시보드 템플릿, 기술 블로그 보일러플레이트다. "카드 3열 배치"가 가장 흔한 패턴이니, AI도 가장 먼저 카드를 꺼내는 것이다.

OpenAI가 2026년 3월 공개한 GPT-5.4 프론트엔드 가이드는 바로 이 문제에 대한 체계적인 해답이다.

제2장: GPT-5.4의 세 가지 혁신

OpenAI의 가이드는 GPT-5.4가 이전 모델과 근본적으로 다른 세 가지 능력을 갖게 됐다고 설명한다.

2.1 이미지 이해 + 도구 사용 (Image Understanding & Tool Use)

GPT-5.4는 단순히 텍스트로 코드를 생성하는 것을 넘어, 이미지를 보고 이해하고, 이미지 검색/생성 도구를 직접 사용한다.

이전 모델은 "Airbnb 같은 디자인"이라고 말하면 텍스트로만 추론했다. GPT-5.4는 실제로 이미지를 검색하여 레퍼런스를 확보하고, 그 레퍼런스의 레이아웃 리듬, 타이포그래피 스케일, 여백 시스템, 이미지 처리 방식을 추론한다.

핵심은 "무드보드를 먼저 만들라"는 권장사항이다. 디자이너가 프로젝트 시작 전 Pinterest에서 레퍼런스를 모으듯, GPT-5.4에게도 "먼저 무드보드를 만들고 에셋을 확정한 뒤 코딩하라"고 지시하면 결과물의 품질이 급격히 올라간다.

2.2 기능 향상 — 한두 번의 대화로 복잡한 인터랙션

GPT-5.4 이전 모델에서는 복잡한 인터랙티브 경험 — 예를 들어 드래그 앤 드롭 인터페이스, 실시간 데이터 시각화, 게임 UI — 을 만들려면 수십 번의 대화가 필요했다. 중간에 맥락을 잃거나, 앞서 만든 코드를 덮어쓰는 일도 빈번했다.

GPT-5.4는 긴 작업에서의 안정성이 크게 향상됐다. "이전에는 불가능하다고 여겼던 복잡한 인터랙티브 경험이 한두 턴 안에 가능해졌다"고 OpenAI 가이드는 설명한다.

이것이 의미하는 바는 크다. AI 프론트엔드 생성이 "간단한 랜딩 페이지" 수준에서 "인터랙티브 웹 앱" 수준으로 올라간 것이다. 게임, 대시보드, 데이터 시각화 도구까지.

2.3 컴퓨터 사용과 검증 (Computer Use & Verification)

가장 혁신적인 변화다. GPT-5.4는 자신이 만든 코드를 직접 브라우저에서 확인할 수 있다.

이전에는 AI가 코드를 생성하면 사람이 브라우저를 열어 확인해야 했다. "여기 깨졌어", "모바일에서 안 맞아" 같은 피드백을 수동으로 전달했다. GPT-5.4는 이 과정을 자율적으로 수행한다. Playwright 같은 브라우저 자동화 도구로 실제 렌더링 결과를 확인하고, 다양한 화면 크기에서 테스트하고, 인터랙션을 검증한다.

이것은 "코드를 짜는 AI"에서 "디자인을 완성하는 AI"로의 전환이다.

제3장: 프론트엔드 하드 룰 — AI에게 "디자인 감각"을 주입하다

GPT-5.4 가이드의 핵심은 "프론트엔드 하드 룰(Frontend Hard Rules)"이다. 이것은 AI가 따라야 할 디자인 원칙이며, 동시에 인간 개발자에게도 유용한 실전 디자인 가이드다.

3.1 구성과 브랜딩

"첫 번째 뷰포트는 하나의 작품(composition)이어야 한다. 대시보드가 아니다."

이 한 문장이 AI 프론트엔드의 가장 큰 문제를 관통한다. AI는 기본적으로 "정보를 정리"하려 하기 때문에, 첫 화면을 대시보드처럼 만든다. 카드, 통계, 배지, 아이콘 행이 잔뜩 들어간다.

하드 룰은 명확하다:

랜딩 페이지에서 히어로 이미지는 풀블리드(full-bleed)여야 한다. 인셋, 사이드 패널, 둥근 모서리, 타일 변형 모두 금지. 이것은 디자이너들 사이에서 "히어로 이미지는 화면을 지배해야 한다"는 오래된 원칙의 AI 버전이다.

3.2 카드의 올바른 사용법

"기본은 카드 없음(no cards). 카드는 인터랙션 컨테이너일 때만 허용된다."

이것은 AI 프론트엔드 가이드에서 가장 혁명적인 규칙이다. 대부분의 AI 생성 UI가 카드로 시작하기 때문이다.

핵심 원칙: 카드는 "클릭하거나 드래그하는 것"에만 사용한다. 정보를 단순히 보여주는 용도로는 섹션, 열, 구분선, 리스트를 쓴다.

3.3 타이포그래피와 배경

AI가 자주 범하는 실수 두 가지:

1. 기본 폰트 스택만 사용: system-ui, -apple-system만 쓰면 개성이 없다. GPT-5.4 가이드는 "표현적이고 목적 있는 폰트"를 사용하라고 권한다. 서체 2개, 악센트 컬러 1개가 기본이다.

2. 단색 배경: 흰색이나 회색 단색 배경은 밋밋하다. 그라디언트, 이미지, 미묘한 패턴을 사용하라는 것이 규칙이다.

3.4 섹션의 원칙: "한 섹션, 한 가지 일"

"각 섹션은 하나의 할 일만 가진다: 설명하거나, 증명하거나, 심화하거나, 전환하거나."

이것은 커뮤니케이션 디자인의 근본 원칙이다. 신문 편집에서 온 개념으로, 한 단락이 하나의 메시지만 전달해야 독자가 스캔할 수 있다는 것이다. AI는 한 섹션에 여러 아이디어를 우겨넣는 경향이 있다.

이 마케팅 페이지의 서사 구조(Narrative Structure)는 사실 수십 년간 광고업계에서 검증된 AIDA 모델(Attention → Interest → Desire → Action)의 웹 버전이다.

제4장: Frontend Skill — 프롬프트 하나에 담긴 디자인 철학

GPT-5.4 가이드의 하이라이트는 **frontend-skill**이라는 전용 스킬(프롬프트 세트)이다. 이것은 단순한 프롬프트가 아니라, AI에게 디자인 감각을 주입하는 체계적인 방법론이다.

4.1 시작 전 세 가지 작성물

코드를 한 줄도 쓰기 전에, 세 가지를 먼저 정의해야 한다:

이 과정은 실제 디자인 에이전시의 크리에이티브 브리프(Creative Brief) 프로세스와 정확히 일치한다. 클라이언트와 디자이너가 작업 전에 "무드와 방향"을 합의하는 그 과정을 AI에게도 적용한 것이다.

4.2 아름다운 기본값 (Beautiful Defaults)

frontend-skill이 정의하는 기본값들:

마지막 규칙이 가장 중요하다. "첫 화면을 포스터처럼 만들어라." 이것은 웹 디자인의 근본적인 관점 전환이다. AI는 "정보를 구조화"하도록 학습됐기 때문에 첫 화면을 문서처럼 만든다. 하지만 좋은 랜딩 페이지의 첫 화면은 영화 포스터에 가깝다 — 하나의 강렬한 이미지, 하나의 메시지, 하나의 행동 유도.

4.3 앱 UI 가이드라인: Linear처럼

마케팅 페이지와 달리, 앱/대시보드 UI에는 다른 규칙이 적용된다. GPT-5.4 가이드는 Linear(프로젝트 관리 도구)의 디자인을 이상적인 모델로 제시한다.

앱 UI에서 카피는 마케팅 언어가 아닌 유틸리티 언어를 써야 한다. "혁신적인 분석을 시작하세요" 대신 "검색 지표", "플랜 상태"처럼 사용자가 하는 행동이나 보는 데이터를 설명하는 헤딩을 쓴다.

4.4 이미지 기준

"이미지는 제품, 장소, 분위기, 맥락을 보여줘야 한다 — 장식이 아니라."

제5장: 실전 프롬프팅 전략 — 어떻게 쓰면 되나?

이론을 알았으니, 실전이다. OpenAI 가이드가 제시하는 4가지 실전 전략.

5.1 디자인 제약 조건 정의하기

AI에게 자유를 주면 안 된다. 제약이 곧 품질이다.

핵심은 "6개 이하 섹션"과 "서체 2개, 악센트 1개"다. 이 간단한 제약만으로도 AI 생성물의 품질이 극적으로 달라진다.

5.2 비주얼 레퍼런스 제공하기

텍스트 설명보다 이미지 한 장이 낫다. GPT-5.4의 이미지 이해 능력을 활용해서:

1. 좋아하는 웹사이트의 스크린샷을 첨부한다
2. "이 레이아웃의 여백 시스템과 타이포 스케일을 참고해서" 라고 지시한다
3. 무드보드를 먼저 생성하게 한다 — "커피 브랜드 랜딩 페이지 무드보드를 만들어줘"

5.3 리즈닝 레벨: 낮게 시작하라

GPT-5.4 가이드의 반직관적인 조언: 추론 레벨을 낮게 설정하라.

높은 추론 레벨은 모델이 "더 많이 생각"하게 만든다. 이것이 알고리즘 문제에는 좋지만, 프론트엔드 디자인에서는 과잉 사고(overthinking)로 이어진다. 레이아웃이 복잡해지고, 불필요한 변형이 추가되고, 결과적으로 "지나치게 만들어진(overbuilt)" UI가 탄생한다.

낮은 추론 레벨에서 모델은 단순하고 직관적인 선택을 한다. 그리고 대부분의 경우, 그것이 더 나은 디자인이다.

5.4 실제 콘텐츠를 제공하라

"Lorem ipsum"은 AI 프론트엔드의 적이다. 실제 카피, 실제 제품 이름, 실제 고객 후기를 제공하면:

• 섹션 구조가 콘텐츠에 맞게 최적화된다
• 서사 흐름이 자연스러워진다
• 이미지 선택이 맥락에 맞게 이뤄진다

"한국어 카피를 직접 제공"하는 것이 특히 중요하다. AI가 생성하는 한국어 마케팅 카피는 번역체가 되기 쉽기 때문이다.

가이드에는 흥미로운 "30% 테스트"도 있다: 카피의 30%를 삭제했을 때 페이지가 더 나아진다면, 계속 삭제하라는 것이다. 대부분의 AI 생성 카피는 불필요하게 장황하다.

제6장: 모션 디자인 — 움직임으로 품격을 만들다

GPT-5.4 가이드는 모션(애니메이션)에 대해서도 명확한 규칙을 제시한다. 핵심은 "2~3개의 의도적인 모션만"이라는 것이다.

6.1 세 가지 필수 모션

가이드는 Framer Motion을 선호 라이브러리로 추천한다. 섹션 리빌, 공유 레이아웃 전환, 스크롤 연동 효과, 스티키 스토리텔링, 의미 있는 캐러셀, 메뉴/드로어/모달에 적합하기 때문이다.

6.2 모션의 리트머스 테스트

모든 모션은 다음 질문을 통과해야 한다:

• 짧은 녹화 영상에서도 눈에 띄는가?
• 모바일에서도 부드러운가?
• 빠르고 절제되어 있는가?
• 페이지 전체에서 일관적인가?
• 장식적일 뿐인 모션은 없는가? → 있으면 제거

제7장: 리트머스 체크 — AI 결과물을 어떻게 평가할 것인가

GPT-5.4 가이드는 마지막에 7가지 리트머스 체크를 제시한다. AI가 만든 프론트엔드가 "진짜 좋은지" 판단하는 체크리스트다.

1. 브랜드 인식: 첫 화면에서 어떤 브랜드/제품인지 즉시 알 수 있는가?
2. 비주얼 앵커: 하나의 강력한 시각 요소가 있는가?
3. 헤드라인 스캔: 헤드라인만 읽어도 페이지를 이해할 수 있는가?
4. 섹션 역할: 각 섹션이 하나의 일만 하는가?
5. 카드 필요성: 카드가 정말 필요한가?
6. 모션 기여도: 모션이 계층 구조나 분위기를 향상하는가?
7. 장식 제거 테스트: 모든 장식적 그림자를 제거해도 프리미엄하게 느껴지는가?

특히 7번이 핵심이다. 장식을 빼도 좋아 보여야 진짜 좋은 디자인이라는 것. 이것은 디터 람스(Dieter Rams)의 "좋은 디자인은 가능한 한 적게 디자인한다(Less, but better)" 원칙의 디지털 버전이다.

반드시 거부할 패턴

가이드는 AI가 흔히 만드는 7가지 안티패턴도 명시한다:

제8장: 2026년, 프론트엔드 개발은 어디로 가는가

8.1 "바이브 코딩"에서 "바이브 디자인"으로

2025년 2월, 전 Tesla AI 수장이자 OpenAI 공동 창립자 Andrej Karpathy가 X에 올린 포스트가 화제가 됐다:

"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

"나는 이걸 '바이브 코딩'이라 부른다. 분위기에 완전히 몸을 맡기고, 코드가 존재한다는 사실조차 잊는 것."

이 용어는 순식간에 퍼져나갔다.

GPT-5.4의 프론트엔드 가이드는 이 개념을 한 단계 더 발전시킨다. 바이브 디자인(Vibe Design) — 코드뿐 아니라 디자인의 분위기까지 AI가 이해하고 구현하는 것.

비주얼 테제("어두운 톤, 미니멀한 소재감, 차분한 에너지")를 한 문장으로 전달하면, AI가 그 분위기에 맞는 색상, 폰트, 레이아웃, 이미지, 모션을 일관되게 생성한다. 이것이 가능해진 것은 GPT-5.4의 이미지 이해 + 도구 사용 능력 덕분이다.

8.2 디자이너의 역할 변화

GPT-5.4 가이드가 암시하는 미래는 명확하다:

디자이너가 한 땀 한 땀 컴포넌트를 만드는 사람에서 AI에게 방향을 지시하는 크리에이티브 디렉터로 바뀐다. "비주얼 테제를 쓰고, 무드보드를 만들고, 결과물을 리트머스 체크하는 것" — 이것이 2026년 디자이너의 핵심 역할이 된다.

하지만 이것이 디자이너가 필요 없어진다는 뜻은 아니다. 오히려 반대다. "무엇이 좋은 디자인인지 판단하는 능력"이 더 중요해진다. AI는 실행을 대신하지만, 방향 설정과 품질 판단은 여전히 인간의 몫이다.

8.3 AI 코딩 에이전트 생태계의 경쟁

GPT-5.4의 프론트엔드 능력은 Codex(OpenAI의 코딩 에이전트)와 결합하여 힘을 발휘한다. 하지만 이것은 경쟁 도구들도 빠르게 따라올 영역이다.

8.4 왜 Tailwind CSS가 AI와 가장 잘 맞는가

GPT-5.4 가이드가 React + Tailwind CSS 조합을 특별히 추천하는 데는 이유가 있다. Tailwind의 유틸리티 클래스 시스템이 AI 코드 생성에 구조적으로 유리하기 때문이다:

8.5 OpenAI 쇼케이스: 실제 결과물

OpenAI는 GPT-5.4 + Codex로 만든 실제 결과물을 쇼케이스 갤러리(developers.openai.com/showcase)에서 공개하고 있다. 랜딩 페이지, 이커머스, 게임 UI, 데이터 시각화까지 — 이 가이드의 원칙이 적용된 결과물이다.

8.6 핵심 시사점: "제약이 창의성을 만든다"

GPT-5.4 가이드에서 가장 중요한 교훈은 기술이 아니라 철학이다:

"AI에게 자유를 주면 평범한 결과가 나온다. 제약을 주면 훌륭한 결과가 나온다."

이것은 사실 인간 디자인에서도 똑같은 원칙이다. 트위터(현 X)의 140자 제한이 간결한 글쓰기 문화를 만들었고, 하이쿠의 5-7-5 형식이 시적 긴장감을 만든다. 제약은 창의성의 적이 아니라, 창의성의 촉매제다.

GPT-5.4의 frontend-skill은 이 원칙을 체계적으로 코드화한 것이다. "카드 금지", "서체 2개", "섹션 6개 이하" — 이 단순한 제약들이 모여서 "AI가 만든 것 같지 않은" 아름다운 웹사이트를 만든다.

마무리: 코드를 넘어, 감각을 프로그래밍하다

GPT-5.4의 프론트엔드 가이드는 단순한 "AI 코딩 팁"이 아니다. 이것은 "디자인 감각을 프로그래밍할 수 있는가?"라는 질문에 대한 OpenAI의 대답이다.

대답은 "Yes, 하지만 조건이 있다"다. 그 조건이 바로 이 글에서 다룬 모든 것 — 하드 룰, 비주얼 테제, 콘텐츠 플랜, 리트머스 체크 — 이다.

2017년, pix2code가 "AI가 코드를 만들 수 있다"는 것을 보여줬다. 2023년, v0가 "AI가 쓸만한 UI를 만들 수 있다"는 것을 보여줬다. 2026년, GPT-5.4가 "AI가 아름다운 UI를 만들 수 있다"는 것을 보여주고 있다.

다음 질문은 이것이다: "AI가 감동을 주는 UI를 만들 수 있을까?" 아직은 아니다. 하지만 그 거리는 빠르게 줄어들고 있다.

참고 자료:

• OpenAI, "Designing Delightful Frontends with GPT-5.4", developers.openai.com, 2026.03.20
• OpenAI, frontend-skill, GitHub: openai/skills, 2026
• Tony Beltramelli, "pix2code: Generating Code from a Graphical User Interface Screenshot", arXiv:1705.07962, 2017
• Si et al., "Design2Code: How Far Are We From Automating Front-End Engineering?", arXiv:2403.03163, 2024
• Microsoft, "Sketch2Code: Turning hand-drawn designs into working code", AI Blog, 2018
• Laurençon et al., "WebSight: A Large-Scale Dataset for Training Webpage Screenshot-to-HTML Models", Hugging Face, 2024
• Andrej Karpathy, "Vibe Coding", X post, 2025.02
• Dieter Rams, "Ten Principles for Good Design", Vitsoe