clipboard
바이브코딩 프롬프트 복사판
해결하는 문제
강의에서 긴 프롬프트를 학습자에게 정확히 나눠 주고 싶다.
누르는 순간 프롬프트가 클립보드에 들어가 AI 채팅창에 바로 붙여 넣을 수 있습니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것프롬프트 카드
브라우저가 하는 일누르면 클립보드에 쓰기
나오는 것AI 채팅창에 붙여 넣기
쓰는 브라우저 기술
Clipboard API (writeText, readText)localStorage
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- navigator.clipboard.writeText
- readText 권한
- ClipboardItem: 이미지 복사
자주 막히는 곳
- HTTPS가 아니면 클립보드 쓰기가 막힐 수 있다
- 클립보드 읽기는 매번 권한을 묻는다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 내 업무에 맞는 프롬프트 카드를 AI가 생성
- 프롬프트 효과 비교
웹 서비스
- 강의 실습 명령어 배포판
- 쿠폰·코드 복사
피지컬 AI
- NFC 태그에 프롬프트 링크 심기
- 버튼 하나로 기기 설정값 복사
넓히는 방법
- 이미지·표 복사
- 팀이 함께 쓰는 카드 (서버 저장)
- 빈칸을 채우는 템플릿 프롬프트
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
누르면 바로 복사되는 바이브코딩 프롬프트 카드 모음 웹페이지를 만들어줘. 검색과 나만의 카드 저장도 넣어줘.
같은 분류의 능력
07 단일 HTML 앱에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md