本文へ移動
cccskills
無料GitHub で公開

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md4.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.

Complete this in two steps:

  1. Design Philosophy Creation (.md file)
  2. Express by creating it on a canvas (.pdf file or .png file)

DESIGN PHILOSOPHY CREATION

To begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through:

  • Form, space, color, composition
  • Images, graphics, shapes, patterns
  • Minimal text as visual accent

THE CRITICAL UNDERSTANDING

  • What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom.
  • What is created: A design philosophy/aesthetic movement.
  • What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text.

HOW TO GENERATE A VISUAL PHILOSOPHY

Name the movement (1-2 words): "Brutalist Joy" / "Chromatic Silence" / "Metabolist Dreams"

Articulate the philosophy (4-6 paragraphs - concise but complete):

To capture the VISUAL essence, express how the philosophy manifests through:

  • Space and form
  • Color and material
  • Scale and rhythm
  • Composition and balance
  • Visual hierarchy

CRITICAL GUIDELINES:

  • Avoid redundancy: Each design aspect should be mentioned once.
  • Emphasize craftsmanship REPEATEDLY: The philosophy MUST stress multiple times that the final work should appear as though it took countless hours to create, was labored over with care, and comes from someone at the absolute top of their field.
  • Leave creative space: Remain specific about the aesthetic direction, but concise enough that there's room for interpretive choices.

PHILOSOPHY EXAMPLES

"Concrete Poetry" Philosophy: Communication through monumental form and bold geometry. Visual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier.

"Chromatic Language" Philosophy: Color as the primary information system. Visual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization.

"Analog Meditation" Philosophy: Quiet visual contemplation through texture and breathing room. Visual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic.

CANVAS CREATION

With both the philosophy and the conceptual framework established, express it on a canvas. Use the design philosophy created and the instructions below to craft a masterpiece.

IMPORTANT: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur.

To create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output. Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible.

Text as a contextual element: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps.

CRITICAL: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail with painstaking care.

Output the final result as a single, downloadable .pdf or .png file, alongside the design philosophy used as a .md file.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

add-sub

無料

Subscribe to a skill event. Adds a subscription that injects context before or after a skill runs. Supports optional conditions at both insert-level (inherited by all subscriptions) and subscription-level (AND-stacked). Conditions include fileExists, gitBranch, envSet, envEquals, fileContains (with optional regex).

日本語の概要は準備中です。原文の説明を表示しています。

composio-community/awesome-claude-plugins1,9402026年7月26日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

composio-community/awesome-claude-plugins1,9402026年7月26日 更新

Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

日本語の概要は準備中です。原文の説明を表示しています。

composio-community/awesome-claude-plugins1,9402026年7月26日 更新

Analyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and automatically sends a personalized growth report to your Slack DMs.

日本語の概要は準備中です。原文の説明を表示しています。

composio-community/awesome-claude-plugins1,9402026年7月26日 更新

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

日本語の概要は準備中です。原文の説明を表示しています。

composio-community/awesome-claude-plugins1,9402026年7月26日 更新

help

無料

Show skill-bus overview, status, and available commands. Quick reference for all skill-bus features.

日本語の概要は準備中です。原文の説明を表示しています。

composio-community/awesome-claude-plugins1,9402026年7月26日 更新

composio-community のスキルをすべて見る

このスキルの問題を報告する