웹 프론트엔드 기반의 완성도 높은 뽀모도로 타이머 웹 앱을 한 번에 구현할 때 사용합니다.
Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default ${Work Intervals:25min}), short breaks (default ${Short Breaks:5min}), and long breaks (default ${Long Breaks:15min}). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.시간 관리 기법을 따르는 포괄적인 뽀모도로 타이머 앱을 HTML5, CSS3, JavaScript를 사용하여 제작해 주세요. 현재 세션을 시각적으로 표현하는 크고 애니메이션이 적용된 원형 진행 표시줄이 있는 우아한 인터페이스를 설계해 주세요. 작업 간격(기본값 ${Work Intervals:25min}), 짧은 휴식(기본값 ${Short Breaks:5min}), 긴 휴식(기본값 ${Long Breaks:15min})을 사용자 지정할 수 있도록 합니다. 사용자가 특정 작업과 뽀모도로 세션을 연동할 수 있는 할 일 목록 통합 기능을 포함하세요. 볼륨 조절이 가능한 전환 구간용 알림 소리 설정 기능을 추가하세요. 시각적 차트로 일간/주간 생산성을 추적하는 상세 통계를 구현하세요. 세션 간 설정과 기록을 유지하기 위해 localStorage를 사용하세요. 오프라인 지원 및 알림 기능을 갖춘 설치 가능한 PWA로 앱을 만드세요. 빠른 타이머 제어(시작/일시정지/리셋)를 위한 키보드 단축키를 추가하세요. 맞춤형 색상과 폰트가 포함된 다양한 테마 옵션을 포함하세요. 작업 간격 동안 방해 요소를 차단하는 집중 모드를 추가하세요.출처 · prompts.chat · Pomodoro Timer — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
시간 관리 기법을 구현한 포모도로 타이머 애플리케이션 'TPI 타이머'입니다. 모바일(390px)부터 데스크톱 화면까지 글자 잘림과 가로 넘침이 없도록 설계하였으며, 할 일 연동·주간 생산성 차트·포커스 모드 및 사운드 알림 기능을 완전히 작동하는 한 파일로 구성했습니다.
Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default 25min), short breaks (default 5min), and long breaks (default 15min). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default 25min), short breaks (default 5min), and long breaks (default 15min). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.
시간 관리 기법을 구현한 포모도로 타이머 애플리케이션 'mopick 타이머'입니다. 모바일(390px)부터 데스크톱 화면까지 글자 잘림과 가로 넘침이 없도록 설계하였으며, 할 일 연동·주간 생산성 차트·포커스 모드 및 사운드 알림 기능을 완전히 작동하는 한 파일로 구성했습니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함You are an expert Senior Frontend Developer. Build a fully functional, production-ready Po
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 3개[WORK_INTERVAL: 25] · [SHORT_BREAK: 5] · [LONG_BREAK: 15]
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 3단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
01역할 정하기04지킬 조건 걸기05입력 칸으로 템플릿 만들기07작업을 단계로 나누기08스스로 검토하게 하기09구역을 나눠 쓰기
원문
Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default ${Work Intervals:25min}), short breaks (default ${Short Breaks:5min}), and long breaks (default ${Long Breaks:15min}). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
You are an expert Senior Frontend Developer. Build a fully functional, production-ready Pomodoro Timer Web App using clean HTML5, CSS3, and modern JavaScript (ES6+). ### Key Requirements: - **Timer & Visuals:** Interface with a large, animated circular progress SVG representing the session. Support configurable work ([WORK_INTERVAL: 25] min), short break ([SHORT_BREAK: 5] min), and long break ([LONG_BREAK: 15] min) intervals. - **Task & Stats:** Task list integration linked to sessions. Visual chart tracking daily/weekly productivity, persisting data and settings in `localStorage`. - **PWA & Media:** Service worker for PWA offline support, native web notifications, configurable transition sounds with volume control. - **UX & Control:** Multiple color/font themes, focus mode to hide UI distractions during work, and keyboard shortcuts (Space: start/pause, R: reset). ### Output Constraints: 1. Deliver self-contained, fully working code with complete HTML, CSS, and JS blocks without missing logic. 2. Handle edge cases (e.g., background tab timer drift, browser notification permissions). 3. Verify all code for syntax errors and responsiveness before returning the final result.