Official코딩 & 개발github.com

canvas-design

아름다운 시각적 예술을 .png 및 .pdf 문서로 제작하는 기술입니다. 디자인 철학을 바탕으로 포스터, 예술 작품, 디자인 등 정적 작품을 요청할 때 사용하세요. 기존 아티스트를 모방하지 않고 독창적인 시각 디자인을 창조합니다.

canvas-design란 무엇인가요?

이 스킬은 사용자 입력을 바탕으로 독창적인 디자인 철학(미학 운동)을 수립하고, 이를 시각적으로 표현하여 .md 파일과 .png 또는 .pdf 파일을 생성하는 AI 에이전트 전용 기술입니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 활용할 수 있으며, '시각적 철학 → 캔버스 표현'이라는 2단계 프로세스를 따릅니다. 1단계에서는 공간, 색상, 구성, 형태 등에 대한 미학적 원칙을 4-6문단의 선언문으로 작성하고, 2단계에서는 해당 철학을 바탕으로 미술관 또는 잡지 수준의 단일 페이지 시각 작품을 제작합니다. 특히 '숙련된 장인정신'을 강조하여 마치 수많은 시간을 들여 완성된 듯한 정교한 결과물을 목표로 하며, 텍스트는 최소화하고 시각적 요소에 집중합니다. 또한 사용자의 원래 요청에 담긴 미묘한 개념적 참조를 추론하여 작품에 은유적으로 녹여내는 독특한 접근법을 사용합니다.

지원 대상✓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에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

이것은 디자인 철학(미학 운동)을 만든 후 시각적으로 표현하기 위한 지침입니다. .md 파일, .pdf 파일, .png 파일만 출력합니다.

다음 두 단계로 완료하세요:

  1. 디자인 철학 생성 (.md 파일)
  2. 캔버스에 표현하여 생성하기 (.pdf 파일 또는 .png 파일)

먼저, 다음 작업을 수행하세요:

디자인 철학 생성

시작하려면 시각적 철학(레이아웃이나 템플릿이 아닌)을 만드세요. 이 철학은 다음을 통해 해석됩니다:

  • 형태, 공간, 색상, 구성
  • 이미지, 그래픽, 도형, 패턴
  • 시각적 악센트로서의 최소한의 텍스트

핵심 이해

  • 받는 것: 사용자의 미묘한 입력이나 지침으로, 이를 기반으로 삼되 창의적 자유를 제약하지 않아야 합니다.
  • 창조하는 것: 디자인 철학/미학 운동.
  • 이후 단계: 동일한 버전이 철학을 받아 시각적으로 표현합니다. 90% 시각 디자인, 10% 필수 텍스트로 구성된 결과물을 만듭니다.

다음 접근 방식을 고려하세요:

  • 예술 운동을 위한 선언문 작성
  • 다음 단계는 예술 작품 제작

철학이 강조해야 할 것: 시각적 표현. 공간적 소통. 예술적 해석. 최소한의 단어.

시각적 철학 생성 방법

운동 이름 짓기 (1-2단어): "브루탈리스트 조이" / "색채의 침묵" / "메타볼리스트의 꿈"

철학 정립하기 (4-6문단 - 간결하지만 완전하게):

시각적 본질을 포착하기 위해 철학이 다음을 통해 어떻게 드러나는지 표현하세요:

  • 공간과 형태
  • 색상과 재료
  • 규모와 리듬
  • 구성과 균형
  • 시각적 위계

중요 지침:

  • 중복 피하기: 각 디자인 측면은 한 번만 언급하세요. 색채 이론, 공간 관계, 타이포그래피 원칙에 대한 포인트를 새로운 깊이를 추가하지 않고 반복하지 마세요.
  • 장인정신 반복 강조: 철학은 최종 작품이 마치 수많은 시간이 걸려 세심하게 만들어진 것처럼 보여야 한다는 점을 여러 번 강조해야 합니다. "꼼꼼하게 제작된", "깊은 전문성의 산물", "고통스러울 정도의 세심함", "마스터 수준의 실행"과 같은 표현을 반복적으로 사용하세요. 이 프레이밍은 필수적입니다.
  • 창의적 공간 남기기: 미학적 방향에 대해 구체적이면서도 다음 클로드가 극도로 높은 장인정신 수준에서 해석적 선택을 할 수 있도록 충분히 간결하게 유지하세요.

