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

notification-preferences.html · 1440px

4인수인계 전 검토

1. 1

   OpenDesign 데스크톱 앱 다운로드

   당신의 머신에 맞는 패키지를 고르고, 설치하고, 앱을 엽니다.

   OpenDesign 다운로드

   체크포인트

   데스크톱 앱이 열립니다. 이미 설치했나요? 건너뛰세요 — 다시 다운로드할 필요가 없습니다.
2. 2

   Kimi 연결 준비하기

   설치한 버전에 포함된 Kimi 지침을 따르세요. Moonshot API 키(BYOK)로 인증하세요 — 자격 증명은 당신의 머신에 남습니다.

   Kimi CLI 문서 — 시작하기

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

   게시된 가이드의 Kimi 설정 노트에서 가져왔습니다; 현재 명령은 벤더 문서에서 확인하세요.

   체크포인트

   의도한 에이전트와 계정을 확인하세요. 사용할 수 없다면, 더 큰 작업으로 확장하기 전에 호환성을 확인하세요.
3. 3

   작은 Kimi 작업 하나 실행하기

   머릿속에 담을 수 있는 브리프를 주세요, 그래야 수정 한 번을 포함한 전체 루프를 판단할 수 있습니다.

   시작 브리프 복사

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

   체크포인트

   결과를 열고, 저장 상태를 시험하고, 한 가지 구체적인 변경을 요청하세요. 생성은 검토를 시작할 뿐, 끝내지 않습니다.

대신 OpenDesign을 소스에서 실행하나요? 기술 퀵스타트를 따르세요.

1. 1

   디자인 브리프

   세 줄에서 여섯 줄의 평이한 언어. 화면이 누구를 위한 것인지, 무엇을 해야 하는지, 어떤 플랫폼이 중요한지 말하세요.

   • 사용자당신은 브리프를 작성하고, 참조 스크린샷이 있으면 첨부합니다.
   • KimiKimi는 브리프와 프로젝트의 AGENTS.md 지침 파일을 읽고, 요청이 모호하면 질문합니다.
   • OpenDesignOpenDesign은 프로젝트, 프롬프트 표면, 그리고 결과물 유형에 맞는 스킬을 제공합니다.
   • 확인브리프에 인수 기준이 명시되어 있는지 확인하세요. 생성 전에 작성하는 편이 나중에 끼워 넣는 것보다 비용이 적습니다.

   New project · PromptKimi

   You

   알림 환경설정을 디자인하세요 — 채널, 방해 금지 시간, 프로젝트별 재정의. 레이아웃이 아니라 톤을 참조에 맞추세요. 데스크톱과 휴대폰.

   Kimi

   이해했습니다. 프로젝트별 재정의는 이 페이지에 펼칠 수 있는 행으로 두나요, 아니면 각 프로젝트의 설정 페이지에 두나요?
2. 2

   디자인 제약 조건

   디자인 시스템과 몇 가지 강한 규칙. 그 조합이 출력을 일반적이지 않고 브랜드에 맞게 유지합니다.

   • 사용자디자인 시스템을 선택한 다음, 브레이크포인트와 반드시 나타나야 하는 컴포넌트를 명시하세요.
   • KimiKimi는 코드를 작성하기 전에 DESIGN.md 토큰과 자세 규칙을 컨텍스트에 로드합니다.
   • OpenDesignOpenDesign은 디자인 시스템 라이브러리를 제공하고, 당신의 선택을 스킬 템플릿에 바인딩합니다.
   • 확인당신의 점검: 토큰이 브랜드와 일치하는가 — 단일 액센트, 올바른 글꼴, 올바른 반경.

   DESIGN.md · OpenDesignbound

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

   인터페이스 생성

   Kimi는 자체 포함 HTML 파일 하나를 만듭니다 — 레이아웃, 스타일, 인터랙션, 안정적인 훅.

   • 사용자당신의 역할은 기다리거나, 명확화 질문에 답하는 것입니다. 구성이 필요하지 않습니다.
   • KimiKimi는 섹션을 계획하고, HTML, CSS, JavaScript를 작성하고, 파일을 실행하고, 실패를 수정합니다.
   • OpenDesignOpenDesign은 결과물을 프로젝트 폴더에 저장하고 미리보기용으로 인덱싱합니다.
   • 확인아직은 없음 — 파일이 렌더링된 후에 평가하세요, 소스를 읽고 평가하지 마세요.

   Project files3 files

   • notification-preferences.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   미리보기

   OpenDesign가 지정한 너비로 파일을 렌더링합니다. 여기에서 디자인을 판단합니다.

   • You브레이크포인트를 전환하고, 인터랙션을 실행하고, 개별 요소에 댓글을 답니다.
   • KimiKimi가 미리보기 댓글을 읽고 다음 수정본을 준비합니다.
   • OpenDesignOpenDesign가 미리보기를 렌더링하고 댓글과 편집을 위한 data-od-id 대상을 노출합니다.
   • Check계층 구조, 대비, 390px에서의 오버플로, 포커스 상태, 그리고 강조 색이 절제되어 있는지 확인합니다.

   Preview · 390pxComment mode

   Comment on · rows

   휴대폰 너비에서는 행당 토글 하나이며, 도움말 텍스트는 레이블 아래에 위치합니다.

   Comment on · quiet

   방해 금지 시간에는 두 개의 빈 선택기가 아니라 명시적인 “꺼짐” 상태가 필요합니다.
5. 5

   수정 및 검증

   미리보기에서 요소를 가리켜 변경을 요청합니다. 각 수정본은 새 파일이 되며, 예고 없이 덮어쓰이는 것은 없습니다.

   • You댓글을 요청으로 바꾸고 작업이 끝났는지 결정합니다.
   • KimiKimi가 변경 사항을 제자리에서 적용하고 파일을 다시 실행합니다.
   • OpenDesignOpenDesign는 버전을 나란히 유지하고, 완료하면 이미지나 HTML을 내보냅니다.
   • Check변경된 영역만 다시 확인한 다음, 각 브레이크포인트에서 전체 페이지를 한 번 확인합니다.

   Verification · v23 of 4

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you