사랑스러운 프로그래밍 큐 워드 디자인 가이드라인 및 모범 사례 완성하기

활용 사랑스러운 신속한 디자인, 전략 및 방법론 체크리스트를 수행합니다.

러블리 기능을 최대한 활용할 수 있도록 팁 디자인 전략과 접근 방식 목록을 정리했습니다. 이러한 전략은 부분적으로는 저희 팀의 경험에서 도출된 것이고, 부분적으로는 커뮤니티 구성원들이 공유한 것입니다.

큐 디자인이란 무엇인가요? 프롬프트 디자인은 러블리와의 상호 작용에 사용되는 텍스트 기반 자연어 입력을 말합니다. 러블리에게 전달하는 지침이 포함된 메시지라고 생각하면 됩니다.

러버블은 대규모 언어 모델(LLM)에 의존하므로 효과적인 큐 디자인 전략으로 효율성과 정확성을 크게 향상시킬 수 있습니다. 관련 권장 자료 bolt.new 시스템 힌트 단어 분석, 프런트엔드 코드 생성 힌트 팁이 여기 있습니다! .

 

기본 사항

프롬프트는 러블리 애플리케이션과 상호 작용하는 주요 방법입니다:

1. 시작 화면미리 작성된 프롬프트로 시작하거나 직접 만들 수 있습니다.
2. 빌더 사용자 인터페이스채팅 기반 인터페이스를 사용하여 빠르게 반복 작업을 수행합니다.

프롬프트는 모든 상호작용의 핵심입니다.

 

큐 디자인 전략

이러한 전략은 사용 사례에 따라 조합하여 사용할 수 있습니다. 이러한 전략을 자유롭게 실험해보고 자신에게 가장 적합한 전략을 찾아보세요. 러블리 자체로도 매우 기본적이고 일반적인 팁으로 많은 작업을 수행할 수 있지만, 이러한 전략을 사용하면 더 나은 결과를 얻을 수 있습니다.

시나리오 기반 큐 디자인

상황별 정보를 제공하면 Lovable이 사용자의 전반적인 요구 범위를 이해하는 데 도움이 됩니다. 컨텍스트 정보는 특정 작업을 요청하기 전에 설정하는 데 사용할 수 있습니다.

컨텍스트 설정

我们正在构建一个项目管理工具，帮助团队跟踪任务。
该工具应具有以下功能：
- 用户认证
- 项目创建
- 任务分配
- 报告功能
现在，第一个任务是创建项目创建的用户界面。

또 다른 예입니다:

我需要一个具有 Supabase 集成和安全认证流程的 CRM 应用程序。首先设置后端。

또 다른 예입니다:

我们正在开发一个专注于环保产品的电商平台。生成一个具有类别和价格筛选功能的产品列表页面。

프로그레시브 큐 디자인

경험에 따르면 큰 힌트를 주고 AI가 완벽하게 처리할 것으로 기대하는 것보다 조금씩 조금씩 변경하는 것이 더 효과적입니다.

하지 마세요.::

构建一个带有 Supabase、认证、Google Sheets 导出和数据增强功能的 CRM 应用程序。

권장 사항::

1. 设置一个连接 Supabase 的 CRM 后端。
2. 添加具有用户角色的安全认证流程。
3. 集成 Google Sheets 用于导出记录。

또 다른 예입니다:

1. 设置用户信息的数据库架构。
2. 开发一个用于检索用户数据的 API 端点。

이미지 단서 사용

최근에는 사용자가 메시지를 통해 이미지를 업로드하고 Lovable에 해당 이미지를 기반으로 솔루션을 구축하도록 요청할 수 있는 기능을 추가했습니다.

여기에는 두 가지 주요 방법이 있습니다. 첫 번째는 간단한 힌트 방법입니다.

간단한 이미지 업로드 팁

이미지를 업로드하고 다음 샘플 팁을 추가할 수 있습니다:

创建并实现一个尽可能类似于附图的用户界面。

这个截图显示了一个移动端的布局问题。调整边距和填充，使其在保持相同设计结构的同时具有响应性。

