AI 웹사이트 빌더
다섯 가지가 동시에 충족될 때 앱은 세계적 수준이 됩니다. 사용자가 실제로 원했던 것을 제공합니다. 다른 어떤 앱과도 비슷하지 않으면서도 전환율이 높습니다. 오직 진실만을 말합니다. 모든 것이 작동합니다. 그리고 완료되었다고 말하기 전에 누군가가 실제 브라우저에서 살펴보았습니다. 이 스킬은 모든 스택에서, 단독으로 또는 도우미 에이전트와 함께 이 다섯 가지를 모두 달성하는 방법입니다.
시작하기: 사람들이 그 안에서 무엇을 할 것인가?
도구 호출 전에, 무엇을 구축할지 결정하세요. 명확하지 않다면 references/01-read-the-request.md를 읽으십시오.
| 사용자가 요청하는 것... | 구축 | 읽기 |
|---|---|---|
| 비즈니스, 사람, 장소 또는 판매하는 것에 대한 앱 | 읽기용 앱: 이야기, 사용자가 제공한 실제 증거, 연락 방법 | 01, 02, 03, 09, 04, 10 |
| 사용할 무언가: 대시보드, 도구, 포털, "Slack 같은 것", 작업 도구의 재설계 | 작동하는 앱: /는 작업 화면이며, 데모 데이터와 (사용자가 로그인하는 경우) 보이는 데모 자격 증명이 있습니다 | 01, 05 먼저, 그 다음 03, 09, 04 |
| 활동 (언어 학습, 시험 연습, 계획, 추적) 및 대상을 가지고 있지만 비즈니스 이름이 없는 경우 | 작동하는 앱. 학습용: 디자인된 홈과 섹션, 그 다음 레슨, 연습, 진행 상황. 가상 학교에 대한 브로셔가 아닙니다 | 01, 05, 09 |
| 기존 제품을 소개하는 페이지 | 해당 제품에 대한 읽기용 앱 | 01, 02, 03, 09, 04, 10 |
요청에서 "웹사이트"라는 단어가 결정하지 않습니다. 소유자 단어 ("내 아카데미", "우리 가게")와 사람들이 그 안에서 무엇을 할 것인지가 결정합니다. 의심스러우면 작동하는 앱 읽기를 구축하고 첫 메시지에 그렇게 말하십시오.
루프 (references/00-operating-loop.md에 자세히)
- 요청을 읽습니다.
.app-notes/brief.json(사용자의 말, 알려지지 않은 것, 가정이 포함된 사실)과.app-notes/requirements.json(현재와 나중에 말하는 모든 것)을 작성합니다. 잘못된 추측이 빌드를 변경할 수 있는 경우에만 최대 하나의 그룹화된 질문을 합니다. - 리서치 및 전략 (3단계와 함께). 실제 카테고리를 연구하고, 아홉 가지 전략 답변과 디자인 논제를 작성합니다.
references/02-research-and-strategy.md - 영감 보드 (2단계와 함께). 라운드당 6개의 보드; 각 보드는 동일한 앱의 4개 화면(약 2048 x 1280)으로 표시되는 '하나의' 디자인입니다. 사용자는 만족할 때까지 추가 라운드를 요청할 수 있습니다. 6개는 대상 청중 문화의 6개 후보 세계에서 비롯되며, 6개의 형용사가 아닙니다 (
references/09-design-craft.md섹션 2).references/03-design-direction.md - 컨셉, 증명, 패널. 보드당 하나의 컨셉, 구조적으로 다릅니다. 각각을 실제 페이지로 렌더링하고, 점수를 매기고, 선택합니다.
- 방향을 바인딩합니다.
DESIGN.md,tokens.css,fonts.css, 명암 대비 확인, 페이지당 청사진. - 계획. 한 줄 작업을 포함한 페이지 및 섹션, 실행 가능한 수락 단계가 있는 기능, 작업이 포함된 이미지.
- 구축. 기초 먼저, 그 다음 페이지 빌더를 병렬로, 그 다음 통합자. 토큰만, 실제 복사, 실제 이미지, 작동하는 컨트롤.
references/04-build-system.md및 (작동하는 앱의 경우)05-working-apps.md. - 검증
scripts/check-app.mjs를 프로덕션 빌드에 대해 실행: 3가지 크기, 방문자가 스크롤하는 방식으로 스크롤, 그림, 측정된 사실, 디자인 스캔(명암, 타이포그래피, 계층, 덮힌 텍스트, 생성기 알림), 기능 흐름, 녹화된 투어.references/06-qa-and-repair.md - 비평, 그 다음 수리. 먼저 디자인을 고정되지 않은 상태로 판단합니다. 그 다음 스캔을 읽습니다. 그 다음 명명된 패스(레이아웃, 조판, 색칠, 더 대담하게, 강화, 폴리쉬...)를 하나씩 실행합니다. 각 패스는 범위가 지정되고 증거로 끝납니다. 원인을 수정하고, 다시 확인합니다. 더 악화시킨 것은 롤백합니다.
references/09-design-craft.md - 선택한 그림에 맞춰 다듬고, 그 다음 측정값만으로 정직하게 보고합니다.
3, 4, 8, 9단계를 건너뛰지 마십시오. 이 단계들이 앱이 템플릿이 아닌 것이 되고 "완료"가 주장이 아닌 것이 되는 지점입니다. 독립적인 단계는 함께 실행합니다.
비협상 조건
- 정직함이 무엇보다 우선입니다. 절대 사용후기, 로고, 언론 보도, 평점, 통계, 수상 내역, 팀원, 주소, 이메일, 전화번호, 가격, 영업 시간, 응답 시간, 정책, 보증 또는 자격을 허위로 만들지 마십시오. 누락된 사실은 생략(기본값)하거나, 초대로 바꾸거나, 소유자를 위해 눈에 띄게
<Draft>로 한 번 표시합니다. 사용자가 나열하지 않은 것을 세는 것은 허위로 만드는 것입니다. 작동하는 앱의 샘플 데이터는 화면에 "데모 데이터"라고 표시하는 경우에만 허용됩니다. - 아무것도 작동하는 척하지 않습니다.
href="#", 아무데도 가지 않는 양식, 비활성화된 "아직 연결되지 않음" 버튼, 사용자가 선택하지 않은 타사 양식 서비스, 아무거나 받아들이는 로그인이 없습니다. 실제로 연결하거나, 빼고 그렇게 말하십시오. - 측정되지 않은 것은 절대 주장하지 마십시오. 해당 특정 주장에 대한 증거 없이 "테스트됨", "검증됨", "접근성 있음", "다듬어짐" 또는 "반응형"이라고 말하지 마십시오. "볼 수 없었음"은 절대 "깨끗함"이 아닙니다. 시작하는 호출을 하지 않는 한 작업이 시작되었다고 말하지 마십시오.
- 코드 전에 그림에서 모양을 결정하고, 선택한 그림에 맞춰 구축하십시오. 기본 스톡 룩은 사용하지 마십시오. 이 클라이언트의 세계가 정당화하지 않는 한 1차 및 2차 AI 특징을 거부하십시오 (
09는 QA 스크립트가 측정하는 규칙으로 나열합니다.review결과는 이유가 있을 때만 유지됩니다). - 하나의 디자인 시스템. 색상, 서체, 반경, 그림자 및 이징은 토큰에서만 비롯됩니다. 최대 두 개의 서체 패밀리. 하나의 시그니처 순간과 하나의 의도된 불완전함. 악센트는 드물게 사용합니다.
- 이미지는 풍부하고, 예술적으로 연출되며, 절대 가짜가 아닙니다. 스크롤 화면당 약 하나, 하나의 공유 스타일, 이미지 매니페스트를 통해, 실제 대체 텍스트 사용. 사물이나 사람의 손으로 그린 SVG 그림 없음. 이미지 내부의 레터링 없음. 실제 이벤트로 캡션된 AI 이미지 없음.
- 올바른 언어, 올바른 스크립트.
lang및dir설정. 실제 스크립트 (절대 음역으로 대체하지 않음). 논리적 CSS 속성. 확인할 수 없는 번역은 소유자에게 플래그를 지정합니다. - 사용자가 말하는 모든 것은 기록되고 사용됩니다. 후속 조치, 안내 및 답변은 요구 사항 원장에 기록되고 모든 후속 단계에서 읽힙니다. 후속 조치는 동일한 프로젝트를 계속합니다.
- 증거가 코드보다 중요합니다. 모든 시각적 주장은 이 실행에서 390, 768 및 1440에서 살펴본 그림에서 비롯됩니다.
- 원인을 수정하고, 가장 작은 변경을 하십시오. 재현하고, 원인을 수정하고, 다시 확인하십시오. 두 번의 실패한 패치: 구성 요소를 다시 작성하십시오. 생성된 그림 내부의 결함은 CSS가 아닌 새 그림이 필요합니다.
스타터 및 스크립트
<skill> 아래는 이 SKILL.md가 있는 폴더입니다 (예: ~/.claude/skills/ai-website-builder). 프로젝트 폴더에서 스크립트를 실행하십시오.
bash <skill>/scripts/scaffold.sh ./my-app [--app] # 스타터 복사, 설치, 린트, 빌드 (--app은 src/app/을 추가하여 작동하는 앱으로 만듦)
node <skill>/scripts/contrast.mjs --tokens src/styles/tokens.css # 구성 요소가 사용하는 모든 색상 쌍, 라이트 및 다크
node <skill>/scripts/optimize-images.mjs --src .app-notes/originals --alt .app-notes/alt.json # avif + webp 세트 및 매니페스트
pnpm build && pnpm preview # 프로덕션 빌드 제공 (계속 실행)
node <skill>/scripts/check-app.mjs --url http://localhost:4173 --flows .app-notes/flows.json --tour [--extremes]
# 그림, 측정된 사실, 디자인 스캔, 기능 흐름, 녹화된 방문, 보고서
# --extremes는 320x640 및 1920x1080을 추가합니다; --no-design은 스캔을 건너<0xEB><0x9B><0x84>
QA 스크립트에는 Playwright가 필요합니다 (pnpm add -D playwright && npx playwright install chromium) 또는 --chrome /path/to/chrome. 최적화 도구에는 sharp가 필요합니다.
assets/template/는 Vite + React 19 + TypeScript + Tailwind v4이며, 경로별 사전 렌더링, 토큰 계약, 18개의 UI 기본 요소, 모션 키트, 몰입형 키트, 앱 키트 및 일반적인 실수에 대해 빌드를 실패시키는 린트를 포함합니다. AGENTS.md는 권위 있는 파일 맵입니다. STANDALONE.md는 호스팅 플랫폼 없이 수동으로 수행해야 할 작업(작성자 토큰, 이미지 만들기, 양식 엔드포인트 설정)을 설명합니다. 작동하는 앱의 경우 scaffold.sh --app을 사용하십시오 (src/app/{accounts,db,seed}.ts를 작성합니다. 아무도 로그인하지 않는 앱은 demoAccounts를 비워 둡니다). 사용자의 프로젝트에 이미 다른 스택이 있는 경우 해당 스택을 사용하십시오. 방법, 규칙 및 스크립트는 템플릿에 의존하지 않습니다.
도우미 사용
하위 에이전트 도구를 사용하는 경우 references/08-role-briefs.md로 분할하고 각 도우미에게 분리된 쓰기 범위(기초: 공유 파일; 페이지 빌더: 각 페이지 폴더 하나; 통합자는 마지막)를 제공하십시오. 단독으로도 동일한 순서를 따르십시오. 하나의 공유 할 일 목록을 유지하십시오: 사용자의 항목은 사용자가 변경할 수 있습니다. 자신의 부분에 맞는 항목이 열려 있는 동안에는 넘겨주지 마십시오. 마지막에 모든 항목이 완료되거나, 메모와 함께 차단되거나, 이유와 함께 완료되지 않습니다.
종료 보고서 (측정값에서만)
구축한 내용(페이지, 기능); 작동하는 앱의 경우 실제인 것과 모의된 것; 사용자가 제공해야 하는 것; 검증된 것(판결)과 검증되지 않은 것; 평이한 언어로 아직 열려 있는 것; 요구 사항별: 구축 및 검증됨, 구축되었지만 검증되지 않음, 또는 완료되지 않음 및 이유. 짧고, 평이하며, 마케팅 톤이 없어야 합니다. 보내기 전에 assets/checklists/done.md를 사용하십시오.
참조 맵
| 파일 | 읽어야 할 때 |
|---|---|
references/00-operating-loop.md | 실행 계획, 작업 분할, 원장 및 할 일 목록 유지 |
references/01-read-the-request.md | 모든 작업의 처음 10분; 읽기 앱 또는 작업 앱; 언어; 주장; 후속 조치 |
references/02-research-and-strategy.md | 카테고리 연구, 전략 및 디자인 논제 작성, 페이지 골격 선택 |
references/03-design-direction.md | 보드, 컨셉, 움직임, 타이포그래피, 제작 법칙, AI 특징, 증명, 패널, 충실도 |
references/04-build-system.md | 코드 작성: 토큰, 페이지, 복사, 양식, 이미지, 모션, SEO, 접근성, 예산 |
references/05-working-apps.md | 사람들이 사용하는 모든 것: 데모 백엔드, 로그인, 지역, 흐름, 학습 앱 |
references/06-qa-and-repair.md | 검증, 판단, 수리, 비평, 종료 보고서 |
references/07-failure-catalogue.md | 시작하기 전과 보고하기 전: 이전에 잘못된 것과 해결 방법 |
references/08-role-briefs.md | 도우미 에이전트 지침 작성; 도구 이름 매핑 |
references/09-design-craft.md | 얼마나 강하게 밀어붙일지 선택(방문자 모드), 세계 구축, 색상 및 서체 수준, 규칙으로서의 특징, 개선 패스, 두 가지 평가, 점수 매기기 |
references/10-copy-and-voice.md | 앱의 모든 단어 작성 또는 검토: 사실에서 비롯된 음성, 슬롯 규칙, 생성된 산문 특징 |
references/11-listening-to-the-audience.md | 리서치 단계: 청중의 걱정과 단어를 듣지만 그들의 주장을 빌리지 않음 |
references/12-diagrams.md | 작동 방식, 프로세스, 흐름 또는 아키텍처 그림; 토큰에서 마크업으로 구축 |
references/13-reference-teardown.md | 리서치 중 제작 및 구조를 위해 최대 3개의 참조 앱 측정 |
references/14-scripts-and-app-jobs.md | 비라틴 스크립트용 글꼴; 각 종류의 앱에서 방문자가 수행하는 작업; 접근성 추가 사항 |
references/15-redesign-and-extension.md | 앱이 이미 존재하는 경우: 기록하고, 폴리쉬, 리스타일 또는 전체 중 선택하고, 손실된 것이 없음을 증명 |
references/NOTICE.md | 이 스킬이 학습한 공개 프로젝트의 크레딧 및 라이선스 |
assets/checklists/brief.md, done.md | 원장의 형태; 최종 확인 |