OpenDesign에서
Gemini(으)로
디자인하기.

ops-dashboard.html · 1440px

4인수인계 전 검토

1. 1

   OpenDesign 데스크톱 앱 다운로드

   사용 중인 컴퓨터에 맞는 패키지를 선택하여 설치하고 앱을 여십시오.

   OpenDesign 다운로드

   체크포인트

   데스크톱 앱이 열립니다. 이미 설치되어 있습니까? 다음 단계로 이동하십시오. 다시 다운로드할 필요는 없습니다.
2. 2

   Gemini 연결 준비하기

   설치된 버전의 Gemini 안내를 따르십시오. Google 계정 또는 Gemini API 키(BYOK)로 인증합니다 — 자격 증명은 사용자의 기기에 남습니다.

   Gemini CLI 문서

   # 1. Install Gemini CLI (Node 20+)
   npm install -g @google/gemini-cli
   # or run without installing: npx https://github.com/google-gemini/gemini-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   gemini            # sign in with your Google account, or set GEMINI_API_KEY

   공개된 가이드의 Gemini 설정 안내를 기준으로 합니다. 현재 명령은 공급업체 문서를 확인하십시오.

   체크포인트

   의도한 에이전트와 계정을 확인합니다. 사용할 수 없는 경우, 더 큰 작업을 시도하기 전에 호환성을 확인합니다.
3. 3

   작은 Gemini 작업 하나 실행하기

   수정 한 번을 포함한 전체 루프를 판단할 수 있도록 작은 브리프를 사용하십시오.

   시작 브리프 복사

   프로필 폼과 저장 확인이 포함된 설정 화면을 만드십시오. 제 디자인 규칙을 사용하십시오. 데스크톱과 모바일 너비에서 확인하십시오.

   체크포인트

   결과를 열어 저장 상태를 테스트하고 구체적인 변경 사항 하나를 요청합니다. 생성된 파일은 검토의 끝이 아니라 시작입니다.

소스에서 OpenDesign을 실행하려면 대신 기술 퀵스타트를 따르십시오.

1. 1

   디자인 브리프

   평이한 언어로 세 줄에서 여섯 줄 사이로 작성합니다. 대상 사용자, 화면의 목적, 플랫폼을 명시하십시오.

   • 사용자브리프를 작성합니다. 참고할 스크린샷이 있다면 첨부하십시오.
   • Gemini브리프와 프로젝트의 지침 파일을 읽고, 모호한 부분이 있으면 질문합니다.
   • OpenDesign프로젝트, 프롬프트 표면, 그리고 해당 산출물 유형에 맞는 skill을 제공합니다.
   • 확인브리프에 수락 기준이 명시되어 있는지 확인하십시오. 지금 추가하는 것이 생성 이후보다 비용이 적게 듭니다.

   New project · PromptGemini

   You

   Turn this whiteboard photo into an operations dashboard: four numbers, weekly volume, incident queue. Desktop and phone.

   Gemini

   Understood. The sketch shows a fifth box labelled “SLA”. Keep it, or fold it into uptime?
2. 2

   디자인 제약 조건

   디자인 시스템과 몇 가지 확고한 규칙입니다. 이것이 브랜드에 맞는 결과물과 일반적인 결과물을 가르는 요소입니다.

   • 사용자디자인 시스템을 선택합니다. 브레이크포인트와 반드시 사용해야 하는 컴포넌트를 명시하십시오.
   • Gemini한 줄도 작성하기 전에 DESIGN.md의 토큰과 태도 규칙을 컨텍스트에 불러옵니다.
   • OpenDesign디자인 시스템 라이브러리를 제공하고, 선택된 시스템을 skill 템플릿에 연결합니다.
   • 확인토큰이 브랜드와 일치하는지 확인하십시오. 강조색 하나, 올바른 폰트, 올바른 라운드 처리인지 확인하십시오.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   인터페이스 생성

   Gemini는 레이아웃, 스타일, 인터랙션, 안정적인 훅을 포함한 독립형 HTML 파일을 작성합니다.

   • 사용자기다리거나 명확화 질문에 답합니다. 설정할 것은 없습니다.
   • Gemini섹션을 계획하고, HTML, CSS, JavaScript를 작성하고, 파일을 실행하며, 실패한 부분을 수정합니다.
   • OpenDesign산출물을 프로젝트 폴더에 저장하고 미리보기를 위해 색인화합니다.
   • 확인아직 확인할 것이 없습니다. 렌더링된 후에 파일을 평가하십시오, 소스 코드로는 판단하지 마십시오.

   Project files3 files

   • ops-dashboard.htmlnew
   • GEMINI.mdbound
   • DESIGN.mdread
4. 4

   미리보기

   파일은 요청한 너비로 OpenDesign 내부에 렌더링됩니다. 디자인은 바로 여기서 판단됩니다.

   • You너비를 전환하고, 인터랙션을 클릭해 보고, 요소에 댓글을 남깁니다.
   • Gemini미리보기에 대한 사용자의 의견을 읽고 다음 수정본을 준비합니다.
   • OpenDesign프리뷰를 렌더링하고, 댓글과 수정을 위한 data-od-id 대상을 노출합니다.
   • Check계층 구조, 대비, 390px에서의 오버플로, 포커스 상태, 그리고 강조색이 과하지 않게 사용되었는지 확인합니다.

   Preview · 390pxComment mode

   Comment on · kpis

   Uptime and open incidents first; deploys can go last.

   Comment on · queue

   Critical row needs the accent pill; the others stay neutral.
5. 5

   수정 및 검증

   프리뷰의 요소를 가리켜 변경을 요청합니다. 모든 수정본은 새 파일로 생성되며, 아무것도 조용히 덮어씌워지지 않습니다.

   • You댓글을 요청으로 전환하고, 작업이 완료되었는지 판단합니다.
   • Gemini변경 사항을 그 자리에 적용하고 파일을 다시 실행합니다.
   • OpenDesign버전을 나란히 보관하고, 완료되면 이미지나 HTML로 내보냅니다.
   • Check변경된 영역만 다시 확인한 뒤, 각 브레이크포인트에서 전체 페이지를 한 번씩 확인합니다.

   Verification · v23 of 4

   • ✓Two KPIs per row at 390px
   • ✓Accent on the critical pill only
   • ✓No horizontal scroll at 390px
   • Queue keyboard navigation — checked by you