하나.

박치기(버튼)coze.cn）일반적으로 字节 소속에서 가장 정의하기 어려운 제품입니다.

그것의 정의는 지능 에이전트(AI agent) 플랫폼으로, 다양한 AI 애플리케이션을 개발/실행할 수 있습니다.. 이는 AI가 할 수 있는 일은 모두 할 수 있다는 의미입니다.

하지만 AI는 계속 발전하고 있으므로, 단추의 모양도 계속 변화하고 있습니다.

처음에는 코딩을 위한 개발 플랫폼이었으나,워크플로우 모드그래픽 인터페이스에서 노드를 드래그하여 AI 워크플로우를 정의하고 애플리케이션을 생성합니다.

하지만 곧바로 다시 "를 발표했습니다.버튼 공간", 일반 사용자를 대상으로 자연어를 사용하여 내장된 다양한 지능체를 호출합니다.

저는 썼습니다.평가, 이를 사무 보조 도구로 사용하여 다양한 작업(PPT 생성, 여행 지도 계획, 연구 보고서 작성 등)을 완료할 수 있으며, 완전히 초보자 친화적인 작동 방식입니다.

그런데 생각지도 못했는데, 어제 발견했어요.버튼 공간은 웹 디자인을 추가하여 UI 도구가 되었는데, V0를 내장한 것 같습니다.

2.

V0가장 오래된 것도 있으며 현재 가장 유명한 웹 디자인/생성 AI 도구입니다. 사용자가 원하는 웹사이트를 설명하면 그것을 구현해 줍니다.

이번에, 꼬즈스페이스는 이 기능을 도입하여 자신에게 또 다른 제품 형태인 웹 디자인 도구를 추가했습니다.

지금은 이미 버튼 안에서 웹 개발을 할 수 있습니다. 또한, 무료 서비스이며 안드로이드 클라이언트(발표됨)와 iOS 클라이언트(발표 예정)가 있어 스마트폰에서 사용할 수 있습니다.

이 들으면 매력적일 것 같습니다. 저는 시도해 보았습니다. 예를 들어 스크린샷 복원과 웹사이트 생성, 특히 Figma 디자인 도면의 복원을 보고 그것이 정말로 가능한지 확인해 보았습니다.

이제 제 시험 후기입니다.

3. 스크린샷 복원

먼저 스크린샷 복원을 테스트했습니다. 웹페이지 스크린샷을 업로드하여 페이지를 작성하도록 합니다.

버튼의 웹 디자인 기능을 사용하려면 버튼 공간의 "웹" 버튼을 열어야 합니다.

저는 airbnb의 홈페이지 스크린샷(아래 그림)을 업로드하고 "이 스크린샷을 웹사이트로 복원"을 입력했습니다.

시스템은 3분에서 5분 동안 생각해야 하며, 코드는 페이지 오른쪽에서 스크롤하여 생성됩니다.

몇 분 후 코드가 생성되면, 미리보기 페이지로 전환하여 그것이 생성한 페이지가 바로 그 아래에 있습니다.

이것은 처음 생성된 결과로, 조정되지 않았으며, 제가 원형도가 충분히 잘 되어 있고, 페이지 구조와 각 영역이 올바르게 복제되었다고 생각합니다.

저는 공유했습니다 , 이 페이지와 전체 AI 대화를 클릭하면 선명한 효과를 볼 수 있습니다.

특히, 버튼이 생성된 것은 React + Tailwind 프로젝트로, 전체를 로컬에 다운로드하여 npm으로 실행할 수 있습니다. 이렇게 하면 후속 수작업이 비교적 편리합니다.

4. Figma 디자인 도면 복원

버튼 공간의 정말 강력한 포인트는 Figma 디자인 도면으로 웹페이지를 생성하는 것 입니다.

구체적인 방법은 먼저 알림창에서 아래쪽의 Figma 버튼을 클릭하는 것입니다.

웹사이트는 Figma 링크를 입력하라고 알립니다.

이 링크는 어떻게 얻을 수 있을까요? Figma 웹사이트의 작업 영역에서 페이지를 선택하고 우클릭 메뉴의 "복사/붙여넣기/선택 영역 링크 복사" (아래 그림)를 열면 됩니다.

