Name: Cách Sử Dụng Claude Skills Với Vai Trò Nhà Thiết Kế (How to Use Claude Skills as a Designer)
Uploaded: 2026-03-19T01:44:58.000Z
Duration: 9 min 31 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

So there's a built in feature inside Claude that helps you generate beautiful designs, and

Nên có một tính năng tích hợp sẵn trong Claude giúp bạn tạo ra các thiết kế đẹp mắt, và

most designers don't even know that this exists.

hầu hết các nhà thiết kế còn không biết điều này tồn tại.

And in this video, I'm going to break down every single one that matters for designers how to build your own skill from scratch.

Và trong video này, tôi sẽ đi sâu vào từng cái quan trọng cho các nhà thiết kế, cách tự xây dựng skill của riêng bạn từ đầu.

And then I'm going to prove to you that these skills work by generating a beautiful landing page live.

Sau đó, tôi sẽ chứng minh cho bạn thấy những skill này hoạt động như thế nào bằng cách tạo một landing page đẹp mắt trực tiếp.

Think of it as like a simple plugin for Claude.

Hãy coi nó giống như một plugin đơn giản cho Claude.

It's a set of instructions and resources that completely changes how Claude approaches specific types of tasks.

Đó là một tập hợp các hướng dẫn và tài nguyên thay đổi hoàn toàn cách Claude tiếp cận các loại tác vụ cụ thể.

And the one that you need to know about first is the front end design skill.

Và cái bạn cần biết đầu tiên là front end design skill.

This skill is a set of detailed instructions that tells Claude how to think like a designer before it writes a single line of code.

Skill này là một bộ hướng dẫn chi tiết, chỉ cho Claude cách suy nghĩ như một nhà thiết kế trước khi nó viết bất kỳ dòng code nào.

When you ask Claude to build something, a landing page, a dashboard, a component, whatever it is, the skill kicks in and forces Claude through a design thinking process before it touches code.

Khi bạn yêu cầu Claude xây dựng một thứ gì đó, một landing page, một dashboard, một component, bất cứ thứ gì, skill này sẽ kích hoạt và buộc Claude trải qua một quy trình design thinking trước khi chạm vào code.

It considers four purpose, tone constraints and differentiation.

Nó xem xét bốn yếu tố: mục đích, ràng buộc về giọng điệu và sự khác biệt.

And here's the part that's blown me away the most.

Và đây là phần khiến tôi kinh ngạc nhất.

The skill has a section called front end Aesthetics Guidelines that reads like it was written by a senior product designer.

Skill này có một phần gọi là Front End Aesthetics Guidelines, đọc như thể được viết bởi một nhà thiết kế sản phẩm kỳ cựu.

It covers typography and not just pick some random font.

Nó đề cập đến typography, không chỉ đơn giản là chọn một font ngẫu nhiên.

It tells Claude to avoid generic fonts like Enter and Arial and instead choose distinctive characterful type pairings.

Nó yêu cầu Claude tránh các font chung chung như Enter và Arial, thay vào đó chọn các cặp font đặc trưng, có cá tính.

Then it also covers color, motion, spatial composition and atmosphere.

Sau đó, nó cũng đề cập đến color, motion, spatial composition và atmosphere.

Nhưng đây là điều quan trọng nhất.

The skill explicitly tells Claude what not to do.

Kỹ năng này chỉ rõ cho Claude những gì không được làm.

Nó cấm thẳng những gì nó gọi là AI slop.

Those overused purple gradients, the same rounded corner cards on white backgrounds and Enter font everywhere again.

Những purple gradients bị lạm dụng, những rounded corner cards giống hệt nhau trên white backgrounds và font Enter lại xuất hiện khắp nơi.

Và mọi nhà thiết kế đều đã thấy điều đó.

The skill is specifically designed to avoid that.

Kỹ năng này được thiết kế đặc biệt để tránh điều đó.

So just by having this one skill installed, you go from obviously AI generated output to something that actually looks designed.

Vì vậy, chỉ cần cài đặt kỹ năng này, bạn sẽ chuyển từ kết quả rõ ràng là do AI tạo ra sang thứ gì đó thực sự trông có thiết kế.

Nhưng đây mới chỉ là bước khởi đầu.

The front end design skill is the real headliner of this video.

Front end design skill là điểm nhấn thực sự của video này.

