# 251129 제2회 바이브코딩캠프- 오프라인 

1. aistudio에서 vibe code genAI 사용해서 프로토 만들기 

![Image](https://upload.cafenono.com/image/slashpageHome/20251128/212858_Ge5dpay91oATYBNPDO?q=80&s=1280x180&t=outside&f=webp)

- 무조건 ai를 사용하는 앱이 나옴

- 파일로 다운로드 받기 또는 github연결

추가. MobbinMobbin — UI & UX design inspiration for mobile & web apps

추가. [antigravity ](http://antigravity.google/)설치

cursor 대체제로 antigravity 추천

- 완전무료(아직까지는)

- walkthrough를 이용해서 작업 내용을 따라갈수 있음

- workflow를 이용해서 반복작업을 자동화/ 재현률 올릴수 있음

- chrome을 자동화해서 제어할수 있음

- 나노바나나를 불러와서 이미지 생성이 가능함

- 

단점

- extension이 빈약함

- 가끔 에러 발생

- 적은 사용량(자주 리밋에 걸림)

- 램을 많이 먹음 agent manager, code editor 두개를 띄우다 보니

1. claudecode 설치

`npm install -g @anthropic-ai/claude-code` 

- [node.js](https://nodejs.org/ko/download)가 필요합니다

- [cursor](http://cursor.com/), [antigravity](http://antigravity.google/), [git](https://git-scm.com/install/) 미리 설치

- claudecode allow 자동으로 시키는 방법(bypass모드)

`claude —dangerously-skip-permissons` 

1. git clone, claudecode 설치, mcp 설치 

chrome mcp: 

`claude mcp add chrome-devtools npx chrome-devtools-mcp@latest`` ` 

firebase mcp: 

`claude mcp add firebase npx -- -y firebase-tools@latest mcp` 

또는

```
MCP 설치해줘 [주소]
```

또는

```
//.mcp.json
//chrome-mcp, firebase-mcp를 사용합니다
//미리 firebase 계정 생성이 필요합니다(기능에 따라 결제수단 등록도 필요)
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    },
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}
```

mcp를 전역(어떤 프로젝트에서나 사용하도록)으로 설치하는 방법

- claude mcp add —scope user 해당 mcp

- chrome mcp: 

    - `claude mcp add -scope user chrome-devtools npx chrome-devtools-mcp@latest` 

- firebase mcp: 

    - `claude mcp add —scope user firebase npx -- -y firebase-tools@latest mcp` 

1. claudecode에게 다음과 같이 요청하기

```
//프롬프트 

firebase mcp를 사용해서 todolist 앱을 만들어주세요 [소스코드]

```

- firebase mcp로 작업이후 부족한 부분을 보충하세요(auth, db rules, index 등등)

- chrome mcp를 이용해서 테스트- 오류 수정 (디버깅)을 요청하세요

```
chrome mcp를 사용해서 테스트하고 오류가 나면 콘솔 메세지를 보고 수정 반복해줘
```

1. github에 올리기

- cursor/antigravity의 git 기능을 이용해 github에 repository(저장소) 를 만들고 코드를 올려주세요

1. netlify에서 배포하기

- github에 올려놓은 코드를 [netlify](https://app.netlify.com/)에서 불러와서 배포합니다

- 환경변수를 설정합니다

    - serverless function으로 하는 방법 (llm api키가 있는 경우)

`인증을 서버리스 펑션에서 해야할것 같아. 기능 만들어줘` 

    - 스캔을 끄는 방법(netlify.toml) - firebase 키만 있는 경우 

`netlify에 올릴거야. .env파일 키 감지 제외하도록 netlify.toml 파일 만들어줘` 

Tip. github-netlify 배포가 너무 어려워요. 더 쉬운 방법이 있나요?

- firebase mcp를 쓰면 hosting이 가능합니다(단 코드를 수정하기가.. 조금 불편해요)

`firebase cli로 tools deploy를 이용해서 firebase에 배포해줘``  ` 

![Image](https://upload.cafenono.com/image/slashpageHome/20251025/072848_Ih28AUxbNx1gCpfVTp?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20251025/072832_BRpmjUAj2EnLwrBksw?q=80&s=1280x180&t=outside&f=webp)

# 배포 성공하신분들 여기에 링크 올려주세요

[https://slashpage.com/conanssam/d367nxm38xx3x2j98pv1](https://slashpage.com/conanssam/d367nxm38xx3x2j98pv1)

---

## skill 편

- https://github.com/anthropics/skills 

    - `/plugin marketplace add anthropics/skills``  ` 

- [https://github.com/yusufkaraaslan/Skill_Seekers](https://github.com/yusufkaraaslan/Skill_Seekers)

    - `pip install skill-seekers` 

    - 기존 mcp, docs 등을 skill로 변환해주는 도구

skill 여러개를 조합할수 있음

- https://github.com/jkf87/doc-research-generator 

    - 조사→ 보고서 → 도표 생성 → ms docs 문서로 생성

    - workflow(antigravity): [https://github.com/jkf87/antigravity-workflow-ppt](https://github.com/jkf87/antigravity-workflow-ppt)

        - PPT 생성

For the site tree, see the [root Markdown](https://slashpage.com/conanssam.md).