Chuyển đến nội dung chính
Flowstep tạo màn hình UI từ prompt bằng ngôn ngữ tự nhiên, giúp bạn đi từ ý tưởng đến thiết kế trực quan chỉ trong vài giây. Dù bạn cần một màn hình để kiểm chứng một ý tưởng hay cả một bộ màn hình bao quát toàn bộ hành trình người dùng, một prompt được viết tốt là đủ để bắt đầu.

​
Tạo thiết kế

1

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

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

Viết prompt

Nhập mô tả về màn hình hoặc các màn hình bạn muốn. Hãy nêu rõ loại ứng dụng, mục tiêu của người dùng và nội dung bạn kỳ vọng sẽ thấy.
3

Chỉ định số lượng màn hình

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

Tạo

Gửi prompt. Flowstep tạo màn hình và hiển thị chúng trong trình chỉnh sửa, sẵn sàng để bạn xem lại hoặc tinh chỉnh.
Khi bạn tạo tệp mới và gửi prompt đầu tiên, Flowstep đặt tên cho tệp dựa trên prompt đó để bạn dễ tìm lại sau này. Tệp đã có tên — hoặc đã có prompt trước đó — sẽ giữ nguyên tên. Bạn có thể tự đổi tên bất kỳ tệp nào vào bất cứ lúc nào.

​
Dừng một lần tạo

Trong khi Flowstep đang phản hồi, nút gửi chuyển thành nút dừng (Stop Flowstep response). Nhấp vào nút này để dừng lần tạo. Trong yêu cầu nhiều màn hình, các màn hình đã hoàn tất vẫn nằm trên canvas, còn các màn hình chưa xong sẽ bị xóa. Nếu dừng sau khi Flowstep đã bắt đầu dựng màn hình, lần tạo vẫn sử dụng một tin nhắn — xem tin nhắn và giới hạn.

​
Một màn hình so với 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. Cả hai cách đề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 — phù hợp nhất để khám phá một trạng thái UI, thành phần hoặc ý tưởng cụ thể.
  • Nhiều màn hình — phù hợp nhất để vẽ luồng, so sánh các phương án bố cục hoặc bao quát nhanh toàn bộ hành trình người dùng.
Khi muốn nhiều màn hình, hãy nói rõ trong prompt. Flowstep dựa vào cách diễn đạt trong prompt để quyết định số màn hình cần tạo, nên các prompt chung chung thường chỉ trả về một màn hình. Các màn hình được tạo có tên là Screen 1, Screen 2, và tiếp tục như vậy. Hãy dùng các tên này để chỉ một màn hình cụ thể trong prompt tiếp theo.

​
Nhiều cách nhập prompt hơn

Văn bản 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), mỗi tệp tối đa 3 MB, vào prompt bằng cách kéo và thả, chọn từ bộ chọn tệp hoặc dán. Nhắc đến hình ảnh đính kèm trong prompt và Flowstep sẽ đưa nó vào các màn hình được tạo. Xem Sử dụng tài liệu tham khảo.
  • Đọc chính tả prompt — nhấp vào nút micro trong thanh prompt (hoặc nhấn Cmd+Shift+V trên Mac, Ctrl+Shift+V trên Windows) và nói tối đa 60 giây. Nội dung được chuyển thành văn bản sẽ được thêm vào sau những gì bạn đã nhập.
  • Để Flowstep tìm kiếm trên web — khi prompt yêu cầu (ví dụ: “clone trang giá của Stripe”), Flowstep có thể tìm kiếm trên web, đọc thương hiệu của trang — màu sắc, phông chữ, logo, thành phần UI — và dùng trong các màn hình được tạo. Flowstep tự quyết định có tìm kiếm hay không, nên không phải prompt nào cũng kích hoạt tính năng này. Lưu ý rằng các trang web được tái tạo sẽ dùng hình ảnh và điều hướng khác với bản gốc.
  • Đặt nguyên tắc thiết kế — xác định các quy tắc phong cách 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 prompt hiệu quả

Ví dụ prompt 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.” (Thiết kế màn hình đăng nhập di động cho ứng dụng theo dõi thể dục, gồm trường email và mật khẩu, nút đăng nhập và liên kết quên mật khẩu.)
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.” (Tạo nhiều màn hình cho luồng làm quen của ứng dụng giao đồ ăn — gồm chọn sở thích ẩm thực, nhập địa chỉ giao hàng và xác nhận đơn hàng đầu tiên.)
Ví dụ prompt toàn bộ hành trình: “Cover the full user journey in a expense reporting app, from submitting a receipt to manager approval.” (Bao quát toàn bộ hành trình người dùng trong ứng dụng báo cáo chi phí, từ việc gửi biên lai đến khi quản lý phê duyệt.)
Hãy ghi nhớ các nguyên tắc sau khi viết prompt:
  • Nêu rõ nền tảng (di động, máy tính để bàn, máy tính bảng) để Flowstep xác định đúng kích thước màn hình.
  • 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.
  • Đưa vào nội dung quan trọng như nhãn, hành động hoặc dữ liệu nếu chúng ảnh hưởng đến thiết kế.
  • Dùng các cụm như “tạo nhiều màn hình” hoặc “bao quát toàn bộ hành trình người dùng” để kích hoạt đầu ra nhiều màn hình.