코딩 · 개발

도타 2 정보 웹사이트 디자인

게임 데이터 시각화나 전적 검색용 웹사이트 디자인 및 UI/UX 구조를 기획할 때 활용하기 좋습니다.

추천 툴: 공통AI 분류
쓰인 기법: 역할 부여 · 제약 조건 설정 · 변수 활용

프롬프트 원문

Act as a Web Designer and Developer specializing in game-related content. Your task is to design and develop a website for Dota 2 that includes: 

- A comprehensive list of all Dota 2 heroes with their current win rates.
- Meta builds for each hero, detailing recommended items and skill builds.
- High-quality images for each hero, ensuring they are easily recognizable.

Visual Design Requirements:
- The homepage should feature a background with an image of Tinker launching rockets and prominently display the Dota 2 logo.
- Use a color scheme and typography that matches the Dota 2 aesthetic.

Rules:
- Ensure the website is responsive and accessible on both desktop and mobile devices.
- Optimize images and data for fast loading times.
- Implement intuitive navigation to enhance user experience.

Variables:
- ${heroName} - The name of the Dota 2 hero.
- ${winRate} - The current win rate of the hero.
- ${metaBuild} - The recommended build for the hero.

Your goal is to create a visually stunning and informative platform for Dota 2 enthusiasts.

한국어 풀이 보기(참고용)

게임 관련 콘텐츠 전문 웹 디자이너 및 개발자 역할을 맡아주세요. 당신의 작업은 다음 내용을 포함하는 도타 2(Dota 2) 웹사이트를 디자인하고 개발하는 것입니다:

- 모든 도타 2 영웅의 최신 승률이 포함된 포괄적인 목록.
- 추천 아이템 및 스킬 빌드를 상세히 설명하는 각 영웅의 메타 빌드.
- 쉽게 알아볼 수 있는 각 영웅의 고화질 이미지.

시각 디자인 요구사항:
- 홈페이지 배경에는 팅커(Tinker)가 로켓을 발사하는 이미지가 들어가야 하며, 도타 2 로고가 잘 보이게 표시되어야 합니다.
- 도타 2의 미학과 어울리는 색상 조합과 타이포그래피를 사용하세요.

규칙:
- 데스크톱과 모바일 기기 모두에서 웹사이트가 반응형이고 접근 가능하도록 하세요.
- 빠른 로딩 시간을 위해 이미지와 데이터를 최적화하세요.
- 사용자 경험을 향상시키기 위해 직관적인 내비게이션을 구현하세요.

변수:
- ${heroName} - 도타 2 영웅의 이름.
- ${winRate} - 영웅의 현재 승률.
- ${metaBuild} - 영웅의 추천 빌드.

당신의 목표는 도타 2 애호가들을 위한 시각적으로 뛰어나고 정보가 풍부한 플랫폼을 만드는 것입니다.

활용다른 게임명이나 캐릭터로 변수를 변경하여 다양한 게임 웹사이트 제작에 응용해보세요.
활용실제 개발 시에는 API 연동 방식 및 프레임워크(React 등) 조건을 추가 지정하세요.

출처 · prompts.chat · Dota 2 Hero Stats and Builds Website Design — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

실행 입력값 보기

Act as a Web Designer and Developer specializing in game-related content. Your task is to design and develop a website for mopick 도타 가이드 that includes: 

- A comprehensive list of all mopick 도타 가이드 heroes with their current win rates.
- Meta builds for each hero, detailing recommended items and skill builds.
- High-quality images for each hero, ensuring they are easily recognizable.

Visual Design Requirements:
- The homepage should feature a background with an image of mopick 팅커 launching rockets and prominently display the mopick DOTA logo.
- Use a color scheme and typography that matches the Dota 2 aesthetic.

Rules:
- Ensure the website is responsive and accessible on both desktop and mobile devices.
- Optimize images and data for fast loading times.
- Implement intuitive navigation to enhance user experience.

Variables:
- mopick 팅커 - The name of the Dota 2 hero.
- 53.8% - The current win rate of the hero.
- 미사일 & 메이더스 레이저 메타 빌드 (위저드 렌즈, 점멸 단검, 아가님의 마법봉) - The recommended build for the hero.

Your goal is to create a visually stunning and informative platform for Dota 2 enthusiasts.

도타 2 고유의 다크 판타지 분위기와 레드/골드 포인트 컬러를 적용하고, 배경 캔버스에 유도 미사일을 발사하는 mopick 팅커의 인터랙티브 모션 효과를 구현했습니다. 실시간 검색, 속성별 필터링, 그리고 클릭 시 즉시 팝업되는 영웅별 아이템 트리 및 스킬 빌드 분석 기능을 갖춘 반응형 단일 파일 웹 애플리케이션입니다.

개선안

원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.

원문 72점개선안 93점

Act as an expert Senior Web Designer and Developer specializing in gaming UI/UX. Your task is to design and provide the front-end code architecture (HTML5/CSS3/JS) for a Dota 2 statistics platform.

Required Features:
- Hero Directory: Searchable grid showing hero cards with data placeholders for [${heroName}], [${winRate}], and recommended [${metaBuild}] (items and skill trees).
- Hero Visuals: High-performance, optimized hero assets for immediate recognition.

Visual & UX Requirements:
- Hero Section: Dark-themed layout featuring a high-impact background of Tinker launching rockets, integrated with the official Dota 2 logo.
- Aesthetic: Use Dota 2's signature visual style (deep slate, gold accents, dark crimson) and gaming typography.
- Rules: Ensure mobile-first responsiveness, WCAG accessibility, optimized loading times, and intuitive navigation.

