X의 Thariq: "Claude Code로 플레이그라운드 만들기" / X

Claude가 HTML 플레이그라운드를 생성하도록 돕는 새로운 Claude Code 플러그인 playground를 공개했습니다. 이 플레이그라운드는 독립 실행형 HTML 파일로, Claude와 함께 문제를 시각화하고 상호작용하며, 결과로 Claude Code에 다시 붙여넣을 출력 프롬프트를 제공해 줍니다.

텍스트만으로는 잘 맞지 않는 방식으로 모델과 상호작용할 때 특히 유용하다고 느꼈습니다. 예를 들면 다음과 같습니다.

• 코드베이스의 아키텍처를 시각화하기
• 컴포넌트 디자인 조정하기
• 레이아웃 및 디자인 브레인스토밍하기
• 게임 밸런스 미세 조정하기

시작하려면, Claude Code에서 아래 명령을 실행해 플러그인을 설치하세요:

/plugin marketplace update claude-plugins-official
/plugin install playground@claude-plugins-official

제가 만들었던 좋아하는 플레이그라운드 몇 가지를 소개합니다.

Claude Code의 AskUserQuestion 도구 디자인 바꾸기

프롬프트:

"playground 스킬을 사용해 AskUserQuestion 도구의 새로운 레이아웃 변경을 탐색할 수 있도록 도와주는 플레이그라운드를 만들어줘"

글을 비평하고, 응답 프롬프트 받기

프롬프트:

"playground 스킬을 사용해 내

를 리뷰하고, 내가 승인/거절/코멘트할 수 있는 인라인 제안을 제공해줘"

Remotion 비디오 인트로 다듬기

프롬프트:

"playground 스킬을 사용해 내 인트로 화면을 더 흥미롭고 즐겁게 느껴지도록 다듬어줘"

아키텍처 다이어그램 보기 + 사용자 코멘트 달기

프롬프트:

"playground 스킬을 사용해 이 이메일 에이전트 코드베이스가 어떻게 동작하는지 보여주고, 아키텍처의 특정 노드에 내가 코멘트를 달아 질문하거나 수정 제안을 하는 등 작업을 할 수 있게 해줘"

제작 중인 슈퍼히어로 로그라이크 게임 밸런싱

프롬프트:

"playground 스킬을 사용해 'Inferno' 영웅의 덱 밸런스를 맞추는 걸 도와줘"

여러분이 이걸로 어떤 것들을 탐색해볼지 기대됩니다! 흥미로운 플레이그라운드를 만들기 위한 제 팁은, 모델과 상호작용할 수 있는 독특한 방식을 떠올린 뒤, 그걸 모델이 표현하도록 요청해 보라는 것입니다. 아마 놀랄 만한 결과를 얻을 수도 있어요. 멋진 걸 만들면 꼭 공유해 주세요!