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

pricing.html · 1440px

4인수인계 전 검토

1. 1

   OpenDesign 데스크톱 앱 다운로드

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

   OpenDesign 다운로드

   체크포인트

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

   Cursor 연결 준비하기

   설치한 버전에서 Cursor 안내를 따르십시오. Cursor는 사용자 자신의 provider key를 사용하며 — OpenDesign을 통해 프록시되는 것은 없습니다.

   # .cursor/rules/design.mdc
   ---
   description: Project design conventions
   alwaysApply: true
   ---
   
   - Reuse existing design-system tokens and components; never hardcode hex or spacing.
   - At most two typefaces and one accent color.
   - Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners.
   - Build responsive by default; verify desktop and mobile in the preview before finishing.

   공개된 가이드의 Cursor 설정 노트에서 인용했습니다. 최신 명령어는 공급업체 문서를 확인하십시오.

   체크포인트

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

   작은 Cursor 작업 하나 실행하기

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

   시작 브리프 복사

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

   체크포인트

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

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

1. 1

   디자인 브리프

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

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

   New project · PromptCursor

   You

   Design a three-plan pricing page with a monthly / yearly toggle. Middle plan recommended. Desktop and phone.

   Cursor

   Understood. Should yearly prices show the per-month equivalent, or the annual total?
2. 2

   디자인 제약 조건

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

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

   인터페이스 생성

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

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

   Project files3 files

   • pricing.htmlnew
   • .cursor/rulesbound
   • DESIGN.mdread
4. 4

   미리보기

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

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

   Preview · 390pxComment mode

   Comment on · toggle

   Yearly should show the per-month equivalent and the saving in the same line.

   Comment on · plans

   Recommended plan first on the phone; the free plan can follow.
5. 5

   수정 및 검증

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

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

   Verification · v23 of 4

   • ✓Yearly toggle shows per-month price
   • ✓Recommended plan first at 390px
   • ✓No horizontal scroll at 390px
   • CTA focus order — checked by you