AI 프로그래밍: 러블리 웰 사용 방법

현재 최고의 AI 프로그래밍 파트너는 다음과 같습니다. 사랑스러운 노래로 응답 커서 bolt.new와 윈드서핑도 모두 훌륭하지만, 앞의 두 가지를 선택한 이유는 상한선이 충분히 높았기 때문입니다.

러블리 웹사이트:

https://lovable.dev/

사랑스러워요. 아마 아니겠죠. bolt.new 이름도 있고, 특히 코딩을 할 줄 모르는 분들에게도 추천하고 싶어요. 방금 살펴본 결과 총 40개의 사랑스러운 프로젝트를 만들었습니다.

오늘 포스팅의 대부분은 Lovable의 프롬프트 모범 사례에 대한 X와 Lovable의 문서에서 발췌한 내용이며, 제 생각도 일부 포함되어 있습니다. 원본 문서를 직접 읽고 싶으시면 여기에서 확인하세요:

https://x.com/lovable_dev/status/1873078129469821044

본문이 시작됩니다.

컨텍스트 사용

더 많은 배경 정보를 제공해야 합니다. 예시:

저희는 팀이 작업을 추적하는 데 도움이 되는 프로젝트 관리 도구를 구축하고 있습니다.

이 도구에는 다음과 같은 기능이 있어야 합니다:

• 사용자 인증
• 프로젝트 생성
• 작업 sth.
• 보고서 생성

이제 첫 번째 작업은 프로젝트에서 만든 사용자 인터페이스를 만드는 것입니다.

제가 하려는 일에 대한 컨텍스트를 제공하기 위해 여기서는 .cursorrules와 비슷합니다. 하지만 나중에 다룰 첫 번째 작업이 무엇인지, 한 번에 한 걸음씩 나아가고 AI가 우리의 기대에서 너무 많이 벗어나지 않도록 하는 것이 중요하다는 점을 잊지 마세요. 또 다른 예시입니다.

Supabase와 통합되고 안전한 인증 프로세스를 갖춘 CRM(고객 관계 관리) 애플리케이션이 필요합니다. 백엔드 구축부터 시작하세요.

친환경 제품에 중점을 둔 이커머스 플랫폼을 개발 중입니다. 카테고리 및 가격 필터가 있는 제품 목록 페이지를 생성해야 합니다.

정보의 맥락을 파악한 다음 특정 작업을 명확하게 설명합니다.

작업 분석

많은 사람이 인공지능 프로그래밍에 도전할 때 제시하는 요구 사항 중 하나는 일기 예보 앱 개발, 2048년 게임 개발입니다. 이것도 사실입니다. 저희는 이것부터 시작하여 놀라운 결과를 얻었습니다.

하지만 AI가 우리에게 필요한 것이 무엇인지 추측하지 않고 실제 작업을 시작합시다.

대비:

不要这样：

构建一个包含所有功能的 CRM 系统



这样：

1. “设置后端”

2. "添加认证流程"

3. “添加导出功能”

이것은 나중에 "복잡한 기능 계획"과 "디버깅 프로세스"가 작업의 분해를 포함하여 매우 중요합니다:

복잡한 기능 계획

생각 나누기: 인증을 위한 계획을 세우세요:

1. 필수 구성 요소
2. 사용자 인터페이스
3. 보안 조치

디버깅 프로세스:

이 구조를 따르세요:

1. 무엇이 잘못되었는지 설명하세요.
2. 예상되는 행동 설명
3. 공유 콘솔 오류

이미지 사용

특히 프로그래밍을 몰라서 '정확하게 설명'할 수 없는 사용자를 위해 스크린샷을 업로드할 수 있는데, '정확하게 설명'한다는 것이 무슨 뜻인가요? 예를 들어 웹 페이지의 레이아웃에는 탐색 모음, 머리글, 바닥글 등이 있습니다. 이것이 기본이지만 더 복잡하고 전문적인 용어도 있습니다.

더 좋은 방법은 설명하는 방법을 배우는 것입니다 - 어렵지 않습니다. 차선책은 예를 들어 직접 참조할 수 있는 사진을 제공하는 것입니다:

