mcpField
D
designing-canvas-art

designing-canvas-art

github.com/osmontero创意与媒体1683 次安装今天更新
代码仓库

关于 designing-canvas-art

用于构建设计理念并将其表达为画布作品的技能。它指导 Agent 编写理念文档并制作单页 PDF 或 PNG,同时检查布局、文字和结果的可复现性。

主要功能

  1. 01撰写视觉设计理念
  2. 02从请求提炼隐含主题
  3. 03输出单页 PDF 或 PNG
  4. 04按规范检查渲染与边距
  5. 05使用随机种子保证复现

适用场景

  1. 01将抽象概念转为视觉方向
  2. 02制作单页画布艺术作品
  3. 03检查文字与图形的溢出和重叠

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/osmontero/opencode-skills --skill designing-canvas-art

安装后在 Claude Code 中输入/designing-canvas-art确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

LICENSE.txt
canvas-fonts/
ArsenalSC-OFL.txt
BigShoulders-OFL.txt
Boldonse-OFL.txt
BricolageGrotesque-OFL.txt
CrimsonPro-OFL.txt
DMMono-OFL.txt
EricaOne-OFL.txt
GeistMono-OFL.txt
Gloock-OFL.txt
IBMPlexMono-OFL.txt
InstrumentSans-OFL.txt
Italiana-OFL.txt
JetBrainsMono-OFL.txt
Jura-OFL.txt
LibreBaskerville-OFL.txt
Lora-OFL.txt
NationalPark-OFL.txt
NothingYouCouldDo-OFL.txt
Outfit-OFL.txt
PixelifySans-OFL.txt
PoiretOne-OFL.txt
RedHatMono-OFL.txt
Silkscreen-OFL.txt
SmoochSans-OFL.txt
Tektur-OFL.txt
WorkSans-OFL.txt
YoungSerif-OFL.txt
references/
rendering.md

详细介绍


这些说明用于创作设计哲学——即以视觉形式表达的美学运动。输出仅限 .md 文件、.pdf 文件和 .png 文件。

分两步完成:

  1. 创建设计哲学(.md 文件)
  2. 在画布上将其视觉化(.pdf 文件或 .png 文件)

首先,完成以下任务:

创建设计哲学

首先,创作一种视觉哲学(不是布局或模板),并通过以下方式诠释:

  • 形态、空间、色彩、构图
  • 图像、图形、形状、图案
  • 作为视觉点缀的极少文字
关键理解
  • 收到的内容:用户提供的一些细微输入或说明,应予以考虑并作为基础,但不应限制创作自由。
  • 创作的内容:一种设计哲学/美学运动。
  • 接下来会发生什么:然后,下一位 Agent 会收到这一哲学,并将其视觉化表达——创作出视觉设计占 90%、必要文字占 10% 的作品。

可以采用以下思路:

  • 为一场艺术运动撰写宣言
  • 下一阶段则是创作艺术作品

这一哲学必须强调:视觉表达、空间传达、艺术诠释、极少文字。

如何创作视觉哲学

为这场运动命名(1-2 个词):“野性欢愉”/“色彩静默”/“代谢之梦”

阐述哲学(4-6 段——简洁而完整):

为捕捉其视觉本质,说明这一哲学如何体现在以下方面:

  • 空间与形态
  • 色彩与材质
  • 尺度与节奏
  • 构图与平衡
  • 视觉层级

关键准则:

  • 避免冗余:每个设计要素只提一次。避免反复说明色彩理论、空间关系或字体原则,除非能为其增添新的深度。
  • 反复强调工艺:这一哲学必须多次强调,最终作品应呈现出仿佛历经无数小时创作、经过悉心打磨,并出自领域顶尖人才之手的效果。必须反复使用诸如“精心雕琢”“深厚专业造诣的结晶”“悉心打磨”“大师级执行”等表述。
  • 留出创作空间:明确美学方向,同时保持简洁,让下一位 Agent 也能在极高工艺水准上自由诠释。

这一哲学必须引导下一版以视觉而非文字表达理念。信息应融于设计之中,而非段落之中。

哲学示例

