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

pricing.html · 1440px

4인수인계 전 검토

1. 1

   OpenDesign 데스크톱 앱 다운로드

   컴퓨터에 맞는 데스크톱 패키지를 선택하고 설치한 다음, OpenDesign를 실행하세요.

   OpenDesign 다운로드

   체크포인트

   OpenDesign가 실행됩니다. 이미 설치되어 있다면 다음 단계로 넘어가세요 — 다시 다운로드하지 마세요.
2. 2

   Cursor 연결 준비하기

   설치된 버전에 표시된 Cursor 설정을 수행하세요. Cursor는 제공자 키를 직접 사용하며, 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 설정 노트에서 가져왔습니다. 현재 명령은 공급업체 문서와 대조해 확인해야 합니다.

   체크포인트

   선택한 에이전트가 Cursor이고 계정이 의도한 계정인지 확인하세요. Cursor를 사용할 수 없다면, 더 큰 작업을 시도하기 전에 호환성을 검토하세요.
3. 3

   작은 Cursor 작업 하나 실행하기

   단일 수정을 포함해 전체 루프를 통해 판단할 수 있는, 간결한 첫 요청을 선택하세요.

   시작 브리프 복사

   프로필 양식과 저장 확인이 있는 설정 화면을 구축하세요. 내 디자인 규칙을 따르세요. 데스크톱 및 모바일 너비에서 확인하세요.

   체크포인트

   렌더링된 파일을 열고, 저장 상태를 실행해 보고, 구체적인 변경 하나를 요청하세요. 생성된 아티팩트는 검토를 시작할 뿐, 끝내지는 않습니다.

소스 기반 OpenDesign 설치의 경우, 대신 기술 퀵스타트를 사용하세요.

1. 1

   디자인 브리프

   간결하고 짧게 유지하세요—대략 3~6줄. 화면이 누구를 위한 것인지, 무엇을 달성해야 하는지, 어떤 플랫폼을 대상으로 하는지 말하세요.

   • 사용자브리프를 작성하고, 참고 스크린샷이 있으면 포함하세요.
   • Cursor브리프와 프로젝트의 지침 파일을 읽고, 모호한 부분이 있으면 질문합니다.
   • OpenDesign프로젝트, 프롬프트를 위한 채팅 인터페이스, 아티팩트 유형에 맞는 스킬을 제공합니다.
   • 확인브리프에 승인 기준이 있는지 확인하세요. 생성 전에 이를 정하는 것이 나중에 고치는 것보다 비용이 적게 듭니다.

   New project · PromptCursor

   You

   월간/연간 토글이 있는 세 가지 요금제 가격 페이지를 디자인하세요. 중간 요금제를 추천으로 표시하세요. 데스크톱과 휴대폰을 포함하세요.

   Cursor

   이해했습니다. 연간 요금제의 경우, 월간 환산 금액을 원하시나요, 아니면 연간 총액을 원하시나요?
2. 2

   디자인 제약 조건

   디자인 시스템과 몇 가지 확고한 제약 조건을 가져오세요. 그 맥락이 출력이 일반적인 모습으로 흐르지 않게 해줍니다.

   • 사용자디자인 시스템을 선택한 다음, 브레이크포인트와 재사용해야 하는 컴포넌트를 지정하세요.
   • Cursor마크업을 작성하기 전에 Cursor는 DESIGN.md 토큰과 태도 규칙을 컨텍스트로 읽습니다.
   • OpenDesignOpenDesign는 디자인 시스템 라이브러리를 보유하고, 선택 사항을 스킬 템플릿에 바인딩합니다.
   • 확인브랜드에 대해 토큰을 확인하세요: 단일 악센트, 올바른 글꼴, 올바른 반경.

   DESIGN.md · OpenDesignbound

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

   인터페이스 생성

   Cursor는 레이아웃, 스타일, 상호작용, 안정적인 훅을 포함한 하나의 자체 포함 HTML 파일을 생성합니다.

   • 사용자기다리거나, Cursor가 명확히 하는 질문을 하면 답하세요. 여기서 구성할 것은 없습니다.
   • CursorCursor가 섹션을 계획하고, HTML, CSS, JavaScript를 작성하고, 파일을 실행하며, 실패한 부분을 수정합니다.
   • OpenDesignOpenDesign는 아티팩트를 프로젝트 폴더에 저장하고, 미리보기가 열 수 있도록 인덱싱합니다.
   • 확인아직 아닙니다. 파일이 렌더링될 때까지 기다린 다음, 소스가 아니라 결과를 판단하세요.

   Project files3 files

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

   미리보기

   OpenDesign은 지정한 너비로 파일을 렌더링합니다. 디자인은 여기, 미리보기에서 평가됩니다.

   • You뷰포트 너비를 바꾸고, 각 상호작용을 실행해 보고, 요소에 직접 코멘트를 남기세요.
   • CursorCursor는 미리보기에 남긴 코멘트를 읽고 다음 수정본을 준비합니다.
   • OpenDesignOpenDesign은 미리보기를 렌더링하고 코멘트와 편집을 위해 data-od-id 대상을 노출합니다.
   • Check계층 구조, 대비, 390px에서의 오버플로, 포커스 상태, 그리고 액센트가 절제되어 있는지 확인하세요.

   Preview · 390pxComment mode

   Comment on · toggle

   연간 요금제라면 월 환산 금액과 절감액을 한 줄에 보여주세요.

   Comment on · plans

   휴대폰에서는 추천 요금제를 먼저 배치하고, 무료 요금제는 그다음에 두어도 됩니다.
5. 5

   수정 및 검증

   미리보기에서 요소를 가리켜 변경을 요청하세요. 각 수정본은 새 파일로 저장됩니다. 알림 없이 덮어쓰는 일은 없습니다.

   • You코멘트를 요청으로 변환하고, 작업이 언제 완료되는지 결정합니다.
   • CursorCursor는 변경 사항을 제자리에서 적용하고 파일을 다시 실행합니다.
   • OpenDesignOpenDesign은 버전을 나란히 유지하고, 작업을 마치면 이미지나 HTML을 내보냅니다.
   • Check먼저 변경된 영역만 검토한 다음, 모든 브레이크포인트에서 전체 페이지를 한 번씩 검토하세요.

   Verification · v23 of 4

   • ✓연간 토글이 월 가격을 표시합니다
   • ✓Recommended plan first at 390px
   • ✓No horizontal scroll at 390px
   • CTA 포커스 순서 — 직접 확인