또는 AI가 이미지의 콘텐츠와 이미지에 첨부된 특정 정보를 더 잘 이해하도록 도울 수 있습니다.

자세한 지침이 포함된 이미지 프롬프트 업로드한 이미지에 구체적인 설명을 추가하면 훌륭한 결과를 얻을 수 있습니다. 사진은 천 마디 말보다 가치가 있지만, 정적인 이미지에서는 대화형 정보가 항상 명확하지 않기 때문에 원하는 기능을 설명하는 텍스트를 추가하는 것이 특히 중요합니다.

我希望您创建一个尽可能类似于截图中的应用程序。
它本质上是一个看板克隆。
它应该具有以下功能：在每列中添加新卡片（任务），更改单列内这些卡片的顺序，甚至在列之间移动这些卡片。
可以使用 Pangea home dnd npm 包来实现拖放功能。

피드백 통합

AI 결과를 검토하고 개선을 위한 구체적인 피드백을 제공하세요.

登录表单看起来不错，但请为电子邮件字段添加验证，以确保其包含有效的电子邮件地址。

모호성 피하기

메시지가 명확하고 모호하지 않은지 확인하세요. 모호한 용어는 피하고 요구 사항을 최대한 구체적으로 설명하세요.

하지 마세요.::

让这个应用更好。

이렇게 하세요.::

重构该应用以清理未使用的组件并提升性能，但不改变 UI 或功能。

또 다른 예입니다:

创建一个包含用户名、电子邮件和密码字段的用户注册表单。

비특이적 팁

구체적이지 않고 광범위한 프롬프트는 피하세요.

创建一个用户输入的表单

제약 조건 추가

때로는 제약 조건을 추가하면 AI가 중요한 것에 집중하고 불필요한 복잡성을 피하는 데 도움이 될 수 있습니다.

제약 조건 추가

创建一个简单的待办事项应用，最多同时显示 3 个任务。
包括添加、编辑和删除任务的功能。

优化此代码，但确保 UI 和核心功能保持不变。记录每项更改。

 

고급 큐 디자인 전략

접근성 강조

접근성 표준 및 최신 모범 사례를 준수하는 코드를 생성하도록 장려하세요. 이를 통해 결과물이 기능적일 뿐만 아니라 사용자 친화적이고 접근성 가이드라인을 준수하도록 보장합니다.

生成一个符合无障碍最佳实践的 React 登录表单组件，包括适当的 ARIA 标签和键盘导航支持。

사전 정의된 컴포넌트 및 라이브러리 사용

프로젝트의 일관성과 효율성을 유지하기 위해 특정 UI 라이브러리 또는 구성 요소의 사용을 지정합니다. 이렇게 하면 AI가 특정 도구를 사용하여 애플리케이션의 호환성과 일관된 디자인 언어를 보장하도록 지시합니다.

使用 shadcn/ui 库创建一个响应式导航栏，并使用 Tailwind CSS 进行样式设计。

체인 사고(CoT) 팁 구현하기

복잡한 작업의 경우 AI는 솔루션을 제공하기 전에 단계별로 문제에 접근하는 것이 좋습니다. 이 접근 방식은 복잡한 작업을 세분화하여 보다 정확하고 포괄적인 솔루션을 생성하는 데 도움이 됩니다.

让我们一步步思考如何设置一个安全的身份验证系统：
1. 需要哪些必要组件？
2. 它们应该如何交互？
3. 提供实现代码。

다국어 팁

다국어 환경에서 작업할 때 코드 주석 및 문서의 대상 언어를 지정하세요. 이렇게 하면 다른 언어를 사용하는 팀원들이 생성된 콘텐츠에 액세스할 수 있고 협업이 향상됩니다.

生成一个计算斐波那契数列的 Python 脚本。用法语提供注释和文档。

프로젝트 구조 정의 및 문서 관리

