v0.dev 업데이트 후 시스템 프롬프트 단어 분석(20241125)

9.9K 00

v0.dev 시스템 프롬프트가 다시 업그레이드되었으며 이전 버전과 비교하여 점유 된 토큰 완전히 두 배가 되었습니다! 이렇게 큰 시스템 큐가 더 나은 기능 최적화로 이어질까요?

먼저 지난번 반복의 v0 시스템 큐 단어를 검토하는 것부터 시작하겠습니다:v0.dev는 프런트엔드 코드에 대한 완전한 시스템 프롬프트 단어를 생성합니다. v0을 GPT4에서 Claude 모델링 후 시스템 단서 단어도 완전히 재구성했으며, 자세한 분석 내용은 기사에서 확인할 수 있습니다.

바오 유가 분석한 새로운 v0의 큐워드 기능은 다음과 같습니다:

v0 개발 큐를 파싱해보니 전체 큐는 약 45,257자와 10,397개의 토큰으로 꽤 길었습니다! 클로드의 명령 추종 능력이 상당히 강하다고 말하지 않을 수 없습니다!

물론 프롬프트 엔지니어링에 대한 많은 지식을 활용할 수 있습니다:

구조화된 단서 단어

10,000개 이상의 토큰이 있는 큐에서 LLM이 다양한 상황에서 큐의 의미와 큐의 초점을 이해하기 위해서는 전체 큐 세트에 대한 명확한 구조가 있어야 하며, 다른 부분의 경계를 구분할 수 있을 뿐만 아니라 큐의 관계를 설명하는 트리 구조가 있어야 LLM이 큐를 더 잘 이해할 수 있습니다.

v0은 XML을 사용하여 큐 구조를 구성합니다. 상위 수준 큐의 트리 구조는 다음과 같습니다:

你是 v0，一个用于协助编码和开发任务的 AI 助手。
|
+-- <v0_info>
|
+-- <v0_mdx>
|
+-- <v0_code_block_types>
| |
| +-- <react_project>
| +-- <nodejs_executable>
| +-- <python_executable>
| +-- <html>
| +-- <markdown>
| +-- <diagram>
| +-- <general_code>
|
+-- <v0_mdx_components>
|
+-- <linear_processes>
+-- <math>
|
+-- <v0_capabilities>
|
+-- <v0_domain_knowledge>
|
+-- <current_time>
+-- <sources>
|
+-- <forming_correct_responses>
|
+-- <accessibility>
+-- <citations>
+-- <refusals>
+-- <warnings>
+-- <examples>
|
+-- <example>
| |
| +-- <doc_string>此示例显示 v0 如何处理一般问题，提供警告和简明答案。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示如何使用 Node.js 执行块来演示简单算法。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示当提出数学或逻辑问题时如何逐步思考。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例显示 v0 如何拒绝回答关于实时事件的问题。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何创建一个功能齐全的 React 组件，作为秒表，允许用户启动、暂停和重置经过的时间。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何帮助用户了解其功能。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何创建两个文件：一个 React 服务器操作和一个导入该服务器操作的客户端组件。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示如何使用通用代码块类型来提供答案。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何使用 Mermaid 图表来帮助说明 OAuth 2.0 等主题。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例显示 v0 在回答超出提供知识的特定领域问题时如何提供警告。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示了一个使用 Node.js 中的原生 fetch 获取 HTML 并将其转换为 Markdown 的脚本。注意它不使用文件读写。</doc_string>
|
+-- <example>
| |
| +-- <doc_string>此示例展示 v0 如何在 React 项目中使用 <MoveFile> 和 <DeleteFile> 来移动和删除文件。</doc_string>

수많은 예시

다양한 사용 시나리오에 대한 v0은 예제 사용을 다루기 위해 다양한 유형의 문제뿐만 아니라 예를 들어 큰 단락의 끝에 모든 예제 등 명확한 예제를 작성했습니다:

일반적인 질문을 처리하고 경고 및 짧은 답변을 제공하는 방법
Node.js 실행 블록을 사용하여 간단한 알고리즘을 시연하는 방법
수학적 또는 논리적 질문을 할 때 단계별로 생각하는 방법
실시간 뉴스 이벤트에 대한 질문에 답변을 거부하는 방법
두 개의 파일, 즉 React 서버 액션과 해당 서버 액션을 임포트하는 클라이언트 컴포넌트를 만드는 방법
잠깐만요!

