AI로 HTML 섹션 템플릿 만들기

AI로 HTML 섹션 템플릿 만들기

ChatGPT나 다른 AI를 통해 bluetronix CMS를 위한 새로운 HTML 섹션 템플릿을 만들고, 기존 템플릿을 수정하며, 웹사이트에 대한 추가 레이아웃 변형을 개발할 수 있습니다. 요구사항은 자신만의 프롬프트로 개별적으로 작성할 수 있습니다.

생성된 파일이 bluetronix CMS의 기술 규칙을 준수하는 것이 중요합니다. 여기에는 섹션 파일의 구조, 여러 템플릿 간의 구분 마커, 개별 파일의 표시를 위한 _own 및 필수 CMS 텍스트 마킹이 포함됩니다.

고유 요구사항 정리하기

프롬프트에서 어떤 종류의 페이지 섹션을 만들고 싶은지, 몇 개의 레이아웃 변형이 필요한지, 어떤 디자인을 원하는지 설명하세요. 기존 섹션 파일을 기본으로 사용하거나 새로운 레이아웃을 설명할 수 있습니다.

기술적 요구사항에 대해서는 추가로 우리의 예시 프롬프트를 참조할 수 있습니다. 이는 부트스트랩, WOW 애니메이션, 반응형 레이아웃, CMS 이미지 자르기 및 번역 마킹 등 호환 가능한 HTML 섹션 템플릿에 대한 요구사항을 문서화합니다. 이 요구사항을 자신의 프롬프트에 직접 포함할 수 있습니다.

다음 프롬프트는 새로운 블로그 요약 섹션을 위한 가능한 접근 방법을 보여줍니다. 이는 완전하게 작성된 예시이며, 자신의 프로젝트에 맞게 조정할 수 있습니다.

새로운 블로그 섹션을 위한 예시 프롬프트

프롬프트를 가져오거나, 특정 요구 사항을 변경하거나, 자신만의 완전히 새로운 프롬프트를 만들 수 있습니다.

EXAMPLE PROMPT FOR CREATING A NEW bluetronix CMS LAYOUT SECTION
======================================================================

Please create a new custom layout section file for the bluetronix CMS.

Use the attached file:

AI_Prompt_de.txt

as the complete and mandatory technical documentation for all requirements.

Additionally, use the attached existing file:

SectionBlog.txt

as the basis for the current structure and existing section variants.

Task:

Create a new file named:

SectionBlog_own.txt

The file should contain several modern and visually distinct blog overview sections for the bluetronix CMS.

Important:

- All requirements from AI_Prompt_de.txt must be fully followed.
- Use only standard Bootstrap classes.
- Remove any Bootstrap Studio-specific classes.
- Use Bootstrap Icons exclusively.
- All sections must be responsive and work correctly in both Bootstrap Light Mode and Dark Mode.
- Use WOW animations according to the documentation.
- Use only the image URLs approved in AI_Prompt_de.txt and the CMS image cropping syntax documented there.
- Use the required  separators.
- Mark all visible text with ­.
- Use universal English example texts.
- Reuse suitable example texts instead of creating unnecessarily many different text variations.
- Text length must match the respective layout.
- Always use href="#" for links unless another URL is specified in the documentation.
- Use colAll for suitable repeatable columns.
- Ensure visually consistent spacing, column gaps, and border radii.
- Do not split HTML tags across multiple lines.
- Indent HTML using exactly 3 spaces per level.
- Do not create blog detail pages. Create only blog sections for index or overview pages.
- Do not modify technical CMS markers or required CMS structures.
- Validate the completed HTML against the checklist in AI_Prompt_de.txt.

Additionally, create the following file:

_LangTexts.txt

This file must contain every visible text used in SectionBlog_own.txt.

Requirements:

- One text per line.
- Without the ­ markers.

Output:

1. SectionBlog_own.txt
2. _LangTexts.txt

Do not display the code only in the chat. Generate both files as downloadable files.

After creation, the SectionBlog_own.txt file will be uploaded via the bluetronix CMS "Datei - Manager" to the following directory:

/bx_Layout/

예시 프롬프트 수정하기

다른 섹션 유형의 경우 파일 이름과 원하는 디자인을 변경할 수 있습니다. 새로운 블로그 요약 대신 팀, 배너, 바닥글 또는 다른 HTML 섹션 템플릿을 생성할 수 있습니다. 자신만의 프롬프트를 작성할 때는 꼭 각 섹션 카테고리의 필수 CMS 규칙 및 특별 요구사항을 고려해야 합니다.

자신의 섹션 파일은 _own 추가를 통해 저장되며, 이후 bluetronix CMS 파일 관리자를 통해 /bx_Layout/ 디렉토리에 업로드됩니다. 이렇게 하면 개인 템플릿이 표준 파일과 분리됩니다.

EXAMPLE FOR USING A DIFFERENT SECTION
==========================================

For a different section type, only the filenames need to be replaced.

For example:

SectionBlog.txt
SectionBlog_own.txt

Replace with:

SectionTeam.txt
SectionTeam_own.txt

or:

SectionFooter.txt
SectionFooter_own.txt

All requirements from AI_Prompt_de.txt remain unchanged.