Official程式設計與開發github.com

畫布設計

建立精美的視覺藝術作品,輸出為 .png 和 .pdf 檔案,並以設計理念為核心。當使用者要求創作海報、藝術品、設計或其他靜態作品時,應使用此技能。請創作原創的視覺設計,切勿抄襲現有藝術家。

畫布設計 是什麼?

此 AI 技能旨在將抽象的使用者輸入轉化為具體的視覺藝術品,遵循一套嚴謹的兩階段流程:首先建立一套設計理念(美學運動),然後在數位畫布上將其視覺化呈現。它專注於空間、形式、色彩與構圖,將文字的使用降至最低,僅作為視覺輔助元素,確保最終作品具有強烈的藝術性與原創性。 此技能的獨特之處在於其對「精湛工藝」的重複強調,要求最終作品看起來像是由頂尖專家耗費無數心力細緻打磨而成。此外,它還包含一個「解讀細微參考」的關鍵步驟,能將使用者提示中的深層或隱晦概念,巧妙地融入設計的 DNA 中,如同爵士樂手引用另一首歌的樂句,行家能心領神會,一般觀者也能欣賞其美感。 支援的平台包括任何能執行 AI 代理(如 Claude Code、Cursor)的環境。其運作方式是透過一系列的 .md、.pdf 和 .png 檔案來輸出。此技能特別適合用於創作海報、藝術品、品牌識別或任何需要高水準設計與原創性的靜態視覺作品,能產出媲美博物館等級的傑作。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anthropics/skills/tree/main/skills/canvas-design

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

以下是建立設計理念(美學運動)的指示,這些理念將被視覺化呈現。僅輸出 .md 檔案、.pdf 檔案和 .png 檔案。

請按兩個步驟完成:

  1. 建立設計理念(.md 檔案)
  2. 透過在畫布上創作來表達理念(.pdf 檔案或 .png 檔案)

首先,執行此任務:

設計理念建立

首先,建立一個視覺哲學(而非佈局或模板),該哲學將透過以下元素被詮釋:

  • 形式、空間、色彩、構圖
  • 影像、圖形、形狀、圖案
  • 將極簡文字作為視覺重點

關鍵理解

  • 收到的內容:使用者提供的一些細微輸入或指示,應作為基礎考量,但不應限制創作自由。
  • 建立的內容:一個設計理念/美學運動。
  • 接下來發生的事:然後,同一個實例會收到此理念並將其視覺化呈現——創作出的成品中,90% 是視覺設計,10% 是必要文字。

請考慮這種方法:

  • 為一個藝術運動撰寫宣言
  • 下一階段則涉及創作藝術作品

此理念必須強調:視覺表達、空間溝通、藝術詮釋、極簡文字。

如何產生一個視覺哲學

為運動命名(1-2 個詞):例如「粗獷主義的喜悅」/「色彩靜默」/「新陳代謝之夢」

闡述哲學(4-6 個段落——簡潔但完整):

為捕捉視覺精髓,請表達該哲學如何透過以下方面體現:

  • 空間與形式
  • 色彩與材質
  • 比例與節奏
  • 構圖與平衡
  • 視覺層級

關鍵指導原則:

  • 避免冗餘:每個設計面向應只提及一次。除非要增加新的深度,否則避免重複討論色彩理論、空間關係或字體排版原則。
  • 反覆強調工藝:此哲學必須多次強調,最終作品看起來應像是耗費無數小時創作、經過細心打磨、出自該領域頂尖專家之手。這個框架至關重要——請重複使用如「精心雕琢」、「深厚專業知識的產物」、「一絲不苟的關注」、「大師級執行力」等詞句。
  • 保留創作空間:對於美學方向要具體指明,但同時要足夠簡潔,讓下一個 Claude 有空間進行同樣高水準的詮釋與創作。

此理念必須引導下一個實例以視覺而非文字的方式表達想法。資訊存在於設計之中,而非段落之中。

哲學範例