파일 이름과 경로를 포함한 프로젝트 구조를 명확히 하여 생성된 코드가 잘 정리되고 유지 관리가 용이하도록 합니다. 이렇게 하면 프로젝트에서 새 컴포넌트를 어디에 저장해야 하는지에 대한 명확한 지침을 제공하여 일관된 파일 정리를 유지할 수 있습니다.

创建一个名为 'UserProfile' 的新 React 组件，并将其保存为 'components/user-profile.tsx'。确保它包括一个个人头像、用户名和简介部分。

 

디버깅 및 문제 보고

디버깅 지침

아래 단계에 따라 체계적인 커미셔닝을 수행하세요:

• 작업 인식모든 작업을 나열하고 우선순위를 정합니다.
• 내부 감사제출하기 전에 내부적으로 솔루션을 검증하세요.
• 보고완료된 각 작업을 명확하고 검증 가능한 결과를 통해 확인합니다.
• DOM 유효성 검사: 변경 사항이 DOM에서 올바르게 렌더링되는지 확인합니다. 유효성 검사를 위한 DOM 태그 또는 피드백을 제공합니다.
• 명확한 문제계속 진행하기 전에 불확실성을 명확히 하세요.
• 오류 처리 및 로깅강력한 오류 처리와 상세한 console.log. 라이브로 전환하기 전에 로그를 삭제하지 마세요.
• 디버깅 도구 관리프로덕션 환경에서 디버깅 도구를 비활성화하도록 전역 스위치를 구현합니다.
• 중단점 구현: 중단점을 추가하여 GPT 관련 오류를 격리합니다.
• 타사 패키지새 코드를 작성하기 전에 재사용 가능한 라이브러리가 있는지 확인하세요.
• 기존 시스템 사용일관성을 보장하기 위해 기존 기능을 기반으로 구축합니다.
• 코드 검토수정하기 전에 상세한 분석을 수행하고, 문제를 문서화하고, 해결책을 계획합니다.

디버깅 프로세스

체계적인 디버깅 단계:

1. 실패한 테스트 사례를 추가합니다.
2. 문제를 격리하고 종속성을 분석하세요.
3. 수정 사항을 적용하기 전에 결과를 기록하세요.

这是失败的控制台日志。分析测试用例，调查认证流程中的错误，并在理解依赖关系后提出解决方案。

체계적인 피드백

오류를 보고하거나 변경을 요청할 때

1. 설명현재 동작및 이슈.
2. 개요예상되는 동작.
3. 특정 제약 조건을 추가합니다.

Webhook 集成偶尔失败。调查为什么 JWT 验证切换会导致此问题并提出解决方案。

문제를 해결할 때는 구체적으로 설명하세요.

문제가 발생하여 빌드가 실패하고 결과 애플리케이션이 예상과 다를 수 있습니다. 효과적인 힌트는 다시 정상으로 돌아가는 데 도움이 될 수 있습니다. 다시 말하지만, 구체성이 중요합니다.

일반적이거나 매우 일반적인 프롬프트는 피하세요.

什么都不行，修复它！

대신 더 구체적이고 상세하게 작성하세요.

팁을 더 자세하고 명확하게 작성하세요.

现在屏幕变成空白了，之前我还能进行编辑。
能检查一下发生了什么吗？

개발자 콘솔을 사용하여 버그 보고하기

기술에 능숙하고 문제가 있는 경우 브라우저 콘솔에 기록된 오류를 붙여넣으면 큰 도움이 될 수 있습니다.

일반적으로는 개발자 도구 를 클릭하고 콘솔로 이동합니다. 오류나 알림이 표시되면 이를 복사하여 팁으로 붙여넣을 수 있습니다.

개발자 도구 및 콘솔 로그 사용

我的应用程序不再工作了，屏幕是空白的。
这是从开发者工具控制台复制粘贴的内容，你能修复这个问题吗？
发生错误：
TypeError: Q9() is undefined at https://example.lovable.app/assets/index-DWQbrtrQQj.js
: 435 : 39117 index-DWQbrtrQQj.js:435:35112
onerror https://example.lovable.app/assets/index-DWQbrtrQQj.js:435

실용적인 디버깅 예제