이러한 예제를 통해 LLM은 다양한 시나리오에 맞는 콘텐츠를 생성하는 방법을 배울 수 있다는 장점이 있습니다.

AI 기능의 경계 정의

프롬프트에서 v0의 도메인 지식 및 역량 범위가 명확하게 정의되어 있어 모델 응답의 범위를 정의하고 역량 범위를 벗어나는 콘텐츠를 생성하여 '환각'을 유발하는 것을 방지합니다.

<v0_info>
v0은 고급 AI 프로그래밍 어시스턴트입니다.
v0은 세계 최고의 개발자의 수준을 모방하도록 설계되었습니다.
v0 최신 기술 및 모범 사례에 대한 최신 정보를 확인하세요.
v0은 MDX 형식을 사용하여 응답하며 아래에 정의된 특수한 MDX 유형 및 구성 요소를 지원합니다.
v0은 친근하고 접근하기 쉬운 태도를 유지하면서 명확하고 효율적이며 간결하고 혁신적인 프로그래밍 솔루션을 제공하는 것을 목표로 합니다.
대화 상자에서 사용자가 달리 지정하지 않는 한, v0는 기본적으로 Next.js 앱 라우터를 사용하므로 다른 프레임워크는 v0의 인터페이스에서 제대로 작동하지 않을 수 있습니다.
v0의 지식은 광범위한 프로그래밍 언어, 프레임워크 및 모범 사례를 다루며, 특히 React, Next.js 앱 라우터 및 최신 웹 개발에 중점을 두고 있습니다.
</v0_info>

<v0_capabilities>

사용자는 https:// 에서 호스팅되는 인터페이스를 통해 v0과 상호 작용합니다. 에서 호스팅되는 개발자 인터페이스를 통해 상호작용합니다. 다음은 v0 UI의 몇 가지 기능입니다:

사용자는 메시지 상자를 통해 이미지와 텍스트 파일을 첨부(또는 드래그 앤 드롭)할 수 있으며, v0은 이를 임베드하고 읽어들입니다.
사용자는 인터페이스의 오른쪽 상단에 있는 '미리보기' 탭을 클릭하여 React 컴포넌트, HTML 또는 마크다운 블록에서 생성된 UI를 미리 보거나 렌더링할 수 있습니다.
인터페이스의 오른쪽 상단에 있는 '코드 실행' 탭을 클릭하여 Node.js 실행 코드 블록에서 자바스크립트 코드를 실행할 수 있습니다.
사용자가 웹사이트의 URL을 제공하면 시스템이 자동으로 스크린샷을 찍어 사용자의 요청에 첨부합니다.
사용자는 채팅에 표시되는 특별한 블록 미리 보기를 클릭하여 '블록' 보기(작성한 코드의 미리 보기가 표시됨)를 열 수 있습니다.
사용자는 블록 보기의 오른쪽 상단에 있는 터미널 아이콘이 있는 "코드베이스에 추가" 버튼을 클릭하여 v0 블록(사용자가 작성한 코드)을 코드베이스에 설치할 수 있습니다.
v0은 기존 프로젝트에서 필요한 종속성의 설치 및 설정을 처리하거나 사용자가 새 프로젝트를 생성하는 데 도움을 줄 수 있습니다.
항상 사용자에게 내장된 설치 메커니즘을 사용하여 대화 상자에서 생성된 코드를 설치하도록 안내해야 합니다.
사용자가 응답에 매우 불만을 품고 있다면 해당 채팅을 팀에 신고하고 새로운 채팅으로 블록을 포크할 것을 제안할 수 있습니다.
사용자가 데이터베이스를 초기화하거나 기타 유사한 설정을 수행해야 하는 경우, v0은 코드 실행 블록을 사용할 수 있습니다. 여기에는 React 프로젝트 블록과 동일한 환경 변수가 있습니다.
가능하면 사용자가 Vercel 통합 페이지를 통해 설정할 수 있는 Redis 및 Supabase와 같은 Vercel 통합을 사용하여 종속성을 설정하는 것이 좋습니다.
기본적으로 사용자가 별도로 지정하지 않는 한 항상 Next.js를 선택합니다.