철학은 다음 버전이 텍스트가 아닌 시각적으로 아이디어를 표현하도록 안내해야 합니다. 정보는 문단이 아닌 디자인에 있습니다.

철학 예시

"콘크리트 시" 철학: 기념비적인 형태와 대담한 기하학을 통한 소통. 시각적 표현: 거대한 색상 블록, 조각적 타이포그래피(큰 단일 단어, 작은 레이블), 브루탈리스트 공간 분할, 폴란드 포스터 에너지와 르 코르뷔지에의 만남. 아이디어는 설명이 아닌 시각적 무게와 공간적 긴장으로 표현됩니다. 텍스트는 드물고 강력한 제스처로 사용되며, 절대 문단이 아닌 시각적 건축물에 통합된 필수 단어만 사용합니다. 모든 요소는 마스터 장인의 정밀함으로 배치됩니다.

"색채 언어" 철학: 색상이 기본 정보 시스템입니다. 시각적 표현: 색상 영역이 의미를 창출하는 기하학적 정밀함. 타이포그래피는 최소화 - 작은 산세리프 레이블로 색채 필드가 소통하게 합니다. 요제프 알버스의 상호작용과 데이터 시각화의 만남. 정보는 공간적, 색채적으로 인코딩됩니다. 단어는 색상이 이미 보여주는 것을 고정하는 역할만 합니다. 고통스러울 정도의 색채 보정 결과물.

"아날로그 명상" 철학: 질감과 여백을 통한 조용한 시각적 명상. 시각적 표현: 종이 결, 잉크 번짐, 광활한 네거티브 공간. 사진과 일러스트레이션이 주를 이룹니다. 타이포그래피는 속삭임처럼(작고 절제되며 시각을 보조). 일본 포토북 미학. 이미지가 페이지 위에서 숨 쉽니다. 텍스트는 드물게 나타납니다 - 짧은 문구, 설명 블록은 없음. 각 구성은 명상 수련과 같은 세심함으로 균형을 이룹니다.

"유기적 시스템" 철학: 자연스러운 군집과 모듈식 성장 패턴. 시각적 표현: 둥근 형태, 유기적 배열, 건축을 통한 자연의 색상. 시각적 다이어그램, 공간 관계, 아이콘그래피를 통해 정보 표시. 텍스트는 공간에 떠 있는 주요 레이블에만 사용됩니다. 구성은 전문적인 공간 조율을 통해 이야기를 전달합니다.

"기하학적 침묵" 철학: 순수한 질서와 절제. 시각적 표현: 그리드 기반 정밀함, 대담한 사진이나 엄격한 그래픽, 극적인 네거티브 공간. 타이포그래피는 정확하지만 최소화 - 작은 필수 텍스트, 넓은 고요한 영역. 스위스 구성주의와 브루탈리스트 재료의 정직함. 구조가 소통하고, 단어는 소통하지 않습니다. 모든 정렬은 수많은 수정의 결과물입니다.

이것들은 축약된 예시입니다. 실제 디자인 철학은 4-6개의 충실한 문단이어야 합니다.