But there are a few other lesser known skills that are incredibly useful for designers.

Nhưng có một vài kỹ năng ít được biết đến khác cũng cực kỳ hữu ích cho các nhà thiết kế.

So let me walk you through these ones worth knowing about.

Vậy thì hãy để tôi giới thiệu cho bạn những cái đáng để biết.

This is an official skill from Figma, and it does exactly what it sounds like.

Đây là một kỹ năng chính thức từ Figma, và nó hoạt động đúng như tên gọi của nó.

You give it a Figma URL and it translates your design into production ready code as close as it can to one to one visual fidelity.

Bạn cung cấp cho nó một Figma URL và nó sẽ dịch thiết kế của bạn thành production ready code, cố gắng giữ nguyên visual fidelity nhất có thể.

You paste a Figma link into Claude for you, it would most likely be a screen you've designed.

Bạn dán một liên kết Figma vào Claude, đối với bạn thì đó có thể là một màn hình bạn đã thiết kế.

The skill parses the URL, pulls the file key and node ID and then calls the Figma MCP server To fetch the full design context.

Kỹ năng này phân tích URL, lấy khóa tệp và ID nút, sau đó gọi máy chủ Figma MCP để lấy toàn bộ ngữ cảnh thiết kế.

That means it's reading your actual layout properties, your auto layout settings, your typography specs, your color values, your spacing tokens, and

Điều đó có nghĩa là nó đọc các thuộc tính bố cục thực tế của bạn, cài đặt auto layout, thông số typography, giá trị color, token khoảng cách, và

mọi thứ khác có trong thiết kế của bạn.

Then it takes a screenshot of the design as a visual reference and downloads any assets like icons or images, and

Sau đó, nó chụp ảnh màn hình thiết kế làm tài liệu tham khảo trực quan và tải xuống bất kỳ tài sản nào như biểu tượng hoặc hình ảnh, và

But it's not just dumping out generic code.

Nhưng đó không chỉ là xuất ra mã chung chung.

The skill has a whole section on translating Figma output into your project's actual conventions.

Plugin này có cả một phần về việc dịch đầu ra Figma sang các quy ước thực tế của dự án của bạn.

So if your code base uses a specific component library or design system, it maps to that.

Vì vậy, nếu cơ sở mã của bạn sử dụng một thư viện component hoặc hệ thống thiết kế cụ thể, nó sẽ ánh xạ tới đó.

It reuses your existing buttons, inputs and typography components instead of recreating them.

Nó tái sử dụng các nút, input và component typography hiện có của bạn thay vì tạo lại chúng.

And at the end it runs a validation checklist, layout, typography, colors, interactive states, responsive behavior, accessibility, all compared against that one Figma screenshot.

Và cuối cùng, nó chạy một danh sách kiểm tra xác thực, bố cục, typography, màu sắc, trạng thái tương tác, hành vi đáp ứng, khả năng tiếp cận, tất cả đều được so sánh với ảnh chụp màn hình Figma đó.

Bây giờ, có một điều quan trọng cần lưu ý.

This skill requires the Figma MCP server to be connected, so before you use it, you'll need make sure that's enabled in Claude.

Plugin này yêu cầu máy chủ Figma MCP được kết nối, vì vậy trước khi sử dụng, bạn cần đảm bảo rằng nó đã được bật trong Claude.

It's the bridge that lets Claude actually read your Figma files.

Đó là cầu nối cho phép Claude đọc các tệp Figma của bạn.

And once that connection is set up, you're good to go.

Và sau khi kết nối đó được thiết lập, bạn đã sẵn sàng.

For designers who've ever given a screenshot to Claude, told it to turn it into code, and

Đối với các nhà thiết kế đã từng gửi ảnh chụp màn hình cho Claude, yêu cầu nó chuyển đổi thành mã, và

This skill is going to help close that gap, and

Skills này sẽ giúp thu hẹp khoảng cách đó, và

you don't need to be a developer to use it.

bạn không cần phải là lập trình viên để sử dụng nó.

Bạn dán một liên kết, Claude sẽ làm phần còn lại.

Theme Factory this Skill gives you 10 pre built professional themes.

Theme Factory Skills này cung cấp cho bạn 10 themes chuyên nghiệp được tạo sẵn.

Each one is a complete package with a curated color palette and carefully paired fonts.