러버블의 실제 디버깅 프로세스는 다음과 같습니다:

1단계::

查看来自控制台的错误日志。确定认证流程中的根本原因。

2단계::

现在隔离失败的测试并分析哪些依赖关系出了问题。

3단계::

在隔离环境中测试认证修复后，提出永久解决方案。

사랑스러운 프롬프트

생산성을 높이기 위해 일반적인 시나리오에 대한 몇 가지 유용한 팁을 추가했습니다.

협업 및 프로세스 팁

팀워크 또는 디버깅에 적합합니다:

审查此 GitHub 项目的结构。评估流程、依赖关系，并提出有关可扩展性的改进建议。

오류 디버깅

사소한 실수입니다:

同样的错误仍然存在。暂时不要更改代码—需要彻底调查以找到确切的根本原因。深入分析日志、流程和依赖关系，并在完全理解问题后再提出解决方案。

지속성 오류:

错误仍未解决。停止操作，务必以 100% 的确定性找到确切的根本原因—不要猜测或假设。详细分析流程和依赖关系的每个方面，并确保在完全理解之前不要进行任何更改。

중대한 실수입니다:

这是解决此问题的最后尝试。停止所有更改，系统性地重新检查整个流程—身份验证、Supabase、Stripe、状态管理和重定向—从头开始梳理。找出问题所在及其原因，单独测试每个部分，在没有绝对确定性之前不要继续。

콘솔 로그를 정리합니다:

仔细移除不必要的 console.log 语句，同时不影响功能或设计。检查每条日志以确保其非关键性，并记录需要替代处理的日志。方法性地进行操作，彻底测试以确认应用程序的完整性。

재구성

요청 후 리팩토링을 위한 귀여운 힌트:

重构此文件，同时确保不更改 UI 或功能—所有内容的行为和外观必须完全相同。仅专注于改善代码结构和可维护性。记录当前功能，确保已进行测试，并逐步操作以避免风险或回归。

고안하다

UI가 변경됩니다:

仅进行视觉更新—不要以任何方式影响功能或逻辑。完全了解当前 UI 如何与应用程序集成，确保逻辑、状态管理和 API 保持不变。彻底测试以确认应用程序行为与之前完全一致。

모바일 최적화:

在不更改设计或功能的情况下优化应用程序的移动端体验。分析布局和响应性以确定针对小屏幕和触摸交互所需的调整。在编辑任何代码之前，制定详细计划，并在各种设备上进行彻底测试，以确保应用程序的行为与当前一致。

기존 기능을 수정합니다:

更改此功能但不要影响核心功能、其他功能或流程。分析其行为和依赖关系以理解风险，并在进行操作之前沟通任何疑虑。彻底测试以确认无回归或意外影响。

민감한 업데이트:

此更新非常敏感，需要极高的精确性。在更改之前，彻底分析所有依赖关系和影响，并以系统性的方法测试以确保没有问题。避免捷径或假设—如果不确定，请暂停并寻求澄清。

구현 전 팁

주요 변경 사항을 적용하기 전에

规划此功能的 API 流程。包括端点、参数，以及如何与数据库连接。

채팅 모드 실험하기

채팅 모드는 러블리와의 상호작용 방식을 전환할 수 있는 실험적인 기능입니다. 이번에 출시되는 채팅 모드는 다음과 같습니다:

1. 기본 모드: 채팅 및 프로젝트 편집.
2. 채팅 전용 모드: 채팅만 가능하며 프로젝트 편집이 불가능합니다.

향후 더 많은 채팅 모드를 도입하거나 러블리와의 다양한 상호작용 방식을 실험하기 위해 해당 모드를 제거할 수 있습니다.

 

평결에 도달하기

증분 프롬프트, 상황에 맞는 명령 및 새로 도입된 사랑스러운 프롬프트 러버블의 힌트를 결합하면 더욱 강력한 효과를 발휘합니다. 이러한 방법을 시도하고, 반복하고, 활용하여 워크플로를 간소화하고, 효율적으로 디버그하고, 안정적인 애플리케이션을 구축하세요.