저는 Figma 공식 웹사이트의 예시 파일을 선택하고 링크를 쿠팡 스페이스에 업로드했습니다. 모두들 쿠팡의 복원도를 보세요.

대체로 디자인 도면과 매우 가까워서 매우 높은 복원도를 보입니다. 따라서, 디자인 도면의 원본 파일이 있다면 AI 도구를 통해 손수 개발을 완전히 대체할 수 있습니다.

이는 고급 기능으로, 국내 다른 AI 도구에서는 보인 적이 없는 것 같고, V0에서도 유료입니다.

5. 시각적 편집

미리보기가 생성된 후, 코트 스페이스는 시각적 편집을 제공하여 수정하기 매우 편리합니다.

먼저 미리보기 인터페이스에서 "편집" 버튼을 엽니다.

그런 다음, 페이지 요소를 선택하면 AI 대화 상자가 튀어나오며, 자연어로 편집할 수 있습니다.

버튼을 선택한 후, 저는 AI가 버튼의 배경색을 녹색으로 변경하도록 요청했습니다(위 사진). 제출 후 코드가 다시 생성됩니다(아래 사진).

6. 초보자용 웹사이트 생성

이제 저는 자연어로 AI에게 요구사항을 설명하여 웹사이트를 생성하도록 합니다.

저는 Todos 애플리케이션을 생성하도록 요청했습니다.

"파란색 테마의 할 일 목록 앱을 만들고 편집 기능을 구현하라. 목록 작업을 편집할 수 있어야 한다."

버튼 공간에서는 페이지 디자인, 코드 작성, 서버 배포를 자동으로 완료하고 마지막으로 제공했습니다.아래의 효과。

이 페이지는 또한 배포할 수 있습니다접근 가능한 링크외부 사용자에게 공개합니다.

제 생각에는 효과가 매우 좋습니다. 모든 작업(추가 작업, 편집 작업, 삭제 작업)에서 오류가 발생하지 않았고, 한 번 생성하면 실행되며, 필요한 버튼도 모두 있습니다.

이건 정말 제 예상을 초과했어요. 버튼이 일반적인 작업에 대해 특별히 훈련을 받았나요?

이론적으로는 웹사이트 생성은 전문 지식이 필요 없으며, 초보자도 전체 웹사이트를 생성할 수 있습니다. 실제로도 그렇습니다. 오류가 발생하더라도 AI에 처리를 맡길 수 있습니다. 하지만 전제 조건은 간단한 상호작용의 웹사이트에만 해당하며, JS 스크립트로 복잡한 상호작용을 처리해야 한다면 AI가 해결할 수 없는 오류가 발생할 가능성이 높습니다.

7. 요약

위에 제시된 것은 초기 사용 감상입니다.

저는큥자스 공간의 웹 디자인 기능이 최근 출시되었지만, 완성도가 뛰어나다고 느꼈습니다.

그의 세 가지 주요 기능----디자인 도면/스크린샷 복원, 시각적 편집, 웹사이트 생성----이 매우 유용하며, 생성 품질은 완전히 수용 가능하며, 무료로 제공되므로 저는 매우 경쟁력 있다고 생각합니다.

그는 또한 몇 가지 사용 제한도 있습니다.

（1）명령줄 창이 없습니다입니다. UI가 필요 없이 백엔드 코드만 생성하도록 하려면 커맨드 라인이 제공되지 않아 테스트할 수 없습니다.

（2）GitHub 통합되지 않음입니다. 코드를 직접 GitHub와 동기화할 수 없어 로컬로 다운로드한 후 수동으로 GitHub에 푸시해야 합니다.

（3）복잡한 상태 관리에 적합하지 않음입니다. 강점은 UI 생성이지만, 복잡한 상태 관리와 상호작용 로직에는 적합하지 않습니다.

전반적으로, 이 업데이트는扣子空间을 더 유용하게 만들었습니다. 이전의 채팅 기능, 사무 기능 외에도 웹 페이지 디자인이 추가되어 실용성이 더욱 높아졌으며, 일반적인 UI 개발 작업(웹 페이지와 컴포넌트 생성, 프로토타입 디자인 완료)을 수행할 때 이를 고려할 수 있습니다.

（완）