Sao chép một mô hình SAAS trị giá tỷ đô la hoạt động hiệu quả - Phần 2 - Figma. Giờ đây khi Claude Opus 4.6 và Codex 5.3 đã có sẵn, tôi quyết định thử lại. Kết quả - CanvasKit Công cụ đã sử dụng - @windsurf Cascade & @OpenAI Codex CLI Lần chạy đầu tiên - 30 phút Tổng thời gian dành cho việc này (bao gồm cả các thao tác nhắc nhở bổ sung) - 3 giờ Tôi nghĩ đây có thể là một chỉ số mới để đánh giá mô hình - TTBS (thời gian để đạt được mô hình SAAS trị giá tỷ đô la 😂) Mã nguồn và chi tiết bên dưới:

Mã số: github.com/dabit3/canvaskit… Ứng dụng này không có đầy đủ các tính năng đa người dùng và cộng tác khiến Figma trở nên có giá trị đối với các nhóm, nhưng tôi cho rằng chỉ cần thêm một chút công sức, bạn có thể làm cho nó đạt được điều đó. Đặc trưng: Công cụ • Công cụ chọn (V) -- Nhấp chuột để chọn, Shift+nhấp chuột để chọn nhiều mục, kéo chuột để chọn vùng • Công cụ khung (F) -- Vẽ các nút chứa cắt các nút con, với nhãn hiển thị • Công cụ hình chữ nhật (R) -- Vẽ hình chữ nhật, giữ phím Shift để giới hạn thành hình vuông • Công cụ vẽ hình elip (O) -- Vẽ hình elip, giữ phím Shift để giới hạn thành Circle • Công cụ vẽ đường thẳng (L) -- Vẽ đường thẳng, giữ phím Shift để căn chỉnh theo góc 45 độ. • Công cụ Polygon -- Vẽ tam giác/đa giác • Công cụ hình ngôi sao -- Vẽ hình ngôi sao • Công cụ bút (P) -- Vẽ đường dẫn vector tự do • Công cụ văn bản (T) -- Nhấp chuột để chèn văn bản, nhấp đúp chuột để chỉnh sửa trực tiếp. • Công cụ cầm tay (H) -- Di chuyển khung vẽ bằng cách kéo • Công cụ thu phóng (Z) -- Nhấp chuột để phóng to, Alt+nhấp chuột để thu nhỏ Vải bố • Khung vẽ vô hạn với chức năng di chuyển (phím Space + kéo, chuột giữa hoặc công cụ Bàn tay) và phóng to/thu nhỏ (con lăn chuột) • Nền dạng lưới DOT khi thu nhỏ ở mức thấp và ẩn đi khi thu nhỏ dưới 15%. • Các thiết lập thu phóng sẵn có -- Thu phóng vừa khít (tính toán khung bao quanh), 50%, 100%, 200% • Nhãn kích thước -- Lớp phủ hình viên thuốc màu xanh hiển thị chiều rộng x chiều cao trong quá trình vẽ và điều chỉnh kích thước. • Hướng dẫn thông minh -- Các đường kẻ căn chỉnh xuất hiện khi các cạnh/tâm thẳng hàng với các đối tượng khác trong quá trình di chuyển • Tự động căn chỉnh kích thước -- Các cạnh đang hoạt động sẽ tự động căn chỉnh vào các cạnh của đối tượng lân cận trong quá trình thay đổi kích thước. • Con trỏ xoay tùy chỉnh -- Biểu tượng xoay SVG xuất hiện khi di chuột qua vùng xoay bên ngoài các điểm điều khiển lựa chọn. Lựa chọn và Biến đổi • Di chuyển -- Kéo các đối tượng đã chọn, với tính năng căn chỉnh thông minh. • Thay đổi kích thước -- 8 điểm điều khiển (góc + điểm giữa), có khả năng nhận biết xoay nên các điểm điều khiển hoạt động chính xác trên các đối tượng đã xoay. • Xoay -- Kéo chuột ra ngoài các góc của khung giới hạn, giữ phím Shift để xoay theo từng bước 15 độ. • Chọn nhiều đối tượng -- Nhấn Shift + chuột hoặc chọn hình chữ nhật • Các nút căn chỉnh -- Căn trái, giữa, phải, trên, giữa, dưới (có tác dụng khi chọn một đối tượng trên khung vẽ hoặc chọn nhiều đối tượng với nhau) • Phân bổ khoảng cách -- Phân bổ theo chiều ngang/chiều dọc (có sẵn khi chọn từ 3 đối tượng trở lên) Thiết kế giao diện (Bảng thuộc tính) • Biến đổi -- Nhập các giá trị X, Y, Chiều rộng, Chiều cao, Số xoay. • Bán kính góc -- Đồng nhất hoặc theo từng góc (TL, TR, BR, BL) với tùy chọn chuyển đổi • Độ mờ đục -- Thanh trượt 0-100% • Chế độ hòa trộn -- Bình thường, Nhân, Màn hình, Lớp phủ, Làm tối, Làm sáng, Làm sáng màu, Cháy màu, Ánh sáng mạnh, Ánh sáng dịu, Khác biệt, Loại trừ, Sắc độ, Độ bão hòa, Màu sắc, Độ sáng • Tô màu -- Thêm/xóa màu nền, màu đơn sắc, hiệu ứng chuyển màu tuyến tính hoặc chuyển màu xuyên tâm; điểm dừng chuyển màu được chọn bằng các công cụ chọn màu riêng biệt. • Đường viền -- Thêm/xóa đường viền, màu nền, độ dày có thể tùy chỉnh, căn chỉnh (Bên trong, Giữa, Bên ngoài); hỗ trợ đường viền văn bản • Hiệu ứng -- Thêm/xóa hiệu ứng: Đổ bóng, Bóng trong, Làm mờ lớp, Làm mờ nền; có thể cấu hình độ lệch X/Y, bán kính làm mờ, bật/tắt hiển thị. • Bảng chọn màu -- ô vuông HSV + thanh màu sắc + thanh độ trong suốt, nhập liệu hex, hiển thị RGB, 20 mẫu màu có sẵn • Công cụ chọn màu hệ điều hành -- Nút chọn màu hệ thống gốc cho cả màu nền và màu viền. Kiểu chữ (Các nút văn bản) • Bộ phông chữ -- Đã tải 20 phông chữ Google • Độ đậm của phông chữ -- từ 100 đến 900 • Kích thước phông chữ -- Nhập số • Chiều cao dòng -- Số hoặc Tự động • Khoảng cách giữa các chữ cái -- Số với bước 0,1 • Căn chỉnh văn bản -- Trái, Giữa, Phải, Căn đều hai bên (với các biểu tượng SVG riêng biệt) • Định dạng văn bản -- Không, Gạch chân, Gạch ngang (hiển thị trên khung vẽ và trong lớp phủ chỉnh sửa) • Chỉnh sửa trực tiếp -- Nhấp đúp chuột để chỉnh sửa văn bản trực tiếp trên khung vẽ với kiểu định dạng phù hợp. Bảng điều khiển lớp • Chế độ xem dạng cây của tất cả các đối tượng trên trang hiện tại • Kéo và thả để sắp xếp lại nhằm thay đổi thứ tự z • Công tắc hiển thị (biểu tượng con mắt) cho mỗi lớp • Nút khóa (biểu tượng khóa) cho mỗi lớp • Đổi tên trực tiếp -- Nhấp đúp vào tên lớp để đổi tên • Đồng bộ hóa vùng chọn -- Nhấp chuột vào một lớp sẽ chọn lớp đó trên khung vẽ và ngược lại. • Menu ngữ cảnh -- Nhấp chuột phải để xem các tùy chọn Tổ chức • Nhóm đối tượng -- Ctrl/Cmd+G để nhóm, Ctrl/Cmd+Shift+G để bỏ nhóm • Thứ tự Z -- Đưa lên trước, đưa ra sau, đưa lên đầu, đưa ra sau • Hỗ trợ nhiều trang -- Thêm, đổi tên, chuyển đổi và xóa trang Thao tác tệp • Tệp mới -- Đặt lại trình chỉnh sửa • Mở tệp -- Nhập tài liệu .canvas.json • Lưu tệp -- Xuất dưới dạng .canvas.json • Nhập ảnh -- Thông qua menu Tệp, kéo và thả hoặc dán từ clipboard; tự động điều chỉnh kích thước để phù hợp với khung nhìn • Tên tài liệu -- Có thể chỉnh sửa trong thanh công cụ Xuất khẩu • Lựa chọn định dạng -- PNG, JPG, SVG • Cài đặt chất lượng JPG • Bộ chọn tỷ lệ -- 0.5x, 1x, 2x, 3x, 4x • Xuất SVG -- Hỗ trợ văn bản, đường viền, xoay, đường thẳng và hình dạng. Persistence • Tự động lưu vào IndexedDB -- Độ trễ 500ms với thao tác ghi ngay lập tức khi trang được tải/đóng. • Tự động khôi phục -- Khôi phục phiên làm việc cuối cùng khi tải trang Phím tắt • Phím tắt công cụ -- V, F, R, O, L, T, P, H, Z • Chỉnh sửa -- Ctrl/Cmd+Z hoàn tác, Ctrl/Cmd+Shift+Z làm lại, Ctrl/Cmd+C sao chép, Ctrl/Cmd+V dán, Ctrl/Cmd+D nhân bản, Delete/Backspace xóa, Ctrl/Cmd+A chọn tất cả • Sắp xếp -- Ctrl/Cmd+G nhóm, Ctrl/Cmd+Shift+G bỏ nhóm, ] đưa lên trước, [ đưa ra sau • Chế độ xem -- Ctrl/Cmd+0 phóng to 100%, Ctrl/Cmd+1 thu nhỏ vừa màn hình, +/- phóng to/thu nhỏ • Lớp phủ trợ giúp phím tắt -- Nhấn ? để xem tất cả các phím tắt trong cửa sổ bật lên được phân loại. giao diện người dùng • Chủ đề tối -- Các bảng điều khiển tối màu theo phong cách Figma (#2c2c2c backgrounds) • Bảng điều khiển có thể thu gọn -- Chuyển đổi giữa bảng điều khiển bên trái (lớp) và bên phải (thuộc tính). • Thanh trạng thái -- Hiển thị số lượng lựa chọn, vị trí, kích thước, xoay, mức độ thu phóng và nút phím tắt. • Thông báo dạng pop-up -- Các tin nhắn tạm thời để người dùng phản hồi (lưu, nhập, lỗi) • Thanh công cụ với các biểu tượng SVG -- Được nhóm theo danh mục với các đường phân cách trực quan