필수 원칙

  • 시각적 철학: 디자인을 통해 표현될 미학적 세계관을 만듭니다.
  • 최소한의 텍스트: 텍스트는 드물고 필수적이며 시각적 요소로 통합되어야 하며 절대 길지 않아야 함을 항상 강조합니다.
  • 공간적 표현: 아이디어는 공간, 형태, 색상, 구성을 통해 소통됩니다 - 문단이 아닙니다.
  • 예술적 자유: 다음 클로드가 철학을 시각적으로 해석합니다 - 창의적 여지를 제공하세요.
  • 순수 디자인: 장식이 있는 문서가 아닌 예술 대상을 만드는 것입니다.
  • 전문가 장인정신: 최종 작품이 꼼꼼하게 제작되고, 세심하게 다루어졌으며, 해당 분야 최고의 사람이 수많은 시간을 들인 결과물처럼 보여야 함을 반복해서 강조합니다.

디자인 철학은 4-6문단 길이여야 합니다. 핵심 비전을 통합하는 시적인 디자인 철학으로 채우세요. 동일한 포인트를 반복하지 마세요. 마치 어디에서나 사용될 수 있는 것처럼 예술의 의도를 언급하지 않고 디자인 철학을 일반적으로 유지하세요. 디자인 철학을 .md 파일로 출력하세요.


미묘한 참조 추론

중요 단계: 캔버스를 만들기 전에, 원래 요청에서 미묘한 개념적 실마리를 식별하세요.

필수 원칙: 주제는 예술 자체에 내장된 미묘하고 틈새적인 참조입니다 - 항상 문자 그대로는 아니며 항상 정교합니다. 주제를 아는 사람은 직관적으로 느끼는 반면, 다른 사람들은 단순히 마스터급 추상 구성을 경험합니다. 디자인 철학은 미학적 언어를 제공합니다. 추론된 주제는 영혼을 제공합니다 - 형태, 색상, 구성에 보이지 않게 짜여진 조용한 개념적 DNA입니다.

이것은 매우 중요합니다: 참조는 작품의 깊이를 알리지 않고 향상시키도록 정제되어야 합니다. 재즈 뮤지션이 다른 노래를 인용하는 것처럼 생각하세요 - 아는 사람만 알아차리지만, 모든 사람이 음악을 감상합니다.


캔버스 생성

철학과 개념적 프레임워크가 모두 확립되었으면, 캔버스에 표현하세요. 잠시 생각을 정리하고 마음을 비우세요. 생성된 디자인 철학과 아래 지침을 사용하여 걸작을 제작하고, 전문가 장인정신으로 철학의 모든 측면을 구현하세요.

중요: 모든 유형의 콘텐츠에 대해, 사용자가 영화/게임/책에 대한 것을 요청하더라도 접근 방식은 여전히 정교해야 합니다. 이것이 예술이어야 하며, 만화적이거나 아마추어적인 것이 아니라는 생각을 절대 놓치지 마세요.

박물관이나 잡지 수준의 작품을 만들려면 디자인 철학을 기초로 사용하세요. 단일 페이지, 매우 시각적이며 디자인 중심의 PDF 또는 PNG 출력물을 만드세요(더 많은 페이지를 요청하지 않는 한). 일반적으로 반복 패턴과 완벽한 도형을 사용하세요. 추상적인 철학적 디자인을 마치 과학적 성경처럼 다루며, 체계적 관찰의 시각적 언어를 차용하세요 - 인내심 있는 반복을 통해 의미를 쌓고 지속적인 감상을 보상하는 조밀한 표시 축적, 반복 요소, 또는 계층화된 패턴. 드물고 임상적인 타이포그래피와 체계적인 참조 마커를 추가하여 이것이 상상 속 학문의 다이어그램임을 암시하고, 보이지 않는 주제를 관찰 가능한 현상을 문서화하는 것과 동일한 존경심으로 다루세요. 의도적이고 일관성 있는 제한된 색상 팔레트를 사용하여 미묘하게 배치된 간단한 문구나 세부 사항으로 작품을 고정하세요. 인간 경험에 대한 아이디어를 표현하기 위해 분석적 시각 언어를 사용하는 역설을 수용하세요: 결과물은 세심한 주의를 통해 무언가 일시적인 것을 연구하고, 매핑하고, 이해할 수 있다는 것을 증명하는 유물처럼 느껴져야 합니다. 이것은 진정한 예술입니다.