Mỗi theme là một gói hoàn chỉnh với bảng màu được tuyển chọn và phông chữ được kết hợp cẩn thận.

Think of it like a design system starter kit, except it's not just for UI design.

Hãy coi nó như một bộ công cụ khởi động hệ thống thiết kế, ngoại trừ việc nó không chỉ dành cho thiết kế UI.

You can can apply any of these themes to slides, documents, web pages, dashboards or reports.

Bạn có thể áp dụng bất kỳ themes nào trong số này cho các slide, tài liệu, trang web, dashboard hoặc báo cáo.

Về cơ bản là bất kỳ sản phẩm nào Claude tạo ra.

So if you're building a presentation deck and you don't want to spend 20 minutes picking colors and fonts, you just pick a theme and everything stays consistent.

Vì vậy, nếu bạn đang xây dựng một bài thuyết trình và không muốn dành 20 phút để chọn màu sắc và phông chữ, bạn chỉ cần chọn một theme và mọi thứ sẽ nhất quán.

What I like about this one is that each theme has a distinct visual identity.

Điều tôi thích ở cái này là mỗi theme đều có một bản sắc hình ảnh riêng biệt.

Đây không chỉ là những sự kết hợp màu sắc ngẫu nhiên.

They're designed for specific contexts and audiences.

Chúng được thiết kế cho các ngữ cảnh và đối tượng cụ thể.

So you've got options that work for corporate presentations, creative pitches, editorial layouts and more.

Vì vậy, bạn có các lựa chọn phù hợp cho các bài thuyết trình doanh nghiệp, các buổi giới thiệu sáng tạo, bố cục biên tập và hơn thế nữa.

And because the themes include both header and body font pairings, you get great typographic hierarchy along with harmonious color palettes, brand guidelines.

Và vì các theme bao gồm cả sự kết hợp phông chữ tiêu đề và thân bài, bạn sẽ có được hệ thống phân cấp kiểu chữ tuyệt vời cùng với bảng màu hài hòa, hướng dẫn thương hiệu.

Cái này là về sự nhất quán, và

it's a concept that every in house or agency designer should pay attention to.

đó là một khái niệm mà mọi nhà thiết kế nội bộ hoặc đại lý nên chú ý.

This skill is set up with Anthropic's brand, their colors, typography and visual identity rules.

Kỹ năng này được thiết lập với thương hiệu của Anthropic, màu sắc, kiểu chữ và các quy tắc nhận diện hình ảnh của họ.

But the real value here isn't Anthropic's brand.

Nhưng giá trị thực sự ở đây không phải là thương hiệu của Anthropic.

Of course, because you don't work for Anthropic, you can still just use this skill as a template.

Tất nhiên, vì bạn không làm việc cho Anthropic, bạn vẫn có thể sử dụng kỹ năng này làm mẫu.

So think about what this skill actually does.

Vì vậy, hãy suy nghĩ xem kỹ năng này thực sự làm gì.

It takes a set of brand rules like hex codes, font stacks, spacing values, logo usage, tone, and

Nó áp dụng một bộ quy tắc thương hiệu như mã hex, bộ font chữ, giá trị khoảng cách, cách sử dụng logo, giọng điệu, và

enforces them automatically across everything.

tự động thực thi chúng trên mọi thứ.

Claude generates every artifact, every landing page, every deck comes out on brand without you having to check it.

Claude tạo ra mọi sản phẩm, mọi landing page, mọi bản trình bày đều tuân thủ thương hiệu mà không cần bạn kiểm tra.

Now imagine building one of these for your own company.

Bây giờ hãy tưởng tượng xây dựng một cái như thế này cho công ty của riêng bạn.

You take this skill as a reference, have Claude swap in your own brand tokens, your primary and secondary colors, your heading and body fonts, your spacing scale, your do's and don'ts, and

Bạn lấy kỹ năng này làm tham chiếu, để Claude thay thế bằng các token thương hiệu của riêng bạn, màu sắc chính và phụ, font chữ tiêu đề và nội dung, thang đo khoảng cách, những điều nên và không nên, và

suddenly Claude knows your brand just as well as Do.

đột nhiên Claude hiểu thương hiệu của bạn tốt như Do.

And this is especially powerful if you're on a small team where there's no dedicated design system person enforcing consistency.