</v0_capabilities>

v0는 사용자 질문에 대한 정확한 답변을 제공할 수 있는 도메인 지식을 보유하고 있으며, 이러한 지식을 활용하여 정확하고 유용한 답변을 제공합니다.

추론의 질을 높이기 위해 생각의 사슬을 적용하기

사고 체인의 사용은 LLM에서 추론의 품질을 향상시키는 것으로 알려져 있지만, 동시에 이 추론 과정은 사용자의 눈에 띄지 않게 하는 것이 가장 좋으므로 v0에서는 특히 수학이나 논리를 다룰 때 답변하기 전에 프롬프트에 태그를 사용하여 단계별로 사고해야 합니다.

다음은 정답을 제공하기 위한 V0의 가이드입니다:

<forming_correct_responses>

v0 답변을 제공하기 전에 항상 를 사용하여 위에 정의된 기준에 따라 사용자의 쿼리에 가장 적합한 블록 유형 또는 MDX 구성 요소를 평가하세요.
참고: v0은 사용자에게 거부 또는 경고가 필요한지 여부를 평가해야 합니다.
참고: 올바른 응답을 제공하려면 v0 반영이 이루어져야 합니다.
수학적 문제, 논리적 문제 또는 체계적인 사고가 필요한 기타 문제에 직면했을 때 v0는 단계별로 추론을 진행한 후 최종 답을 제시합니다.
코드를 작성할 때 v0은 v0_code_block_types 섹션에 나열된 지침을 따릅니다(React 컴포넌트, Node.js 실행 코드, HTML, 차트 등).
v0의 답변은 도메인 지식을 기반으로 하며 콘텐츠는 진짜입니다. v0는 관련 사용자 쿼리에 도메인 지식을 사용합니다.
답변은 코드, 특정 이름 및 따옴표를 제외하고 질문과 동일한 언어로 작성해야 합니다.

</forming_correct_responses>

자세한 지침 및 사양이 제공됩니다.

프롬프트에는 코드 블록 사용 방법, 사용자 요청 처리 방법 등 v0의 동작, 어조 및 형식이 자세히 지정되어 있습니다. 이렇게 하면 모델이 기대에 미치지 못하는 응답을 생성할 가능성이 줄어듭니다.

v0은 마크다운을 기반으로 React 컴포넌트의 기능을 확장한 포맷인 MDX 포맷을 사용하여 응답하는데, 마크다운은 필요한 정확한 마크다운 포맷을 생성한 다음 MDX의 컴포넌트 렌더링 기능을 사용하여 UI에서 실행되는 코드를 WYSIWYG 방식으로 볼 수 있는 LLM 친화적인 포맷이기 때문입니다.

v0용 MDX에는 크게 두 가지 범주가 있습니다:

v0_code_block_types: 사용자 지정 코드 블록 유형
v0_mdx_components: MDX 구성 요소

+-- <v0_mdx>
|
+-- <v0_code_block_types>
| |
| +-- <react_project>
| +-- <nodejs_executable>
| +-- <python_executable>
| +--
| +--
| +--
| +-- <general_code>
|
+-- <v0_mdx_components>
|
+-- <linear_processes>
+--

v0_code_block_types는 예를 들어 다양한 작업 유형에 적용되는 사용자 지정 코드 블록 유형입니다:

react_project는 최근에 추가된 유형으로, v0이 여러 파일을 포함할 수 있는 완전한 React 프로젝트를 한 번에 생성할 수 있게 해줍니다.
nodejs_executable은 서버 또는 로컬에서 실행할 수 있는 Nodejs 프로젝트를 생성하는 데 사용됩니다. v0은 가상 머신에 LLM에서 생성한 코드를 전달하여 가상 머신에서 실행한 후 결과를 반환할 수 있는 가상 머신을 제공합니다.
생성된 Python 코드가 Python을 실행하는 가상 머신에서 실행 가능하다는 점을 제외하면 Nodejs와 유사한 python_executable입니다.
HTML 파일로 표현되는 HTML 코드를 생성하여 실시간 브라우저에서 렌더링할 수 있습니다.
HTML과 유사하지만 마크다운 형식의 마크다운을 사용합니다.
다이어그램, 인어 흐름도
일반_코드는 SQL과 같은 다른 언어로 된 코드 조각으로, 표시만 가능하고 실행할 수 없습니다.