“具象诗歌” 哲学:通过宏大的形式与大胆的几何形状进行沟通。 视觉表达:大面积色块、雕塑般的字体(巨大的单个词语、微小的标签)、粗野主义空间划分,融合波兰海报的活力与勒·柯布西耶的风格。通过视觉重量与空间张力表达理念,而非解释。文字是罕见而有力的表达——绝不使用段落,只呈现融入视觉架构的必要词语。每个元素都以大师级匠人的精准度安置。

“色彩语言” 哲学:以色彩作为主要的信息系统。 视觉表达:通过色彩区域传达意义的几何精度。字体极简——小号无衬线标签,让色彩区域负责沟通。想想约瑟夫·阿尔伯斯的色彩互动与数据可视化的结合。信息通过空间和色彩编码。文字只用于锚定色彩已展现的内容。成品体现了精心细致的色彩校准。

“模拟冥想” 哲学:通过质感与留白,营造静谧的视觉沉思。 视觉表达:纸张纹理、墨迹晕染、大面积留白。摄影与插画占据主导。字体轻声低语(小巧、克制,服务于视觉)。日本摄影书美学。图像在页面间舒展呼吸。文字少量出现——简短语句,绝不使用解释性文本块。每个构图都像冥想练习一样精心平衡。

“有机系统” 哲学:自然聚集与模块化生长模式。 视觉表达:圆润形态、有机布局,以及从自然中汲取灵感、经建筑转化的色彩。通过视觉图表、空间关系和图标传递信息。文字仅用于空间中浮现的关键标签。构图通过专业的空间编排讲述故事。

“几何静默” 哲学:纯粹的秩序与克制。 视觉表达:基于网格的精密布局、大胆的摄影或鲜明的图形,以及戏剧化的留白。字体精准而极简——小巧而必要的文字、大面积宁静区域。瑞士形式主义与粗野主义的材料本真性相遇。由结构传达,而非文字。每处对齐都凝聚了无数次打磨。

这些是精简示例。实际的设计哲学应包含 4–6 个充实的段落。

核心原则
  • 视觉哲学:创作一种通过设计表达的美学世界观
  • 极简文字:始终强调文字应稀少、仅包含必要内容,并作为视觉元素融入设计——绝不冗长
  • 空间表达:通过空间、形式、色彩和构图传达理念,而非段落
  • 艺术自由:由接下来的 Agent 从视觉角度诠释这一哲学——提供创作空间
  • 纯粹设计:这是在创作艺术品,而非装饰性文档
  • 精湛工艺:反复强调,最终作品必须精雕细琢、倾注心血,仿佛由业内顶尖人士耗费无数小时打造

**设计哲学应有 4–6 个段落。**以富有诗意的设计哲学阐述核心愿景。避免重复相同观点。设计哲学应保持通用,不提及艺术创作的意图,使其适用于任何场景。将设计哲学输出为 .md 文件。

推断隐晦的指涉

关键步骤:在创建画布之前,先从原始请求中识别出隐晦的概念线索。

核心原则: 主题是嵌入在艺术作品本身中的、隐晦而小众的指涉,不一定是字面的,但必定是精巧的。熟悉该主题的人应能直观地感受到它,而其他人只会体验到一幅精湛的抽象构图。设计理念提供美学语言,推断出的主题则提供灵魂,即悄然融入形式、色彩与构图之中的安静概念基因。

这一点非常重要:指涉必须经过打磨,以增强作品的深度,而不能刻意张扬。就像爵士乐手引用另一首歌曲的旋律:只有懂的人才会听出来,但所有人都能欣赏音乐本身。


画布创作

既已确立理念与概念框架,就将它呈现于画布之上。花点时间整理思绪、平复心绪。运用创立的设计理念和以下说明,精心打造一件杰作,以精湛技艺体现理念的方方面面。

重要:任何类型的内容都应采用成熟精致的创作方式,即使用户要求创作与电影、游戏或书籍相关的内容也不例外。始终牢记,这应当是一件艺术作品,而不是卡通风或业余之作。

