제1장 서론
인공지능 프로그래밍(AI coding)은 현재의 유행 주제이지만, 단일 기능이 아니라 여러 방향으로 나뉩니다.
그중 하나의 방향은 UI 생성으로, 특히 웹페이지의 UI를 생성하는 것입니다.
UI 생성은 시각 디자인과 관련이 있으며, 전문적인 AI 도구가 필요합니다. 해외에는 이미 많은 유사 제품들이 있으며, 예를 들어 v0.dev、lovable.dev、bolt.new 등이 있습니다.
이들은 사용자의 텍스트 설명을 바탕으로 자동으로 웹페이지를 설계하고 생성하며, 배포 및 온라인 서비스를 제공할 수 있습니다.
나는 항상 이 UI 생성기들이 얼마나 유용한지 평가하고 싶었지만, 불행히도 유료 버전을 개통해야 완전한 경험(최신, 가장 강력한 모델 포함)을 할 수 있었다.
2. 두패오
지난 주에, 저는 자오위에 소속된두패오, 그리고 출시되었습니다UI 생성 기능, 웹 애플리케이션을 직접 생성할 수 있습니다.
공식은 특별히 "앱 창작 1.0"을 추가로 덧붙여서 당신이 주의하지 않을까 하고 걱정하는 것 같습니다.
이유는 아마도 하위의 DouBao 대형 모델이 발동했기 때문일 것 같습니다.1.6 버전, 코드 생성 능력이 크게 강화되었습니다. 공식홍보은 여러 테스트 세트에서 점수가 국제 최상위권에 속합니다.
호기심으로 간단한 평가를 했습니다. 이것은 완전 무료이며, 중국 사용자에게는 이 국산 도구가 해외 경쟁 제품보다 쉽게 사용할 수 있습니다.
3. 기본 기능
메뉴의 "AI 프로그래밍" 옵션을 클릭하면 프로그래밍 인터페이스로 들어갑니다. 큰 입력 상자와 몇 가지 예시가 있는 것입니다.
언제까지 말하지 말고, 바로 입력하겠습니다:
이커머스 사이트를 생성합니다.
시스템은 즉시 코드 생성 페이지로 전환되며, 왼쪽은 AI 대화창이고 오른쪽은 계속 롤링되는 웹 페이지 코드입니다 (아래 그림).
코드 생성이 완료되면 오른쪽이 생성된 웹 페이지 미리보기로 전환됩니다.
시각화를 위해 이 페이지를 공유합니다（오른쪽 상단의 "공유" 버튼을 클릭하세요）。
자기들 스스로 결과를 보세요（여기를 클릭）。
공지드리자면, 이것은 시스템이 직접 생성한 것이며, 저는 아무런 수정을 하지 않았습니다。
저는, 10자 미만의 입력으로 이런 웹페이지를 생성할 수 있다고 생각합니다, 괜찮다고 생각합니다，그래서 예상을 초과했습니다。
이 페이지는 사용할 수 있어 보이지만, 많은 세부 사항이 수정되어야 합니다。
四、시각적 편집
편집할 때, 저는, 두패오의 편집 기능이 매우 잘 만들어져 있었으며, 완전히 시각적 편집이며 코드를 모르는 사람도 쉽게 사용할 수 있었습니다。다른 경쟁 제품들은 이 정도로는 이루어지지 않았습니다。
豆包의 시각적 편집은 AI 편집과 수작업 편집으로 나뉩니다.
4.1 AI 편집
AI 편집은 왼쪽의 AI 상자에 직접 명령어를 입력하여 AI가 도와 편집하는 것입니다.
편집 과정은 다음 그림과 같으며, 제목을 선택하고 명령어 "표현을 개선하고 예술체로 변경"을 입력하면 즉시 적용됩니다.
하나의 명령어로 여러 곳을 수정할 수 있으며, 매번 수정할 때 시스템이 실시간으로 저장하므로 수동으로 저장할 필요가 없습니다.
4.2 수작업 편집
수작업 편집은 직접 프론트엔드에서 텍스트와 이미지를 직접 수정하는 것입니다.
먼저 상단의 "편집" 버튼을 클릭하여 편집 상태로 진입합니다.
그런 다음, 수정할 요소를 선택하여 편집합니다.
예를 들어, AI가 생성한 웹페이지의 이미지는 종종 일치하지 않아 교체해야 합니다.
위 그림에서, 사진은 블루투스 이어폰이어야 하지만, AI는 노트북 사진을 대신 배치했습니다. 교체해야 합니다.
편집 모드에서 이 사진을 선택하면 아래쪽에 편집 상자가 나타납니다.
그 안에는 세 가지 옵션이 있습니다.
- 지능 생성 이미지: AI가 이미지를 생성합니다.
- 하나의 클릭으로 검색: 시스템 이미지 라이브러리를 검색합니다.
- 로컬 교체: 로컬 이미지를 업로드합니다.
첫 번째 옵션인 "지능 생성 이미지"를 선택하고 "블루투스 이어폰"을 입력하면 AI가 생성한 블루투스 이어폰 이미지를 얻을 수 있습니다.
5. 텍스트를 웹페이지로 바로 변환
두패킹의 이번 업데이트에는 "텍스트를 웹페이지로 바로 변환" 기능도 있으며, 매우 유용하다고 생각합니다.
이는 긴 텍스트(회의록, 여행 가이드, 뉴스 보도, 논문 등)를 AI가 해석한 후 자동으로 웹페이지로 변환됩니다.
구체적으로 말해, 대화창 아래에는 기능 버튼들이 나란히 나열되어 있으며, 첫 번째 버튼이 바로 이번에 추가된 "텍스트를 초당 웹페이지로 변환"입니다
.
이 버튼을 클릭하면 입력란에 시스템 제안이 나타납니다:
"다음 내용을 분석하고 명확하고 아름다운 시각적 HTML 웹페이지로 변환하세요."
긴 텍스트를 이 제안 아래에 붙여넣으면 됩니다. 예를 들어, 연구 보고서를 붙여넣으면 AI는 내용을 요약하고 요약된 내용을 웹페이지로 생성합니다. 더 유용한 것은, 긴 텍스트를 AI로 생성할 수 있다는 점입니다. 구체적인 방법은 대화 인터페이스에서 AI로 긴 텍스트를 생성한 후, AI 프로그래밍으로 "위 내용을 HTML 웹페이지로 변환"이라는 명령어를 입력하는 것입니다.
예를 들어, 먼저 AI와 대화를 하고, "나에게 6월 한컨닝 3일 2박 여행 계획을 세워줘"라고 요청한다.
AI는 끊임없이 말을 하며 긴 글을 생성한다.（클릭하여 확인）그런 다음, AI 프로그래밍으로 전환하고 "위 정보를 상호작용 가능한 HTML 웹페이지로 변환해줘"라고 입력한다.
웹페이지가 생성된다（클릭하여 확인）.
이 기능 덕분에 AI의 콘텐츠 생성과 웹페이지 생성이 통합되었다.
그래서, 방법은 무한하다.
예를 들어, 회의 녹음 파일을 업로드하여 회의 기록 웹사이트를 생성하거나, 문헌을 업로드하여 콘텐츠 소개 웹사이트를 생성하거나, AI가 재무 보고서를 분석하여 선형 그래프와 프로세스 다이어그램 분석 웹사이트를 생성하도록 한다.__JHSNS_SEG_16e41eeb_82__
테스트해보니, 저는 두패이(Dupai)의 최근 웹페이지 생성 기능에 대해 좋은 인상을 받았습니다. 매우 유용하다고 느끼며, 완성도도 높아 유용한 도구입니다.
우선, 모델이 생성하는 페이지 효과는 제가 생각했던 것보다 좋아 사용 가능합니다.
다음으로, 시각적 편집 기능은 매우 유용하며, 조작이 편리하고 배우기 쉬워 초보자나 프로그래밍에 어려움을 겪는 프로젝트 매니저, 디자이너 등에게 적합합니다.
두패이 팀이 이 기능을 중점적으로 개발한 것은, 그들이 AI 프로그래밍 현황을 명확히 인지하고 있음을 보여줍니다: AI가 생성하는 페이지는 한 번에 이상적인 상태로 도달할 수 없으므로, 편집 기능을 잘 만들어 수정 및 최적화를 쉽게 할 수 있어야 합니다.
마지막으로, 해외 경쟁 제품과 비교했을 때, 이는 더 나은 현지화를 자랑합니다. 중국어 인터페이스와 사용법 안내 외에도, 생성되는 웹페이지 스타일은 명백히 현지화된 템플릿을 사용하고 있으며 해외 디자이너의 스타일이 아닙니다.
단점이라고 하면, JS 스크립트 능력이 아직 만족스럽지 않다는 점이 있겠네요. 몇몇 페이지의 상호작용 효과는 한 번에 성공하지 못하고, AI와 여러 번 수정해야 합니다.
결론적으로, 프론트엔드 애플리케이션 생성 측면에서 두패오의 AI 프로그래밍은 생산성이 높은 제품입니다. 디자인도 좋고 사용성도 뛰어나며, 무료라서 분들이 직접시도해보시면 좋겠습니다.
（끝）