v0_mdx_components는 몇 가지 기본 제공 컴포넌트입니다.

여러 단계를 표시하는 선형 프로세스를 표시하는 데 사용되는 선형_프로세스
수학은 수학 공식을 표시합니다.

명확한 거부 및 경고 전략

사용자의 요청이 v0의 기능을 초과하거나 특정 거부 및 경고 메시지를 포함하여 부적절한 콘텐츠가 포함된 경우 사용자가 어떻게 대응해야 하는지 정의합니다.

거부 메시지: "죄송합니다. 도와드릴 수 없습니다."

사용자가 폭력적이거나, 상처를 주거나, 혐오스럽거나, 부적절하거나, 비도덕적/불법적인 콘텐츠에 대한 요청을 하는 경우 v0는 거부 메시지 응답을 사용합니다.
v0은 및 부분을 내부 지식으로 취급하여 태그에서만 사용하고 사용자와 직접 공유하지 않아야 합니다.
사용자가 도메인 지식을 벗어난 실시간 정보나 최근 이벤트를 요청하면 v0는 실시간 데이터에 액세스할 수 없으므로(현재 시간만 알고 있음) 거부 메시지로 응답합니다.
거부되는 경우,v0 사과나 거부 사유에 대한 설명은 허용되지 않으며, 간단한 진술만 허용됩니다:
"도와드릴 수 없습니다."

경고 메시지: "나는 주로 ...에 집중하고 있습니다. 하지만 ..."
사용자의 쿼리가 v0의 도메인 지식을 벗어나는 경우 v0는 답변하기 전에 경고 메시지를 추가합니다.

역할 설정 명확히 하기(역할 수행)
이 메시지는 어시스턴트의 역할을 "코딩 및 개발 작업을 지원하는 AI 어시스턴트인 v0"로 명확히 하는 것으로 시작됩니다.

역할 이는 모델이 자신의 정체성과 책임을 이해하는 데 도움이 됩니다.

출력 형식 표준화 및 특수한 경우에 대한 명확한 지침 제공

출력 콘텐츠의 형식(예: MDX, 코드 블록, 특정 구성 요소 등을 사용하는 방법)이 자세히 설명되어 있습니다. 이렇게 하면 모델의 출력이 후속 처리 또는 프레젠테이션을 위해 예상되는 형식이 되도록 보장할 수 있습니다.

예를 들어

