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

event-landing.html · 1440pxschedule · day 1schedule · day 1

4인수인계 전 검토

1. 1

   OpenDesign 데스크톱 앱 다운로드

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

   OpenDesign 다운로드

   체크포인트

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

   Grok 연결 준비하기

   설치한 버전의 Grok 안내를 따르십시오. SuperGrok 계정 또는 xAI API 키(BYOK)로 인증합니다 — 자격 증명은 사용자의 컴퓨터에 보관됩니다.

   xAI 모델 문서

   # 1. Install Grok Build (Grok Build) on macOS/Linux
   curl -fsSL https://x.ai/cli/install.sh | bash
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   grok login   # opens your browser; sign in with SuperGrok / X Premium+
   #   or, for headless / CI use, set an xAI API key:
   #   export XAI_API_KEY=xai-...

   공개된 가이드의 Grok 설정 안내에서 발췌한 내용입니다. 최신 명령어는 공급업체 문서를 확인하십시오.

   체크포인트

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

   작은 Grok 작업 하나 실행하기

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

   시작 브리프 복사

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

   체크포인트

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

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

1. 1

   디자인 브리프

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

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

   New project · PromptGrok

   You

   Make the conference landing page from this poster: date and venue, schedule teaser, speakers, ticket CTA. Desktop and phone.

   Grok

   Plan first: hero, tracks, speakers, venue, sponsors. The poster’s red should become our accent, not a second colour. Proceed?
2. 2

   디자인 제약 조건

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

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

   DESIGN.md · OpenDesignbound

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

   인터페이스 생성

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

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

   Project files3 files

   • event-landing.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   미리보기

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

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

   Preview · 390pxComment mode

   Comment on · hero

   Date and city belong in the eyebrow, not in the headline.

   Comment on · tracks

   Two days as two blocks, workshops third.
5. 5

   수정 및 검증

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

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

   Verification · v23 of 4

   • ✓Date in the eyebrow
   • ✓Accent on the ticket button only
   • ✓No horizontal scroll at 390px
   • Schedule day switch — checked by you