CSS Studio: Thiết kế thủ công, mã hóa tự động

Truy cập sớm

• Chỉnh sửa style, bố cục và nội dung trực tiếp trên trình duyệt.
• Tác nhân AI tự động ghi lại mọi thay đổi thành mã nguồn.

Từ các nhà phát triển của Motion.

Cách hoạt động

Thiết kế

• Thay đổi màu sắc, bố cục, style, chuyển đổi, hoạt ảnh và chỉnh sửa văn bản trực tiếp với bộ công cụ thiết kế đầy đủ.
• Hoạt động trên tất cả các trình duyệt.

Đồng bộ

• Gửi các thay đổi tới tác nhân AI cục bộ để tìm và áp dụng chỉnh sửa vào đúng tệp, bất kể trang web được xây dựng như thế nào.
• Hỗ trợ mọi framework hoặc CSS thuần túy.

Triển khai

• Tác nhân tự động viết mã. Kiểm tra sự khác biệt, cam kết và triển khai.
• Không cần sao chép-dán, không cần chuyển đổi ngữ cảnh.

Tính năng

Chỉnh sửa trên trang

• Công cụ thiết kế ngay trên trang web của bạn. Sử dụng các điều khiển trực quan để chỉnh sửa bố cục, style, sau đó gửi cập nhật trực tiếp tới tác nhân AI cục bộ để triển khai.

div.app 

main.content 

section.hero 

h1.title 

p.subtitle 

div.actions 

section.features 

footer 

Layout 

Display flex 

Direction column 

Padding 32px 

Gap 16px 

Styles 

Background #1a1a2e 

Border Radius 12px 

Opacity 1 

Text 

Font Size 22px 

Weight 600 

Color #ffffff 

Dòng thời gian hoạt ảnh

• Điều chỉnh hoạt ảnh @keyframes trên dòng thời gian trực quan. Thêm, di chuyển, chỉnh sửa và xoá keyframes, đồng thời thay đổi thời gian, độ trễ, hướng và easing - bao gồm cả CSS springs.

Biến CSS

• CSS Studio phát hiện biến CSS có sẵn trên một phần tử. Chỉnh sửa biến và nhìn chúng lan toả trên toàn bộ trang. Áp dụng biến vào style với một cú nhấp chuột.

Biến 

Màu sắc 

--primary #8473f5 

--background #1a1a28 

--surface #222236 

--accent var(--demo-accent) 

--text #e0e0f0 

Số 

--radius 8px 

--spacing 16px 

--max-width 1200px 

Khác 

--font-body "Inter", sans-serif 

--ease-out cubic-bezier(0.4, 0, 0.2, 1) 

Chỉnh sửa DOM

• Thêm phần tử, đổi tên thẻ, sắp xếp lại bằng kéo-thả, sao chép và xóa. Nhấp đúp chuột để chỉnh sửa văn bản in-place.

Easing lò xo

• Thiết kế các lò xo với một trình chỉnh sửa đường cong trực quan. CSS Studio sử dụng Motion để tạo các lò xo CSS thật sự.

Trình chỉnh sửa gradient

• Xây dựng gradient tuyến tính, hình tròn và hình nón với một công cụ trực quan quen thuộc. Thêm, di chuyển và xóa điểm dừng màu.

Trình chọn màu

• Chọn màu bằng trình chọn HSL/RGB trực quan, nhập mã hex, công cụ mắt và điều khiển kênh alpha.

Bắt đầu chỉnh sửa CSS trực quan.

• Mua một lần. Bao gồm tất cả các bản cập nhật trong tương lai.
• $99