VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:shader

Shader GLSL

Viết GLSL fragment shader cho texture thủ tục, hình SDF, gradient, noise, fBm, tiling, animation, WebGL, Three.js và hiệu ứng tạo sinh.

01

Định hình hiệu ứng

02

Đặt uniform

03

Chuẩn hóa tọa độ

04

Dựng primitive

Nguyên tắc 01

Fragment shader chạy cùng một chương trình độc lập cho từng pixel

Nguyên tắc 02

Tọa độ và tỉ lệ khung quyết định phần lớn độ đúng của hình

Nguyên tắc 03

Ngưỡng smooth cho đồ họa thủ tục mượt hơn cạnh cứng lởm chởm

Nguyên tắc 04

Hãy xếp lớp primitive, pattern và noise thay vì hardcode pixel

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

01

Khởi động

Đầu vào, phạm vi, route

  1. 1 Định hình hiệu ứng Xác định yêu cầu là texture, hình SDF, pattern, trường noise, animation, hiệu ứng WebGL hay shader Three.js.
  2. 2 Đặt uniform Dùng uniform chuẩn cho thời gian, độ phân giải và chuột; ánh xạ tên ShaderToy khi cần.
02

Xử lý

Agent / skill thực thi

  1. 3 Chuẩn hóa tọa độ Chuyển gl_FragCoord thành `st` chuẩn hóa, chỉnh tỉ lệ khung khi cần và giữ từng pixel thread không trạng thái.
  2. 4 Dựng primitive Ghép hình bằng distance, length, step, smoothstep, atan, dot, normalize, mix, clamp, fract và mod.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Xếp pattern và noise Thêm tiling, ma trận, đối xứng, domain warping, noise Perlin/simplex/cellular, Voronoi hoặc fBm để tăng độ phong phú thủ tục.
  2. 6 Tô màu và tạo chuyển động Dùng gradient RGB/HSB, đường mix, sóng sine, u_time và ngưỡng smooth để tạo chuyển động và độ mượt hình ảnh.
04

Đóng

Báo cáo, bàn giao, artifact

  1. 7 Thử trong viewer Chạy hoặc dán vào The Book of Shaders editor, glslViewer, glslCanvas, ShaderToy, WebGL hoặc ngữ cảnh Three.js.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:shader [effect or pattern]

Đối số

[effect or pattern] Bắt buộc

Hiệu ứng hoặc pattern

Brief shader bằng ngôn ngữ tự nhiên mô tả kết quả hình ảnh cùng hợp đồng graphics của host: version GLSL/WebGL, uniform, quy ước tọa độ, material hoặc texture input, chuyển động, giới hạn hiệu năng, nhu cầu fallback và bằng chứng compile hoặc render bắt buộc. Skill không khai báo flag hoặc output path cố định.

/ak:shader "Create a WebGL 1 fragment shader for a subtle animated marble background using the project's u_time and u_resolution uniforms. Keep motion slow, preserve text contrast, add a reduced-motion static path, and verify it in the existing preview without adding dependencies."

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Texture thủ tục Khuyến nghị 
/ak:shader animated marble texture with slow flowing veins
Dùng khi:
Dùng khi bạn cần GLSL cho texture dựa trên công thức như marble, gỗ, mây hoặc địa hình.
Kết quả:
Trả về logic fragment shader dựng từ tọa độ chuẩn hóa, noise hoặc fBm, gradient, animation u_time và đầu ra gl_FragColor.
Hình SDF 
/ak:shader pulsing neon circle field with smooth edges
Dùng khi:
Dùng khi hình ảnh nên được vẽ từ shape theo distance field thay vì asset ảnh.
Kết quả:
Tạo GLSL đo khoảng cách pixel, áp dụng ngưỡng step hoặc smoothstep, xếp lớp màu bằng mix và animate từng pixel không trạng thái.
Hiệu ứng kiểu ShaderToy 
/ak:shader ShaderToy-style cellular Voronoi energy field
Dùng khi:
Dùng cho hiệu ứng WebGL thủ tục phụ thuộc vào uniform kiểu thời gian, độ phân giải hoặc chuột.
Kết quả:
Nêu các uniform chuẩn, chuẩn hóa gl_FragCoord, kết hợp cellular hoặc Voronoi noise với tạo màu và ghi chú ánh xạ uniform ShaderToy.
Material Three.js 
/ak:shader fragment shader for a Three.js hologram material
Dùng khi:
Dùng khi tích hợp fragment shader tùy chỉnh vào material Three.js hoặc WebGL.
Kết quả:
Cung cấp mã shader và lựa chọn uniform hướng tích hợp cho độ phân giải, thời gian trôi qua và chuột tùy chọn, sẵn để đưa vào material.

Phạm vi xử lý

  • SDF cho circle, rectangle, polygon và star
  • Gradient RGB/HSB
  • Tiling và transform
  • Noise Perlin, simplex, cellular và Voronoi
  • fBm và turbulence
  • Uniform của ShaderToy và WebGL

Tiếp theo