Name: 設計師如何運用 Claude Skills？ 🎨 (How to Use Claude Skills as a Designer)
Uploaded: 2026-03-19T01:44:57.000Z
Duration: 9 min 31 s

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

所以 Claude 裡面有一個內建功能，可以幫你產生很棒的設計，

程度副詞

most designers don't even know that this exists.

而且大多數設計師都不知道這個功能。

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.

在這個影片裡，我會為設計師們詳細介紹所有重要的 skills，以及如何從零開始建立你自己的 skill。

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

然後我會現場產生一個很棒的登陸頁面，來證明這些 skills 有效。

Think of it as like a simple plugin for Claude.

你可以把它想成是 Claude 的一個簡單插件。

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

它是一組指令和資源，可以完全改變 Claude 處理特定任務的方式。

And the one that you need to know about first is the 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.

這個技能是一組詳細的指令，告訴 Claude 在撰寫任何程式碼之前，如何像設計師一樣思考。

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.

當你要求 Claude 建立東西時，像是登陸頁面、儀錶板、組件，任何東西，這個技能就會啟動，並在 Claude 觸碰程式碼之前，引導它經歷一個設計思考流程。

It considers four purpose, tone constraints and differentiation.

它會考量四個目的、風格、約束和差異化。

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

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

這個技能有一個叫做前端美學指南的部分，讀起來就像是資深產品設計師寫的。

It covers typography and not just pick some random font.

它涵蓋了字體排印，而不僅僅是隨便挑一個字體。

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

它告訴 Claude 避免使用像 Enter 和 Arial 這種通用的字體，而是選擇有特色的字體配對。

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

然後它也涵蓋了色彩、動態、空間構圖和氛圍。

The skill explicitly tells Claude what not to do.

這個技能明確告訴 Claude 不能做什麼。

它直接禁止了它所謂的「AI 垃圾」。

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

那些過度使用的紫色漸層、白色背景上千篇一律的圓角卡片，還有到處都是 Enter 字體。

The skill is specifically designed to avoid that.

這個技能就是專門為了避免這種情況而設計的。

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

所以，只要安裝了這個技能，你的產出就會從明顯是 AI 生成，變成看起來有設計感的樣子。

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

前端設計技能才是這次影片的真正亮點。

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

不過還有其他幾個比較少人知道，但對設計師來說超有用的技能。

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

所以，讓我來帶大家看看這些值得知道的。

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

這是 Figma 的一個官方技能，功能就跟它的名字一樣。

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.

你給它一個 Figma 的 URL，它就會盡可能一比一地把你的設計翻譯成可上線的程式碼。

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

你把 Figma 的連結貼到 Claude 裡，對你來說，這很可能就是你設計的畫面。

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.

這個技能會解析 URL，抓取檔案金鑰和節點 ID，然後呼叫 Figma MCP 伺服器來取得完整的設計內容。

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

這表示它會讀取你實際的版面配置屬性、自動版面設定、字體排印規格、色彩數值、間距標記，還有

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

接著它會擷取設計的螢幕截圖作為視覺參考，並下載圖示或圖片等任何資產，然後

But it's not just dumping out generic code.

但它不只是輸出通用的程式碼。

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

這個技能有一個完整的區塊，能將 Figma 的輸出轉換成你專案的實際慣例。

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

所以如果你的程式碼基礎使用特定的組件庫或設計系統，它會對應到那裡。

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

它會重複使用你現有的按鈕、輸入框和字體排印組件，而不是重新創建它們。

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

最後它會執行一個驗證檢查表，包含版面配置、字體排印、色彩、互動狀態、響應式行為、無障礙性，所有這些都會與那張 Figma 螢幕截圖進行比較。

現在，有一件重要的事要注意。

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.

這個技能需要 Figma MCP 伺服器連線，所以在使用它之前，你需要確保在 Claude 中已啟用。

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

這是讓 Claude 能夠讀取你 Figma 檔案的橋樑。

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

一旦連線設定完成，你就可以開始使用了。

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

對於那些曾經給過 Claude 螢幕截圖，要它轉成程式碼，然後

This skill is going to help close that gap, and

這個技能將能幫助你縮小這個差距，而且

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

