Skip to main content
Flowstep tạo các màn hình UI từ các prompts ngôn ngữ tự nhiên, cho phép bạn đi từ ý tưởng đến thiết kế trực quan chỉ trong vài giây. Cho dù bạn cần một màn hình duy nhất để xác thực một khái niệm hay một bộ đầy đủ các màn hình bao quát toàn bộ hành trình của người dùng, một prompt được viết tốt là tất cả những gì bạn cần để bắt đầu.

​
Tạo một design

1

Mở một dự án mới

Từ bảng điều khiển Flowstep của bạn, tạo một dự án mới hoặc mở một dự án hiện có nơi bạn muốn thêm các màn hình.
2

Viết prompt của bạn

Nhập mô tả của các màn hình bạn muốn. Hãy cụ thể về loại ứng dụng, mục tiêu của người dùng và nội dung bạn muốn xem.
3

Chỉ định bao nhiêu màn hình bạn muốn

Theo mặc định, Flowstep tạo một màn hình duy nhất. Nếu bạn muốn nhiều màn hình, hãy nói rõ ràng trong prompt của bạn — Flowstep có thể tạo tối đa 6 màn hình từ một prompt.
4

Tạo

Gửi prompt của bạn. Flowstep tạo các màn hình của bạn và hiển thị chúng trong trình chỉnh sửa, sẵn sàng để xem xét hoặc tinh chỉnh.

​
Một màn hình vs. nhiều màn hình

Bạn có thể tạo một màn hình hoặc tối đa 6 màn hình từ một prompt duy nhất. Cả hai cách tiếp cận đều phù hợp với các giai đoạn khác nhau của công việc thiết kế.
  • Một màn hình — tốt nhất để khám phá một trạng thái UI cụ thể, thành phần hoặc khái niệm tập trung.
  • Nhiều màn hình — tốt nhất để lập bản đồ các luồng, so sánh các tùy chọn bố cục hoặc bao quát toàn bộ hành trình của người dùng một cách nhanh chóng.
Khi bạn muốn nhiều màn hình, hãy rõ ràng trong prompt của bạn. Flowstep sử dụng từ ngữ của prompt để quyết định tạo bao nhiêu màn hình, vì vậy các prompt mơ hồ thường trả về một màn hình duy nhất. Các màn hình được tạo có tên là Screen 1, Screen 2, v.v. — sử dụng những tên này để tham chiếu đến một màn hình cụ thể trong các prompt tiếp theo.

​
Nhiều cách để prompt

Text không phải là đầu vào duy nhất. Bạn cũng có thể:
  • Đính kèm tệp — thêm hình ảnh (JPG, PNG, WEBP) hoặc tài liệu (PDF, MD, TXT) tối đa 3 MB mỗi cái vào prompt, thông qua kéo và thả, trình chọn tệp hoặc bằng cách dán. Tham chiếu một hình ảnh đính kèm trong prompt của bạn và Flowstep kết hợp nó vào các màn hình được tạo. Xem Sử dụng Tài liệu Tham khảo.
  • Diễn đạt prompt của bạn — nhấp vào nút mic trong thanh prompt (hoặc nhấn Cmd+Shift+V trên Mac, Ctrl+Shift+V trên Windows) và nói trong tối đa 60 giây. Bản ghi được thêm vào những gì bạn đã nhập.
  • Để Flowstep tìm kiếm trên web — khi prompt của bạn yêu cầu (ví dụ, “clone trang giá Stripe”), Flowstep có thể tìm kiếm trên web và đọc thương hiệu của một trang — màu sắc, phông chữ, logo, thành phần UI — và sử dụng nó trong các màn hình được tạo. Flowstep tự quyết định xem có nên tìm kiếm hay không, vì vậy nó sẽ không nhất thiết phải kích hoạt trên mọi prompt; lưu ý rằng các trang web được tạo lại sử dụng hình ảnh và điều hướng khác nhau so với bản gốc.
  • Đặt hướng dẫn thiết kế — xác định các quy tắc kiểu dáng cố định áp dụng cho mọi lần tạo trong tệp. Xem Nguyên tắc thiết kế.

​
Viết các prompts hiệu quả

Ví dụ prompt cho một màn hình: “Design a mobile login screen for a fitness tracking app with email and password fields, a sign-in button, and a forgot password link.”
Ví dụ prompt nhiều màn hình: “Generate multiple screens for a food delivery app onboarding flow—cover selecting cuisine preferences, entering a delivery address, and confirming the first order.”
Ví dụ prompt cho toàn bộ hành trình: “Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval.”
Hãy ghi nhớ những nguyên tắc này khi viết các prompts:
  • Đặt tên nền tảng (di động, máy tính để bàn, máy tính bảng) để Flowstep tạo kích thước màn hình chính xác.
  • Mô tả mục tiêu của người dùng, không chỉ các phần tử UI—Flowstep suy ra bố cục từ ý định.
  • Bao gồm nội dung chính như nhãn, hành động hoặc dữ liệu nếu chúng quan trọng đối với thiết kế.
  • Sử dụng các cụm từ như “generate multiple screens” hoặc “cover the full user journey” để kích hoạt đầu ra nhiều màn hình.