AI 시대에 개인 웹사이트는 최고의 이력서입니다.
어제 제 개인 웹사이트 데모를 공개했는데, 네트워크 전체에서 거의 10만 회의 조회수를 기록했습니다. 많은 분들이 쪽지로 제작 방법을 물어보셨습니다.
https://x.com/Saccc_c/status/2071508004772475209
여러분의 사랑에 감사드리며, Codex를 사용해 2시간 안에 나만의 스타일로 개인 웹사이트를 만드는 방법을 자세히 소개하겠습니다.
일반 단계: 웹사이트 콘텐츠 문서 정리 — taste skill로 웹 페이지 참조 이미지 생성 — 자료 이미지 별도 생성 — Frontend App Builder skill로 웹 페이지 복제
(자세한 단계는 아래에)
1단계: Codex를 사용하여 상세한 웹사이트 콘텐츠 문서 정리
개인 정보와 웹사이트가 전달해야 할 콘텐츠를 Codex에 자세히 설명하고, 상세한 구조화된 문서를 정리하도록 하세요.
제 문서는 대략 다음과 같습니다.
- Sac의 개인 정보 및 IP 포지셔닝
- 페이지 수, 구조 및 스타일
- 전체 디자인 방향 및 레이아웃
작은 팁: Chrome 플러그인을 사용하여 Codex가 여러분의 소셜 미디어를 볼 수 있게 하면 정보를 보완하는 데 도움이 됩니다.
2단계: taste skill을 사용하여 고품질 웹페이지 참조 이미지 생성
taste skill의 imagegen-frontend-web 스킬을 사용하여 웹사이트 콘텐츠 문서와 결합해 각 페이지에 대한 상세한 참조 이미지를 생성합니다.
GitHub 주소: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
이것이 제 프롬프트입니다.
결과 참조 이미지 효과는 다음과 같습니다.
참고: taste skill의 imagegen-frontend-web 스킬을 사용하면 Codex가 이미지 생성 시 더 미적 감각을 가지게 되어 화면이 더 디자인적으로 느껴집니다.
3단계: 참조 이미지 구조 분석 및 분해, 주요 자료 이미지 별도 생성
완전한 참조 이미지를 얻은 후, 각 웹페이지의 주요 자료를 별도로 생성해야 합니다. 대화 상자에 직접 입력할 수 있습니다.
1이것은 제가 현재 생성한 웹페이지 참조 이미지입니다. 페이지별로 구조를 분석하고 다음을 판단하는 데 도움을 주세요:21. 코드로 구현할 수 있는 부분32. 별도로 자료를 생성해야 하는 주요 시각적 요소4아직 코드를 작성하지 말고, 먼저 자료 분해 제안을 해주세요.
그런 다음 ImageGen을 사용하여 주요 자료 이미지를 생성하여 참조 이미지의 세부 사항과 일관성을 유지합니다.
예를 들어, 제 개인 웹사이트의 아바타 자료:
4단계: Codex에 내장된 Frontend App Builder 스킬을 사용하여 웹페이지 참조 이미지를 실제 웹페이지로 복제
이전에 결정된 참조 이미지와 자료 이미지를 Codex에 제출하여 웹페이지 복제를 진행합니다.
여기서는 Build Web Apps 플러그인의 Frontend App Builder 스킬을 사용합니다. 이 스킬은 참조 이미지를 디자인 시안으로 간주하고 구조화된 프로세스에 따라 고충실도로 복원합니다.
웹페이지 복제를 위한 참조 프롬프트:
복제 효과는 다음과 같습니다.