열 사이의 드래그 앤 드롭을 지원하는 이 칸반 보드를 만들어 보세요. 판게아 dnd를 사용하여 열 사이의 카드 이동을 구현합니다.

스크린샷은 여러분의 상상력에 맡기세요. 문제를 제기할 뿐만 아니라 해결책의 방향을 가리키는 요구 사항을 제시하는 매우 전문적인 방법입니다. 프로그래밍 비즈니스에는 수년 동안 축적된 많은 모범 사례가 있습니다. 프로그래밍 방법을 모르더라도 일부 어휘의 의미는 알 수 있습니다. 이는 AI를 프로그래밍할 때 매우 유용합니다.

예를 들어 제 경우에는 바우 하우스, 멤피스, 몬드리안, 전에는 AI를 사용하여 작업을 도와 준 후 TA에게 명확한 지시를 내리고 약간의 학습을해야했습니다. 각 전문 분야마다 고양이와 쥐처럼 먼저 알아낼 수 있는 개념 체계가 있습니다.

여기서 또 다른 비결은 AI가 우리보다 더 많이, 더 깊이 알고 있는 경우가 많으며, 우리가 어떻게 물어봐야 할지 모르겠다면 AI에게 물어보면 AI가 답을 제시하고 우리는 더 명확한 학습 방향을 갖게 된다는 점입니다.

효과적인 피드백

우리가 요구할 때."개선해 주세요"라고 말하는 대신 "로그인 양식은 작동하지만 이메일 인증이 필요하고 비밀번호가 일치하지 않는 경우 오류 메시지가 개선되었습니다."라고 말하세요.

본질적으로는 여전히 AI에 더 명확한 피드백을 제공하는 방법에 관한 것입니다. 모델과 소통할 때 우리는 추상적에서 추상적으로, 구체적에서 구체적으로 말할 수 있습니다. 무엇을 물어봐야 할지 모를 때는 상호작용을 개선하자, 비전을 개선하자고 말할 수 있지만 이때는 다시 한 번 우리가 하는 일의 맥락을 명확히 하는 것이 중요하며, 맥락 키워드를 통해 모델은 최소한 평균 이상의 수준으로 상관관계를 파악할 수 있고 아마도 우리는 방향을 알 수 있을 것입니다.

제약 조건 설정 및 UI 업데이트

명확한 경계 정의:"표시되는 작업을 3개만 표시하도록 제한하는 할 일 목록 애플리케이션을 만듭니다. 현재 디자인 시스템을 유지하면서 추가/수정/삭제 기능을 포함하세요."

또 다른 예:"시각적 디자인만 업데이트되었습니다. 모든 기능과 API 호출은 동일하게 유지합니다. 모바일 레이아웃 개선에 집중합니다."시각적 개선을 강조하면서 변경할 필요가 없는 부분을 명확히 할 필요가 있습니다. 그리고 더 나아가

접근성 요구 사항

필요 사항 지정:"ARIA 레이블, 키보드 탐색 및 적절한 초점 관리 기능을 갖춘 로그인 양식 생성" - 이에 대한 지식이 어느 정도 있어야 할 수도 있습니다. 아는 것과 모르는 것의 차이는 아는 것과 모르는 것의 차이입니다.

인공지능 프로그래밍 시대에는 호기심과 탐구심이 좀 더 중요해지며, 아는 것과 모르는 것이 때로는 차이를 만들기도 합니다.

똥물에 빠진 다오, AI로 작업하는 것은 매우 간단합니다. 원래는 이러한 능력에 대해 더 많은 능력이있는 것처럼 화려하게 쓰고 싶었지만 점점 더 많이 사용할수록 경험할수록 단순하게 유지하고있는 그대로 제시하고 모든 사람에게 도움이되는 것이 좋다는 생각이 듭니다.

러블리에게 모든 작업을 기대할 필요는 없으며, 위의 방법을 시도했는데 러블이 개선되지 않는 것 같으면 커서가 들어옵니다.