Claude HTML 디자인 기술은 모든 페이지 요청에 첨부하는 재사용 가능한 규칙 블록이므로 출력이 세대 간에 달라지는 것을 방지합니다.
적어 두는 이유는 깔끔함 때문이 아니다. 생성된 페이지는 고정된 것이 없기 때문에 드리프트되며 모든 드리프트에는 수정 라운드가 필요합니다.
Claude HTML 디자인 기술이 실제로 변화하는 것
| 지시사항 | 효과 |
|---|---|
| "깔끔하고 모던하게 만들어주세요" | 없음, 모델이 매번 새로 선택함 |
| "액센트 컬러 #1F6FEB, 액센트 1개만" | 페이지가 마지막 페이지와 일치합니다. |
| "콘텐츠 열 최대 720px" | 선 길이가 다양해지지 않습니다. |
| "기본 글꼴 16px, 제목 1.5 및 2배" | 유형 스케일이 반복됩니다. |
| "그라디언트 없음, 그림자 없음, 둥근 카드 없음" | 한 줄의 기본 장식을 제거합니다. |
| "테이블: 헤더 행 음영 처리, 얇은 행 규칙, 수직선 없음" | 테이블은 여러 페이지에서 일치합니다. |
패턴은 값은 제한하고 형용사는 제한하지 않는다는 것입니다. 형용사로 구성된 규칙 파일은 잘 읽히고 아무것도 변경하지 않습니다.
쓸만한 규칙
6개 영역이 거의 모든 것을 다룹니다.
- 색상. 배경, 텍스트, 악센트 1개, 보조 텍스트의 음소거 톤. 페이지가 밝은지 어두운지 명시하세요. 결정에 따라 페이지 아래의 모든 내용이 변경되기 때문입니다.
- 유형. 기본 크기, 제목 배율, 글꼴 스택 및 네트워크 글꼴 허용 여부. 페이지를 이미지로 내보낼 경우 시스템 글꼴 스택은 예상치 못한 대체를 방지합니다.
- 간격. 4, 8, 16, 32픽셀과 같은 작은 고정 단계 집합입니다. 이것이 없으면 생성된 페이지는 임의의 값을 사용하고 전혀 관련되어 보이지 않습니다.
- 레이아웃. 최대 콘텐츠 너비, 휴대폰에서의 열 동작 및 풀 블리드 섹션 허용 여부.
- 구성요소. 테이블, 코드 블록, 콜아웃 및 캡션의 모양입니다. 테이블은 많은 비즈니스 페이지에 나타나기 때문에 가장 높은 가치를 지닌 항목입니다.
- 모션. 애니메이션을 적용할 수 있는 속성의 기간 제한과 모션 요구 사항이 줄어듭니다. Claude HTML 애니메이션에서 자세한 내용을 다룹니다.
페이지 쉘도 명시하십시오.
파일 자체가 잘못된 모양이면 디자인 규칙이 낭비됩니다.
Output a complete single file HTML document.
Doctype, <html lang="en">, a <title>, and the viewport meta tag.
All CSS in one <style> tag in the head. No external files, no CDN links.
Images embedded or on absolute URLs. No local file paths.
Reply with the file only, no prose around it.
뷰포트 라인은 보이는 것보다 더 중요합니다. 그것이 없으면 페이지는 휴대폰에서 읽기 어렵고 많은 사람들이 휴대폰에서 페이지를 검토합니다. 뷰포트 메타 태그는 브라우저에 장치 너비를 사용하도록 지시하는 것입니다.
외부 파일에 대한 규칙은 페이지가 이동되어도 유지되도록 만드는 것입니다. 옆에 있는 스타일시트에 도달하는 페이지는 다른 곳에 스타일이 지정되지 않은 채 도착합니다. 이는 보기 좋은 페이지가 다른 사람의 화면에서 일반 텍스트로 바뀌는 가장 일반적인 방법입니다.
설명하는 금지 비트
하지 말아야 할 일에 대한 짧은 목록은 기본값을 직접적으로 목표로 하기 때문에 긴 선호 목록보다 더 많은 변형을 제거합니다.
- 그라데이션 배경이 없습니다.
- 카드에는 그림자가 없습니다.
- 하나의 강조 색상을 초과할 수 없습니다.
- 제목에 이모티콘이 없습니다.
- 상태 변경이 아닌 항목에는 애니메이션이 없습니다.
- 샘플 회사 이름과 같은 자리 표시자 텍스트가 없습니다.
마지막 것은 영구적으로 보관할 가치가 있습니다. 전송된 페이지에 남아 있는 자리 표시자 콘텐츠는 이 전체 작업 흐름에서 가장 당혹스러운 실패입니다.
승인된 페이지에서 시작하기
텍스트에 설명된 규칙은 추론됩니다. 페이지가 보입니다.
만족스러운 페이지가 있으면 그대로 유지하고 동일한 구조, 동일한 스타일, 동일한 테이블 처리로 새 콘텐츠를 요청하세요. 이는 일반적으로 규칙 파일만 단독으로 사용하는 것보다 더 안정적이며 두 파일을 잘 결합합니다.
AI HTML 템플릿 재사용에서는 수정해야 할 사항과 매번 다시 생성해야 할 사항을 다룹니다. AI HTML 브랜드 색상은 특정 값을 가져오고 유지하는 방법을 다룹니다.
소스가 아닌 렌더링된 페이지를 검토하세요.
디자인 규칙은 유지되거나 유지되지 않으며 코드에서는 알 수 없습니다.
파일을 HTML 뷰어 또는 NOS 문서에 붙여넣습니다. 작성된 어두운 테마, 차트 및 스크립트가 포함된 그대로 정확하게 렌더링되며 실제 결과를 볼 수 있습니다.
네 가지 사항을 확인하세요. 하나 이상의 강조 색상, 반복되거나 표류하는 간격 값, 템플릿과 일치하는 표 스타일, 휴대폰 너비에 따른 페이지입니다.
이 단계의 수정에는 새로운 세대가 거의 필요하지 않습니다. 문서의 텍스트를 클릭하고 그 위에 입력하면 단어와 숫자가 처리됩니다. 이는 코드 없이 AI 생성 HTML 편집에서 설명하는 것입니다.
사람들이 찾을 수 있는 승인된 페이지 유지
채팅 기록에 남아 있는 템플릿은 누구도 재사용하지 않는 템플릿입니다.
승인된 페이지를 NOS 문서에 붙여넣고 공유, 링크 공유, 공유 링크 생성을 통해 주소를 제공합니다.
링크는 기본적으로 비공개이며 페이지가 업데이트되어도 주소는 변경되지 않으므로 규칙 변경 사항은 해당 링크를 사용하는 모든 사람에게 적용됩니다.
이는 디자인 규칙을 각 사람이 다시 입력하는 것이 아니라 팀이 공유하는 것으로 바꿉니다. 검색에서 페이지를 찾을 수 있어야 하는 경우에만 웹에 공개를 선택하세요. HTML을 링크로 변환은 그 단계뿐입니다.
작동하는 가장 짧은 버전. 아무것도 쓰지 않는 경우 다음과 같이 작성하세요. 값이 포함된 강조 색상 1개, 최대 콘텐츠 너비, 기본 글꼴 크기, 4단계 간격 배율, 그라데이션이나 그림자 없음, 뷰포트 태그가 있는 완전한 단일 파일 출력.
이는 6줄에 들어가며 생성된 페이지와 다음 페이지 사이의 변형을 대부분 제거합니다.