「具體詩篇」 哲學:透過紀念碑式的形式與大膽幾何進行溝通。 視覺表達:巨大的色塊、雕塑般的字體(巨大的單詞、微小的標籤)、粗獷主義的空間分割、融合波蘭海報的活力與勒·柯比意的風格。透過視覺重量與空間張力(而非解釋)來表達想法。文字作為稀有而有力的姿態——永遠不是段落,只有與視覺建築融為一體的關鍵詞。每個元素的擺放都帶著大師級工匠的精準。

「色彩語言」 哲學:色彩作為主要的資訊系統。 視覺表達:幾何精準,色彩區域創造意義。字體極簡——微小的無襯線標籤,讓色域自行溝通。想像約瑟夫·亞伯斯的色彩互動理論與數據視覺化的結合。資訊透過空間與色彩進行編碼。文字僅用於錨定色彩已展現的內容。這是經過痛苦色彩校準的結果。

「類比冥想」 哲學:透過紋理與呼吸空間進行寧靜的視覺沉思。 視覺表達:紙張紋理、墨水暈染、廣闊的負空間。攝影與插畫佔主導地位。字體如耳語般出現(小、克制、服務於視覺)。日本攝影集美學。影像在頁面間呼吸。文字節制地出現——短語,而非解釋性段落。每個構圖都帶著冥想練習般的細心平衡。

「有機系統」 哲學:自然的聚類與模組化生長模式。 視覺表達:圓潤的形式、有機的排列、源自自然並經由建築轉化的色彩。資訊透過視覺圖表、空間關係、圖標展示。文字僅作為漂浮在空間中的關鍵標籤。透過專家的空間編排,由構圖訴說故事。

「幾何靜默」 哲學:純粹的秩序與克制。 視覺表達:網格精準、大膽的攝影或極簡圖形、戲劇性的負空間。字體精準但極簡——微小的必要文字,大片靜默區域。瑞士國際主義風格結合粗獷主義的材質誠實。結構本身溝通,而非文字。每一處對齊都是無數次精益求精的結果。

這些是濃縮的範例。實際的設計理念應包含 4-6 個充實的段落。

基本原則

  • 視覺哲學:建立一個將透過設計來表達的美學世界觀
  • 極簡文字:始終強調文字是稀疏的、僅為必要、作為視覺元素整合——絕不冗長
  • 空間表達:想法透過空間、形式、色彩、構圖來溝通——而非段落
  • 藝術自由:下一個 Claude 將以視覺方式詮釋此理念——請提供創作空間
  • 純粹設計:這是關於創作藝術物件,而非帶有裝飾的文件
  • 專家工藝:反覆強調最終作品必須看起來是精心雕琢、耗費心力、由頂尖領域專家花費無數小時的產物

設計理念應有 4-6 個段落。 用詩意的設計哲學填滿它,將核心願景融合在一起。避免重複相同的觀點。保持設計理念的通用性,不提及藝術的意圖,使其彷彿可隨處使用。將設計理念輸出為一個 .md 檔案。


解讀細微參考

關鍵步驟:在建立畫布之前,從原始請求中識別出細微的概念主線。

基本原則: 主題是一個微妙、小眾的參考,嵌入藝術品本身——不一定是字面上的,總是複雜的。熟悉該主題的人應該能直觀地感受到它,而其他人則只是體驗到一個大師級的抽象構圖。設計理念提供了美學語言。推導出的主題提供了靈魂——無聲的概念 DNA,不可見地編織進形式、色彩與構圖之中。

這點非常重要:參考必須經過精煉,使其在不明說的情況下增加作品的深度。想像一位爵士樂手引用另一首歌——只有懂的人會捕捉到,但所有人都能欣賞音樂。


畫布建立

在理念與概念框架都建立好之後,在畫布上將其表達出來。花點時間整理思緒、清空頭腦。使用所建立的設計理念與下面的指示來創作一件傑作,體現理念的各個面向,並展現精湛的工藝。

重要提示:對於任何類型的內容,即使使用者要求的是電影/遊戲/書籍相關的內容,方法仍應保持精緻。永遠不要忘記這應是藝術,而非卡通或業餘的東西。

