메뉴
HN
Hacker News • 13일 전

클로드 코드·코드엑스·그록 UI 템플릿 '브레인리스' 공개

IMP
4/10
핵심 요약

인기 있는 AI 코딩 에이전트인 Claude Code, OpenAI Codex, Grok의 터미널 인터페이스를 그대로 흉내 낸 Shadcn UI 컴포넌트 세트가 공개되었습니다. 이 템플릿을 활용하면 개발자들이 AI 에이전트가 코드를 작성하고 터미널 명령을 실행하는 듯한 매우 사실적인 랜딩 페이지나 데모를 손쉽게 구성할 수 있습니다.

번역된 본문

브레인리스: Claude Code, Codex, 그리고 Grok처럼 보이는 Shadcn 컴포넌트 에이전트 프롬프트 복사 ◆ @benswerd

freestyle Claude Code v2.1.206 다시 오신 것을 환영합니다 Ben! Fable 7 (xhigh 추론 노력도 사용 중) · Claude Max · ben@freestyle.sh의 조직 ~/acme-site

시작 팁: Claude에게 새 앱을 만들거나 저장소(repo)를 복제(clone)하라고 요청해 보세요. 새로운 기능: /cd에 디렉터리 경로 제안 기능 추가, 최적화를 제안하는 /doctor 검사 추가. 자세한 내용은 /release-notes를 확인하세요.

❯ 랜딩 페이지에 brainless 가격표 블록을 추가해 줘 ⏺ Bash ( bunx shadcn add brainless/pricing ) ⏺ ⎿ 1개 블록 추가됨 · 2개 파일 ⏺ 업데이트 ( app/page.tsx ) ⏺ ⎿ 3개의 추가 사항과 함께 app/page.tsx 업데이트됨 41 42 + 추가됨: 43

· 생각 중… ( 0초 · ↑ 0 토큰 · esc로 중단) ◉ xhigh · /effort ❯ ⏵⏵ 자동 모드 켜짐 (shift+tab으로 전환) · ← 에이전트 보기 >_

OpenAI Codex ( v0.132.0 ) 모델: gpt-6.9 low ( /model 로 변경) 디렉터리: ~/acme-site › 문서 사이트에 brainless 가격표 섹션을 추가해 줘 • app/(marketing)/page.tsx 읽는 중 • components/pricing.tsx 수정됨 (+22 −0) • pnpm build 실행 중 ( 0초 • esc로 중단) › gpt-6.9 low · ~/acme-site  main ~/acme-site 16K / 500K │ 2 / 3 ✓ 단계 완료

Grok Build Beta 0.2.93 Grok 4.21이 출시되었습니다! 이제 /model 선택기에서 사용할 수 있습니다. 새 워크트리 ctrl+w · 세션 재개 ctrl+s · 변경 이력 · 종료 ctrl+q 팁: Shift+Tab을 사용하여 계획(Plan) 모드 등 다양한 모드로 전환하세요.

❯ 마케팅 페이지에 brainless 가격표 블록을 넣어줘 4:38 PM ◆ user_prompt_submit [hooks: 3 / 1] ◆ 0.4초 동안 생각함 마케팅 페이지를 열어서 가격표 블록을 넣은 다음, 빌드를 확인하겠습니다. 4:38 PM app/(marketing)/page.tsx 읽기 ◆ 실행 Write components/pricing.tsx [hooks: 3] 41 이전: 41 이후: ◆ 중지 [hooks: 3 / 1] 9.2초 만에 턴 완료됨. ❯ Grok 4.21 (xhigh) · 항상 승인(always-approve)

원문 보기
원문 보기 (영어)
brainless Claude Code, Codex, and Grok interfaces as shadcn components. Copy agent prompt ◆ @benswerd · freestyle Claude Code v2.1.206 Welcome back Ben ! Fable 7 with xhigh effort · Claude Max ben@freestyle.sh&#x27;s Organization ~/acme-site Tips for getting started Ask Claude to create a new app or clone a repo What&#x27;s new Added directory path suggestions to /cd Added a /doctor check that proposes trims /release-notes for more ❯ add the brainless pricing block to our landing page ⏺ Bash ( bunx shadcn add brainless/pricing ) ⏺ ⎿ Added 1 block · 2 files ⏺ Update ( app/page.tsx ) ⏺ ⎿ Updated app/page.tsx with 3 additions 41 <Features /> 42 + added: <Pricing tiers={TIERS} /> 43 <Footer /> · Thinking … ( 0 s · ↑ 0 tokens · esc to interrupt) ◉ xhigh · /effort ❯ ⏵⏵ auto mode on (shift+tab to cycle) · ← for agents >_ OpenAI Codex ( v0.132.0 ) model: gpt-6.9 low /model to change directory: ~/acme-site › add the brainless pricing section to the docs site • Read app/(marketing)/page.tsx • Edited components/pricing.tsx (+22 −0) • Running pnpm build ( 0 s • esc to interrupt) › gpt-6.9 low · ~/acme-site  main ~/acme-site 16K / 500K │ 2 / 3 ✓ steps complete Grok Build Beta 0.2.93 Grok 4.21 is here! Grok 4.21 is now available. Try it out in the /model picker. New worktree ctrl+w Resume session ctrl+s Changelog Quit ctrl+q Tip: Use Shift+Tab to cycle between modes, like Plan mode. ❯ put the brainless pricing block on the marketing page 4:38 PM ◆ user_prompt_submit [hooks: 3 / 1 ] ◆ Thought for 0.4s I&#x27;ll open the marketing page, drop in the pricing block, then verify the build. 4:38 PM read app/(marketing)/page.tsx ◆ Run Write components/pricing.tsx [hooks: 3 ] 41 before: <Features /> 41 after: <Pricing tiers={TIERS} /> ◆ stop [hooks: 3 / 1 ] Turn completed in 9.2s . ❯ Grok 4.21 (xhigh) · always-approve
UI 컴포넌트 Shadcn UI AI 에이전트 개발자 도구 프론트엔드