[gemini-cli] mcp 활용 (이미지와 html 스니펫을 이용한 화면만들기)

설정된 코드 스니펫 mcp를 활용한 html 만들기

 

아래의 포스팅으로 mcp 개발 및 설정

[gemini - cli] mcp를 만들어 코드 스니펫 활용하기

 

1. 디자인 파일

 

위의 파일을 특정 폴더에 desing.png로 저장하고 그 폴더에서 gemini cli를 실행시킨다. 그리고 다음의 프롬프트를 요청한다.

2. 프롬프트

[Image design.png] 파일을 보고 html을 만든다.
   상단 우측의 둥근 + 버튼을 누르면 이름, 점수를 입력하는 다이얼로그가 나타난다.
     그리고 저장을 누르면
       호출한 화면의 리스트에 추가되어
       이름과 점수를 보여주며
       progress로 전체 순위를 보여준다.

       저장은 json 형태의 배열이 된다.
       그리고 다이알로그가 종료된다.

   리스트는 카드뷰 형식으로 이름, 점수, progress를 보여준다.
   하단의 검색을 입력하면 리스트가 필터링 되어매칭되는 정보만 보여준다.


   desgin은 search_snippets을 사용하여 app.html을 뼈대로 필요한 화면을 찾아서 처리한다.

3. 결과

 

index.html

0.01MB