為創作出博物館或雜誌級別的作品,請以設計理念為基礎。創建一個單頁、高度視覺化、以設計為導向的 PDF 或 PNG 輸出(除非要求更多頁面)。通常使用重複圖案和完美形狀。將抽象的理念設計當作科學聖經來對待,借用系統性觀察的視覺語言——密集的標記累積、重複的元素、或層層疊疊的圖案,透過耐心的重複建構意義,並獎勵持續的觀看。添加稀疏、臨床般的字體與系統性的參考標記,暗示這可能是一個想像學科的圖表,以對待記錄可觀察現象時同樣的敬畏來對待看不見的主題。用簡單的短語或細節低調地錨定作品,使用感覺有意識且統一的有限色彩調色盤。擁抱使用分析性視覺語言來表達關於人類經驗的想法的矛盾性:最終結果應像一件證明某些短暫事物可以透過仔細關注來研究、繪製和理解的人工製品。這是真正的藝術。

文字作為脈絡元素:文字始終是極簡且以視覺為先,但讓脈絡引導它應是輕聲的標籤還是大膽的字體姿態。龐克場地的海報可能會有比極簡陶瓷工作室品牌形象更大、更具侵略性的字體。大多數時候,字體應是纖細的。所有字體的使用都必須以設計為導向,並優先考慮視覺溝通。無論文字規模如何,沒有內容掉出頁面,也沒有內容重疊。每個元素都必須在畫布邊界內,並有適當的邊距。仔細檢查所有文字、圖形和視覺元素都有呼吸空間和清晰的區隔。這對於專業執行是無可妥協的。重要提示:如果書寫文字,請使用不同的字體。搜尋 ./canvas-fonts 目錄。無論採用何種方法,精緻度都是無可妥協的。

下載並使用任何需要的字體來實現這點。發揮創意,讓字體本身真正成為藝術的一部分——如果藝術是抽象的,將字體帶到畫布上,而不是數位排版。

為了突破界線,遵循設計直覺/本能,同時將設計哲學作為指導原則。擁抱終極的設計自由與選擇。將美學與設計推向最前沿。

關鍵:為了達到人類手工的品質(而非 AI 生成),創作看起來像花費了無數小時的作品。使其看起來像出自該領域絕對頂尖的專家之手,他們以一絲不苟的關懷對待每一個細節。確保構圖、間距、色彩選擇、字體——所有一切都在彰顯專家級的執行力。再次確認沒有任何重疊,格式完美無瑕,每個細節都完美。創作一些可以向人們展示以證明專業知識,並被認為無可否認地令人印象深刻的作品。

將最終結果輸出為一個可下載的 .pdf 或 .png 檔案,以及所使用的設計哲學 .md 檔案。


最終步驟

重要提示:使用者已經說過:「它還不夠完美。它必須純淨、是一件工藝傑作,彷彿即將在博物館中展出。」

關鍵:要精煉作品,避免添加更多圖形;相反地,精煉已建立的內容,使其極其清晰,完全尊重設計理念與極簡主義原則。與其添加有趣的濾鏡或重構字體,不如考慮如何讓現有構圖與藝術本身更一致。如果直覺反應是呼叫一個新函數或繪製一個新形狀,請停下來並問自己:「我如何讓已經存在的東西更像一件藝術品?」

進行第二次檢查。回到程式碼,進一步精煉/打磨,使其成為一件哲學設計的大師級作品。

多頁面選項

當被要求時,要建立額外的頁面,請沿著與設計理念相同的方向,但同時又有明顯不同的方式,建立更多創意頁面。將這些頁面打包在同一個 .pdf 中或多個 .png 中。將第一頁視為一本等待被填滿的精裝書中的一個頁面。讓接下來的頁面成為原頁面的獨特變奏與回憶。讓它們以非常優雅的方式幾乎講述一個故事。充分發揮創作自由。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists

anthropics/template-skill

Replace with description of the skill and when Claude should use it.

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

claude-api

|-

discernment-nudge

After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

docx

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

pptx

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

xlsx

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \

相關技能