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

product-page.html · 1440px

4인수인계 전 검토

1. 1

   OpenDesign 데스크톱 앱 다운로드

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

   OpenDesign 다운로드

   체크포인트

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

   Kilo 연결 준비하기

   설치된 버전에서 Kilo 안내를 따르십시오. 자신의 provider key(BYOK) 또는 Kilo의 게이트웨이로 인증합니다 — 자격 증명은 사용자의 머신에 남습니다.

   Kilo Code 문서

   # 1. Install the Kilo Code extension from the VS Code
   #    (or JetBrains) marketplace, or install the CLI.
   
   # 2. Open your project and sign in / add a provider key
   cd your-project
   kilo              # connect your provider (BYOK) or Kilo's gateway

   게시된 가이드의 Kilo 설정 노트를 참고했습니다. 현재 명령어는 벤더 문서를 확인하십시오.

   체크포인트

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

   작은 Kilo 작업 하나 실행하기

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

   시작 브리프 복사

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

   체크포인트

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

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

1. 1

   디자인 브리프

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

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

   New project · PromptKilo

   You

   Build the product page from this screenshot: gallery, price, options, add to bag, related. Desktop and phone.

   Kilo

   Understood. The screenshot shows a sticky add-to-bag bar on scroll. Include it, or keep the button in the info column?
2. 2

   디자인 제약 조건

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

   • 사용자디자인 시스템을 선택합니다. 브레이크포인트와 반드시 사용해야 하는 컴포넌트를 명시하십시오.
   • Kilo한 줄이라도 작성하기 전에 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

   인터페이스 생성

   Kilo는 레이아웃, 스타일, 인터랙션, 안정적인 훅을 포함한 자체 완결형 HTML 파일을 작성합니다.

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

   Project files3 files

   • product-page.htmlnew
   • .kilocode/rulesbound
   • DESIGN.mdread
4. 4

   미리보기

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

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

   Preview · 390pxComment mode

   Comment on · options

   Selected chip in black, not in green; the accent is for the button.

   Comment on · related

   Horizontal scroll on the phone with a visible partial card.
5. 5

   수정 및 검증

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

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

   Verification · v23 of 4

   • ✓Accent on add-to-bag only
   • ✓Related scrolls at 390px
   • ✓No horizontal scroll at 390px
   • Option selection states — checked by you