웹 기반의 다기능 색상 추출 및 팔레트 생성 도구를 프론트엔드로 구현할 때 사용합니다.
Build a professional-grade color tool with HTML5, CSS3 and JavaScript for designers and developers. Create an intuitive interface with multiple selection methods including eyedropper, color wheel, sliders, and input fields. Implement real-time conversion between color formats (RGB, RGBA, HSL, HSLA, HEX, CMYK) with copy functionality. Add a color palette generator with options for complementary, analogous, triadic, tetradic, and monochromatic schemes. Include a favorites system with named collections and export options. Implement color harmony rules visualization with interactive adjustment. Create a gradient generator supporting linear, radial, and conic gradients with multiple color stops. Add an accessibility checker for WCAG compliance with contrast ratios and colorblindness simulation. Implement one-click copy for CSS, SCSS, and SVG code snippets. Include a color naming algorithm to suggest names for selected colors. Support exporting palettes to various formats (Adobe ASE, JSON, CSS variables, SCSS).
디자이너와 개발자를 위한 전문가급 컬러 도구를 HTML5, CSS3, JavaScript로 구축하세요. 스포이트, 컬러 휠, 슬라이더, 입력 필드를 포함한 여러 선택 방식을 제공하는 직관적인 인터페이스를 만드세요. 복사 기능이 포함된 색상 형식(RGB, RGBA, HSL, HSLA, HEX, CMYK) 간 실시간 변환을 구현하세요. 보색, 유사색, 삼각, 사각, 단색 스키마 옵션이 있는 색상 팔레트 생성기를 추가하세요. 이름이 지정된 컬렉션 및 내보내기 옵션이 포함된 즐겨찾기 시스템을 포함하세요. 인터랙티브한 조절이 가능한 색상 조화 규칙 시각화를 구현하세요. 다중 컬러 스톱을 지원하는 선형, 방사형, 원형 그라데이션 생성기를 만드세요. 명암비와 색맹 시뮬레이션을 통해 WCAG 준수 여부를 확인하는 접근성 검사기를 추가하세요. CSS, SCSS, SVG 코드 스니펫을 원클릭으로 복사하는 기능을 구현하세요. 선택한 색상의 이름을 제안하는 색상 명명 알고리즘을 포함하세요. 팔레트를 다양한 형식(Adobe ASE, JSON, CSS 변수, SCSS)으로 내보내는 기능을 지원하세요.
출처 · prompts.chat · Advanced Color Picker Tool — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
디자이너와 개발자를 위해 색상 추출, 실시간 포맷 변환, 색상 조화 팔레트 생성, 그라디언트 제작, WCAG 접근성 검사 및 색맹 시뮬레이션을 제공하는 올인원 웹 컬러 스튜디오 'TPI 컬러 스튜디오'를 제작했습니다. 외부 라이브러리 없이 순수 HTML5, CSS3, JavaScript 및 SVG 필터로 구현되었으며 반응형 레이아웃과 1클릭 코드 복사 및 다양한 내보내기 기능을 지원합니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Build a professional-grade color tool with HTML5, CSS3 and JavaScript for designers and developers. Create an intuitive interface with multiple selection methods including eyedropper, color wheel, sliders, and input fields. Implement real-time conversion between color formats (RGB, RGBA, HSL, HSLA, HEX, CMYK) with copy functionality. Add a color palette generator with options for complementary, analogous, triadic, tetradic, and monochromatic schemes. Include a favorites system with named collections and export options. Implement color harmony rules visualization with interactive adjustment. Create a gradient generator supporting linear, radial, and conic gradients with multiple color stops. Add an accessibility checker for WCAG compliance with contrast ratios and colorblindness simulation. Implement one-click copy for CSS, SCSS, and SVG code snippets. Include a color naming algorithm to suggest names for selected colors. Support exporting palettes to various formats (Adobe ASE, JSON, CSS variables, SCSS).
디자이너와 개발자를 위해 색상 추출, 실시간 포맷 변환, 색상 조화 팔레트 생성, 그라디언트 제작, WCAG 접근성 검사 및 색맹 시뮬레이션을 제공하는 올인원 웹 컬러 스튜디오 'mopick 컬러 스튜디오'를 제작했습니다. 외부 라이브러리 없이 순수 HTML5, CSS3, JavaScript 및 SVG 필터로 구현되었으며 반응형 레이아웃과 1클릭 코드 복사 및 다양한 내보내기 기능을 지원합니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Senior Frontend Developer. Create a professional single-page web app using HTML5,
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 2개[or framework: e.g., React] · [HTML/CSS/JS]
작업 순서레슨 07 배우기 ›
원문 · 없음작업 순서가 정해져 있지 않아 AI 가 순서를 스스로 정해야 했습니다.
개선 · 5단계
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
원문
Build a professional-grade color tool with HTML5, CSS3 and JavaScript for designers and developers. Create an intuitive interface with multiple selection methods including eyedropper, color wheel, sliders, and input fields. Implement real-time conversion between color formats (RGB, RGBA, HSL, HSLA, HEX, CMYK) with copy functionality. Add a color palette generator with options for complementary, analogous, triadic, tetradic, and monochromatic schemes. Include a favorites system with named collections and export options. Implement color harmony rules visualization with interactive adjustment. Create a gradient generator supporting linear, radial, and conic gradients with multiple color stops. Add an accessibility checker for WCAG compliance with contrast ratios and colorblindness simulation. Implement one-click copy for CSS, SCSS, and SVG code snippets. Include a color naming algorithm to suggest names for selected colors. Support exporting palettes to various formats (Adobe ASE, JSON, CSS variables, SCSS).
개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as a Senior Frontend Developer. Create a professional single-page web app using HTML5, CSS3, and JavaScript [or framework: e.g., React]. Key Feature Modules: 1. Color Engine & Selection: Real-time conversion (RGB, RGBA, HSL, HSLA, HEX, CMYK), color naming algorithm, eyedropper, interactive color wheel, sliders, and input fields. 2. Palette & Harmony: Generators for complementary, analogous, triadic, tetradic, and monochromatic schemes with visual harmony adjustments. 3. Gradient Studio: Linear, radial, and conic gradient generator with dynamic multi-stop control. 4. Accessibility Suite: WCAG contrast checker and real-time colorblindness simulation filters. 5. Storage & Export: Named favorites collection, 1-click code snippet copy (CSS, SCSS, SVG), and export to ASE, JSON, CSS variables, and SCSS. Deliverable Instructions: - Provide well-commented, modular code with zero external dependencies. - Output the code clearly divided into [HTML/CSS/JS] sections.