Deliverables:
1. Semantic HTML5 layout structure for main components.
2. Modern CSS (or Tailwind classes) matching the Dota 2 aesthetic.
3. Sample JS data object structure mapping [${heroName}], [${winRate}], and [${metaBuild}].
4. Brief self-evaluation against performance and responsiveness criteria.

구체적인 출력 형식(HTML/CSS/JS 코드 구조)을 명시함.
디자인 스타일과 사용자 경험 제약 조건을 명확화함.
데이터 구조 예시와 결과물 검토 단계를 추가함.

‹ 라이브러리로

Act as a Web Designer and Developer specializing in game-related content. Your task is to design and develop a website for Dota 2 that includes: - A comprehensive list of all Dota 2 heroes with their current win rates. - Meta builds for each hero, detailing recommended items and skill builds. - High-quality images for each hero, ensuring they are easily recognizable. Visual Design Requirements: - The homepage should feature a background with an image of Tinker launching rockets and prominently display the Dota 2 logo. - Use a color scheme and typography that matches the Dota 2 aesthetic. Rules: - Ensure the website is responsive and accessible on both desktop and mobile devices. - Optimize images and data for fast loading times. - Implement intuitive navigation to enhance user experience. Variables: - ${heroName} - The name of the Dota 2 hero. - ${winRate} - The current win rate of the hero. - ${metaBuild} - The recommended build for the hero. Your goal is to create a visually stunning and informative platform for Dota 2 enthusiasts.

게임 관련 콘텐츠 전문 웹 디자이너 및 개발자 역할을 맡아주세요. 당신의 작업은 다음 내용을 포함하는 도타 2(Dota 2) 웹사이트를 디자인하고 개발하는 것입니다: - 모든 도타 2 영웅의 최신 승률이 포함된 포괄적인 목록. - 추천 아이템 및 스킬 빌드를 상세히 설명하는 각 영웅의 메타 빌드. - 쉽게 알아볼 수 있는 각 영웅의 고화질 이미지. 시각 디자인 요구사항: - 홈페이지 배경에는 팅커(Tinker)가 로켓을 발사하는 이미지가 들어가야 하며, 도타 2 로고가 잘 보이게 표시되어야 합니다. - 도타 2의 미학과 어울리는 색상 조합과 타이포그래피를 사용하세요. 규칙: - 데스크톱과 모바일 기기 모두에서 웹사이트가 반응형이고 접근 가능하도록 하세요. - 빠른 로딩 시간을 위해 이미지와 데이터를 최적화하세요. - 사용자 경험을 향상시키기 위해 직관적인 내비게이션을 구현하세요. 변수: - ${heroName} - 도타 2 영웅의 이름. - ${winRate} - 영웅의 현재 승률. - ${metaBuild} - 영웅의 추천 빌드. 당신의 목표는 도타 2 애호가들을 위한 시각적으로 뛰어나고 정보가 풍부한 플랫폼을 만드는 것입니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

실행 입력값 보기

Act as a Web Designer and Developer specializing in game-related content. Your task is to design and develop a website for mopick 도타 가이드 that includes: 

- A comprehensive list of all mopick 도타 가이드 heroes with their current win rates.
- Meta builds for each hero, detailing recommended items and skill builds.
- High-quality images for each hero, ensuring they are easily recognizable.

Visual Design Requirements:
- The homepage should feature a background with an image of mopick 팅커 launching rockets and prominently display the mopick DOTA logo.
- Use a color scheme and typography that matches the Dota 2 aesthetic.

Rules:
- Ensure the website is responsive and accessible on both desktop and mobile devices.
- Optimize images and data for fast loading times.
- Implement intuitive navigation to enhance user experience.

Variables:
- mopick 팅커 - The name of the Dota 2 hero.
- 53.8% - The current win rate of the hero.
- 미사일 & 메이더스 레이저 메타 빌드 (위저드 렌즈, 점멸 단검, 아가님의 마법봉) - The recommended build for the hero.

Your goal is to create a visually stunning and informative platform for Dota 2 enthusiasts.

개선안

원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.

원문 72점개선안 93점

Act as an expert Senior Web Designer and Developer specializing in gaming UI/UX. Your task is to design and provide the front-end code architecture (HTML5/CSS3/JS) for a Dota 2 statistics platform.

Required Features:
- Hero Directory: Searchable grid showing hero cards with data placeholders for [${heroName}], [${winRate}], and recommended [${metaBuild}] (items and skill trees).
- Hero Visuals: High-performance, optimized hero assets for immediate recognition.

Visual & UX Requirements:
- Hero Section: Dark-themed layout featuring a high-impact background of Tinker launching rockets, integrated with the official Dota 2 logo.
- Aesthetic: Use Dota 2's signature visual style (deep slate, gold accents, dark crimson) and gaming typography.
- Rules: Ensure mobile-first responsiveness, WCAG accessibility, optimized loading times, and intuitive navigation.

Deliverables:
1. Semantic HTML5 layout structure for main components.
2. Modern CSS (or Tailwind classes) matching the Dota 2 aesthetic.
3. Sample JS data object structure mapping [${heroName}], [${winRate}], and [${metaBuild}].
4. Brief self-evaluation against performance and responsiveness criteria.

구체적인 출력 형식(HTML/CSS/JS 코드 구조)을 명시함.
디자인 스타일과 사용자 경험 제약 조건을 명확화함.
데이터 구조 예시와 결과물 검토 단계를 추가함.