你不需要是開發者也能使用它。

你貼上一個連結，Claude 就會搞定剩下的。

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

這個技能「Theme Factory」會提供你 10 個預先建立的專業主題。

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

每個主題都是一個完整的套件，包含精選的色彩搭配和精心挑選的字體組合。

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

你可以把它想像成一個設計系統的入門工具組，而且它不只適用於 UI 設計。

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

你可以將任何一個主題應用在投影片、文件、網頁、儀錶板或報告上。

基本上，Claude 產生的任何成品都可以。

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.

所以，如果你正在製作一個簡報，不想花 20 分鐘挑選顏色和字體，你只要選一個主題，所有東西都會保持一致。

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

我喜歡這個主題的地方是，每個主題都有獨特的視覺識別。

They're designed for specific contexts and audiences.

它們是為特定情境和目標受眾設計的。

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

所以，你會找到適用於企業簡報、創意提案、編輯排版等的選項。

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

而且因為主題包含了標題和內文的字體配對，你同時能獲得絕佳的字體層次感以及和諧的色彩搭配、品牌指南。

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

這是每個內部或代理設計師都應該注意的概念。

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

這個技能是根據 Anthropic 的品牌、他們的色彩、字體排印和視覺識別規則設定的。

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

但這裡真正的價值並非 Anthropic 的品牌。

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

當然，因為你不是 Anthropic 的員工，你還是可以把這個技能當成一個範本。

So think about what this skill actually does.

所以想想看這個技能實際上做了什麼。

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

它會接收一套品牌規則，像是色碼、字體組合、間距值、Logo 使用、風格，還有

enforces them automatically across everything.

自動將這些規則套用到所有地方。

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

Claude 會產生每一個成品，每一個登陸頁面，每一個簡報都能符合品牌形象，不用你再檢查。

Now imagine building one of these for your own company.

現在想像一下為你自己的公司建立一個這樣的系統。

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

你可以參考這個技能，讓 Claude 換成你自己的品牌標記、你的主要和次要色彩、你的標題和內文字體、你的間距比例、你的規範和禁忌，然後

suddenly Claude knows your brand just as well as Do.

瞬間 Claude 就跟你一樣瞭解你的品牌了。

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

如果你的團隊很小，沒有專門負責設計系統的人來確保一致性，這點就特別有幫助。

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.

你甚至可以跟團隊裡非設計師的成員分享，像是行銷、業務，任何人，這樣他們在 Claude 裡產生的任何東西都會自動符合你的視覺標準。

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

實際上，透過 MCP 將 Claude 連接到 Figma 會讓你獲得更精確的結果。

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

如果你想要一個關於如何做到的影片，請在留言區告訴我。

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

但這項技能提供了一個更快速的方法，可以獲得符合你期望風格指南的使用者介面。

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

一旦你瞭解了格式，這項技能本身設置起來相當簡單。

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

我會教你如何從頭開始建立一個。

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

從頭開始，在一分鐘內，使用技能 Creator Canvas Design。

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

最後這個跟之前我展示的所有東西都不一樣。

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

它不是為了使用者介面，而是為了創作真正的視覺藝術，像是海報、圖形、靜態設計作品，以實際的 PNG 和 PDF 檔案呈現。

And the way it works is genuinely unique.

First, Cloud creates a written design philosophy.

首先，Claude 會建立一個書面的設計理念。

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

它定義一個視覺流派，描述其背後的原則、將遵循的形式、色彩和構圖規則。

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

然後在第二步，它會將這個理念呈現在畫布上，變成一個真實的圖像檔案。

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

所以這是從真實原則出發進行設計，確立一個創意方向，然後

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

再為活動海報、社群圖形、簡報用的抽象藝術，或是你想快速探索的視覺概念來執行。

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

這是一個非常有趣的工具，它不會取代 Photoshop 或 Illustrator，因為那不是 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.

但它能讓你以 Claude  otherwise 無法做到的方式，在幾秒鐘內探索視覺方向。

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

所以結合前端設計和我展示過的這些其他技能，你就在 Claude 裡擁有了一個完整的創意工具箱。

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

UI 生成 Figma 轉程式碼 主題化 品牌規範和視覺藝術。