若要创作出具有博物馆或杂志水准的作品,就以设计理念为根基。创作一页式、高度视觉化、设计感鲜明的 PDF 或 PNG 作品(除非用户要求多页)。通常应运用重复图案和精确的几何形状。将抽象的哲学设计视作一部科学圣经,借鉴系统观察的视觉语言——通过密集累积的笔触、重复元素或层叠图案,耐心地反复构建意义,并让观者在长久凝视中有所收获。搭配疏朗、冷静的字体和系统化的标记,让作品仿佛出自某门想象中的学科;以记录可观察现象时通常采用的敬意,来对待不可见的主题。以简短的短语或细节为作品定锚,巧妙安置其中,并采用克制而统一、经过精心斟酌的色彩方案。拥抱这样一种悖论:以分析性的视觉语言表达关于人类经验的理念。最终作品应如同一件文物,证明短暂易逝的事物也能通过细致观察加以研究、绘制和理解。这才是真正的艺术。

文字作为语境元素:文字始终应简约,以视觉呈现为先,但具体采用轻声细语的标签还是大胆鲜明的字体表现,应由语境决定。朋克场地的海报或许比极简主义陶艺工作室的视觉形象更适合使用大号、更具冲击力的字体。大多数情况下,字体应纤细。所有字体的运用都必须具有设计感,并优先服务于视觉传达。无论文字大小,都不能超出页面边界,也不能彼此重叠。每个元素都必须完整置于画布范围内,并留出适当边距。仔细检查所有文字、图形和视觉元素,确保它们有足够的留白,彼此清晰分隔。这是专业执行不可妥协的要求。重要:如需书写文字,请使用不同的字体。搜索 canvas-fonts/ 目录。无论采用何种方式,精致感都不可妥协。

下载并使用所需字体,让这一切成为现实。发挥创意,让字体真正成为艺术的一部分——如果作品是抽象的,就把字体带到画布上,而不是仅仅以数字排版呈现。

若要突破边界,就在以理念为指引的同时,遵循设计本能与直觉。尽情挥洒设计自由,自主做出选择。推动美学与设计迈向前沿。

关键要求:为了达到人工创作的品质(而非 AI 生成的效果),作品应呈现出耗费无数工时精心打磨的质感。要让人觉得,这件作品出自领域顶尖创作者之手,每个细节都经过了煞费苦心的雕琢。反复检查构图、间距、色彩选择、字体排版——一切都必须尽显专家级水准。确保没有任何重叠,格式无懈可击,每个细节都臻于完美。创作出一件能够向他人证明专业实力、令人无可置疑地赞叹的作品。

将最终成果输出为单个可下载的 .pdf 或 .png 文件,并附上所用设计理念的 .md 文件。

如何真正渲染

编写任何绘图代码前必须阅读: references/rendering.md。该文档涵盖渲染器选择、画布几何尺寸和 DPI、边距约定、加载随附的 canvas-fonts/ 字体、系统化的笔触绘制、颗粒感与润饰,以及验证流程。

决定输出是否专业的三条规则:

  1. 为随机数生成器设定种子。 rng = random.Random(7),并在理念 .md 中记录种子。无法复现的作品无法打磨,而打磨正是下文第二轮工作的全部内容。
  2. 放置文字前先测量。 计算边界框,并断言它位于安全区域内(短边约为 8.5%)。只有经过检查,而非仅凭意图,才能确保“没有内容超出页面,也没有内容相互重叠”。
  3. 重新读取渲染后的图像并查看。 重叠、溢出、拥挤和值结构混浊,都能在渲染图中看见,却无法从代码中察觉。检查墨迹覆盖率是否在 8-35% 范围内,并以缩略图尺寸查看——出色的构图在 200px 下依然清晰可辨。

最后一步

重要: 用户已经说过“还不够完美。它必须无瑕,堪称工艺杰作,仿佛即将陈列在博物馆里。”

关键: 要打磨作品,请避免添加更多图形;而应在尊重设计理念、完全遵循极简主义原则的前提下,精修已有内容,使其极为利落。与其添加有趣的滤镜或重构字体,不如思考如何让现有构图与艺术性更加协调。如果你想调用新函数或绘制新形状,请停下来,转而问自己:“如何让已有的内容更具艺术性?”

再进行一轮打磨。回到代码中进一步精修润饰,将其打造为理念鲜明的杰作。

多页选项

如有需要创建更多页面,请沿着设计理念创作更多富有创意、同时各具特色的页面。将这些页面打包在同一个 .pdf 中,或保存为多个 .png 文件。把第一页视为一本即将填满的精装书中的单页。后续页面应为原作增添独特的变化与记忆,以雅致的方式串联成一个故事。尽情发挥创意。

评论

支持 Markdown