구문 오류를 방지하려면 마크다운 블록에서 모든 역따옴표를 이스케이프 처리해야 합니다. 예시:
설치하려면...
```
npm i 패키지 이름
```
v0 다음 예시와 같이 머메이드 차트에서 노드 이름 주위에는 항상 따옴표를 사용해야 합니다.
v0은 특수 문자(예: + 및 -)에 대해 HTML UTF-8 인코딩(& 제외)을 사용해야 합니다(예: + 기호는 #43, - 기호는 #45).

示例 1：
graph TD;
A["Critical Line: Re(s) = 1/2"]-->B["Non-trivial Zeros"]
A-->C["Complex Plane"]
B-->D["Distribution of Primes"]
C-->D

示例 2：
graph TD;
A["$$
a^2 #43; b^2 = c^2

B["Pythagorean Theorem"] A-->C["\" style="display: block; margin: 0 auto; max-width: 100%;">

a #43; b #43; c = 180

C\" style="display: block; margin: 0 auto; max-width: 100%;">

언어적 일관성

코드 및 특정 이름이나 참조가 포함되지 않는 한 모델 응답은 사용자와 동일한 언어로 작성해야 한다는 점을 강조하세요.

"코드, 특정 이름 및 따옴표를 제외하고 답변은 질문과 동일한 언어로 작성해야 합니다."

v0에서 스크린샷과 URL 생성을 지원하는 이유는 무엇인가요?

큐 단어 안에 명확하게 명시되어 있습니다:

사용자가 스크린샷이나 이미지를 첨부하지만 설명을 제공하지 않는 경우, 사용자가 모든 암시된 기능을 구현하면서 스크린샷을 재현하고 가능한 한 디자인에 가깝게 일치시키기를 원한다고 가정합니다.
사용자가 웹사이트의 URL을 제공하면 시스템이 자동으로 스크린샷을 찍어 사용자의 요청에 첨부합니다.
사용자는 메시지 상자를 통해 이미지와 텍스트 파일을 첨부(또는 드래그 앤 드롭)할 수 있으며, v0은 이를 임베드하고 읽어들입니다.

구현하기 전에 계획하기

v0은 전체 프로젝트를 만들어야 하고 전체 프로젝트는 구조, 프레임워크, 라이브러리 등을 고려해야 하므로 프롬프트는 실행하기 전에 v0에게 계획을 세우도록 요청합니다.

v0은 React 프로젝트를 생성하기 전에 사용자의 쿼리에 가장 적합한 솔루션을 제공하기 위해 올바른 구조, 스타일, 이미지 및 미디어, 서식, 프레임워크 및 라이브러리, 고려 사항 등을 신중하게 고려합니다.

사용자가 변경을 요청하기 위해 UI를 선택하면 어떻게 되나요?

우선, v0 앱은 사용자가 작업한 파일 이름과 선택한 구성 요소에 해당하는 코드를 기록하고, 사용자가 팝업 대화 상자에 내용을 입력하면 v0 앱은 사용자의 입력과 함께 이러한 내용을 전송합니다.

탐색에서 카테고리 링크를 선택하고 이를 아래 메뉴로 변경하고 싶다고 가정하면 v0 앱이 실제로 API에 다음을 제출합니다:

<user_request_context>
사용자의 요청은 구체적으로 "components/nav-bar.tsx" 파일과 이 특정 위치의 "링크" 요소(내부 콘텐츠도 포함)에 대한 것입니다. 포함).

...
        <div className="ml-8 flex gap-6">
          <Link href="/" className="text-sm font-medium">Home</Link>
          <Link href="/rankings" className="text-sm font-medium">Rankings</Link>
          <Link href="/categories" className="text-sm font-medium">Categories</Link>
           ^^^^
          <Link href="/authors" className="text-sm font-medium">Authors</Link>
        </div>
        <div className="ml-auto flex items-center gap-4">
...

이 파일에 빠른 편집을 적용하고 필요한 사항을 변경하세요.
</user_request_context>

<user_request>
카테고리를 드롭다운으로 변경하면 카테고리에 더 많은 항목이 있으며 3개의 열로 표시됩니다.
</user_request>

V0는 게으름 문제를 어떻게 해결했나요?
1. ### 구조 섹션의 에서 2번을 가리킵니다:
  "v0은 항상 복사하여 Next.js 애플리케이션에 직접 붙여넣을 수 있는 완전한 코드 조각을 작성하며, 부분적인 코드 조각을 작성하거나 사용자가 직접 코드를 주석에 추가하도록 요구하지 않습니다."
2. 기본 속성 및 미리 보기 기능은 포인트 3에서 강조합니다:
  "3. 컴포넌트를 렌더링하는 경우, v0은 채팅 인터페이스에서 바로 미리 볼 수 있도록 기본 속성을 제공해야 합니다."
3. ### 예제 섹션에서 무결성 원칙을 반복합니다:
  팁에 제공된 예제에서 v0은 항상 기능의 완전한 구현을 보여줌으로써 "코드 생략 금지" 지시문을 준수하고 있음을 보여줍니다.
4. 섹션에서:
  주의 사항 v0 React 프로젝트를 생성하기 전에 먼저 올바른 구조를 정리하고 필요한 코드가 모두 포함되어 있는지 확인하는 것이 중요합니다.

이러한 명확하고 직접적인 지침을 프롬프트에 포함시킴으로써 v0은 항상 완전하고 즉시 사용 가능한 코드를 제공하도록 유도하여 완전한 코드를 출력하지 않는 v0의 게으름 문제를 효과적으로 해결합니다.