Và điều này đặc biệt mạnh mẽ nếu bạn ở trong một nhóm nhỏ, nơi không có người chuyên về hệ thống thiết kế để đảm bảo tính nhất quán.

You could even share it with non designers on your team, marketing, sales, whoever, so that anything they generate in Claude automatically follows your visual standards.

Bạn thậm chí có thể chia sẻ nó với những người không phải là nhà thiết kế trong nhóm của bạn, bộ phận marketing, bán hàng, bất kỳ ai, để bất cứ thứ gì họ tạo ra trong Claude đều tuân thủ các tiêu chuẩn hình ảnh của bạn một cách tự động.

Realistically, connecting Claude to Figma via an MCP is going to get you more accurate results.

Thực tế, kết nối Claude với Figma qua MCP sẽ cho bạn kết quả chính xác hơn.

And if you'd like a video on how to do that, let me know in the comments.

Và nếu bạn muốn xem video hướng dẫn cách làm điều đó, hãy cho tôi biết trong phần bình luận.

But this skill is a quicker way to get UI that follows your desired style guidelines.

Nhưng kỹ năng này là một cách nhanh hơn để có được giao diện người dùng tuân theo các hướng dẫn phong cách mong muốn của bạn.

The skill itself is pretty simple to set up once you understand the format.

Bản thân kỹ năng này khá đơn giản để thiết lập khi bạn hiểu định dạng.

And I'll show you how to create one from scratch.

Và tôi sẽ chỉ cho bạn cách tạo một cái từ đầu.

Scratch in a minute, using the skill Creator Canvas Design.

Từ đầu trong một phút, sử dụng kỹ năng Creator Canvas Design.

This last one is different from everything else I've shown you.

Cái cuối cùng này khác với mọi thứ khác tôi đã cho bạn xem.

It's not for ui, it's for creating actual visual art, like posters, graphics, static design pieces as real PNG and PDF files.

Nó không dành cho giao diện người dùng, mà là để tạo ra các tác phẩm nghệ thuật thị giác thực sự, như áp phích, đồ họa, các thiết kế tĩnh dưới dạng tệp PNG và PDF thực.

And the way it works is genuinely unique.

Và cách nó hoạt động thực sự độc đáo.

First, Cloud creates a written design philosophy.

Đầu tiên, Cloud tạo ra một triết lý thiết kế bằng văn bản.

Giống như một bản tuyên ngôn thẩm mỹ thực sự.

It defines a visual movement, describes the principles behind it, the forms and colors and composition rules it'll follow.

Nó định nghĩa một phong trào thị giác, mô tả các nguyên tắc đằng sau nó, các hình thức, màu sắc và quy tắc bố cục mà nó sẽ tuân theo.

Then in step two, it takes that philosophy and expresses it on a canvas as a real image file.

Sau đó, ở bước hai, nó lấy triết lý đó và thể hiện nó trên một canvas dưới dạng tệp hình ảnh thực.

So it's designing from real principles, comes up with a creative direction, and

Vì vậy, nó thiết kế dựa trên các nguyên tắc thực, đưa ra một định hướng sáng tạo và

then executes it for things like event posters, social graphics, abstract art for presentations, or visual concepts you want to explore quickly.

sau đó thực hiện nó cho các thứ như áp phích sự kiện, đồ họa mạng xã hội, nghệ thuật trừu tượng cho bài thuyết trình, hoặc các ý tưởng trực quan bạn muốn khám phá nhanh chóng.

This is a really interesting tool and it won't replace Photoshop or Illustrator, because that isn't Claude's main use case.

Đây là một công cụ thực sự thú vị và nó sẽ không thay thế Photoshop hay Illustrator, vì đó không phải là trường hợp sử dụng chính của Claude.

But it does give you a way to explore visual directions in seconds in a way that you wouldn't otherwise be able to with Claude.

Nhưng nó cung cấp cho bạn một cách để khám phá các hướng trực quan trong vài giây theo cách mà bạn không thể làm được với Claude.

So between front end design and these other skills that I've showed you, you've got a complete creative toolkit inside Claude.

Vì vậy, giữa front end design và các skills khác mà tôi đã cho bạn xem, bạn có một bộ công cụ sáng tạo hoàn chỉnh bên trong Claude.

UI generation Figma to code theming, brand enforcement and visual art.

Tạo UI, chuyển đổi từ Figma sang code, áp dụng thương hiệu và nghệ thuật thị giác.