맥락적 요소로서의 텍스트: 텍스트는 항상 최소화되고 시각적으로 우선하지만, 맥락이 속삭이는 듯한 레이블이나 대담한 타이포그래피 제스처 중 어떤 것을 사용할지 안내하게 하세요. 펑크 공연 포스터는 미니멀리스트 도자기 스튜디오 아이덴티티보다 더 크고 공격적인 서체를 가질 수 있습니다. 대부분의 경우, 서체는 얇아야 합니다. 모든 서체 사용은 디자인을 중심으로 하고 시각적 소통을 우선시해야 합니다. 텍스트 규모에 관계없이 아무것도 페이지에서 떨어지거나 겹쳐서는 안 됩니다. 모든 요소는 적절한 여백으로 캔버스 경계 내에 포함되어야 합니다. 모든 텍스트, 그래픽 및 시각적 요소에 여백과 명확한 분리가 있는지 주의 깊게 확인하세요. 이것은 전문적인 실행을 위한 협상 불가 사항입니다. 중요: 텍스트를 작성하는 경우 다른 서체를 사용하세요. ./canvas-fonts 디렉토리를 검색하세요. 접근 방식에 관계없이 정교함은 협상 불가입니다.

필요한 모든 서체를 다운로드하여 사용하세요. 타이포그래피를 예술 자체의 일부로 만들어 창의력을 발휘하세요 -- 예술이 추상적이라면 서체를 디지털로 조판하는 대신 캔버스 위에 가져오세요.

한계를 뛰어넘기 위해 철학을 지침 원칙으로 사용하면서 디자인 본능/직관을 따르세요. 궁극적인 디자인 자유와 선택을 수용하세요. 미학과 디자인을 최전선으로 밀어붙이세요.

중요: 인간이 제작한 품질(AI 생성이 아닌)을 달성하려면 수많은 시간이 걸린 것처럼 보이는 작품을 만드세요. 해당 분야 최고의 사람이 모든 세부 사항을 고통스러울 정도로 세심하게 다룬 것처럼 보이게 하세요. 구성, 간격, 색상 선택, 타이포그래피 - 모든 것이 전문가 수준의 장인정신을 드러내는지 확인하세요. 겹치는 것이 없는지, 형식이 완벽한지, 모든 세부 사항이 완벽한지 다시 확인하세요. 전문성을 입증하고 부인할 수 없을 정도로 인상적인 것으로 평가받을 수 있는 무언가를 만드세요.

최종 결과물을 사용된 디자인 철학(.md 파일)과 함께 단일 다운로드 가능한 .pdf 또는 .png 파일로 출력하세요.


최종 단계

중요: 사용자는 이미 "충분히 완벽하지 않습니다. 흠잡을 데 없고, 장인정신의 걸작이어야 하며, 마치 박물관에 전시될 것처럼 보여야 합니다."라고 말했습니다.

중요: 작품을 개선하려면 그래픽을 더 추가하지 말고, 대신 생성된 것을 다듬고 디자인 철학과 미니멀리즘 원칙을 완전히 존중하여 극도로 선명하게 만드세요. 재미있는 필터를 추가하거나 서체를 리팩터링하는 대신, 기존 구성을 예술과 더 응집력 있게 만드는 방법을 고려하세요. 새로운 함수를 호출하거나 새로운 도형을 그리는 것이 본능이라면 멈추고 대신 "이미 여기 있는 것을 어떻게 더 예술 작품으로 만들 수 있을까?"라고 자문하세요.

두 번째 패스를 수행하세요. 코드로 돌아가서 더 다듬고/연마하여 철학적으로 설계된 걸작으로 만드세요.

다중 페이지 옵션

요청 시 추가 페이지를 만들려면 디자인 철학과 동일한 라인을 따르면서도 뚜렷하게 다른 창의적인 페이지를 더 만드세요. 해당 페이지를 동일한 .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 \

관련 스킬