mcpField
A
aesthetic-literacy

aesthetic-literacy

github.com/alexiseverage设计与 UI1755 次安装2 周前更新
代码仓库

关于 aesthetic-literacy

aesthetic-literacy 是面向 Agent 的设计技能,用结构化框架解析和描述视觉美学。它结合七维分析、文化含义审视与 168 种美学词典,为后续设计应用提供依据。

主要功能

  1. 01七维美学分解模型
  2. 02涵盖 168 种美学的词典
  3. 03识别与描述美学风格
  4. 04区分相近或模糊风格
  5. 05分析文化联想与疲劳风险

适用场景

  1. 01分析 Y2K 等明确命名的美学
  2. 02将“复古”等模糊描述映射到具体风格
  3. 03比较相近美学之间的差异
  4. 04在制作设计规范前明确美学特征

安装

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

$npx skills add https://github.com/alexiseverage/aesthetic-frontend-skills --skill aesthetic-literacy

安装后在 Claude Code 中输入/aesthetic-literacy确认已加载。

包含的文件

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

aesthetics/
1990s-minimalism.md
8-bit-pixel.md
88x31-badge-webring.md
aesthetic-movement.md
ai-slop-synthetic-corporate-art.md
amsterdam-school.md
anime-mecha-realism.md
apple-core-tech.md
apple-orchard-educational.md
art-deco.md
art-nouveau.md
arts-and-crafts.md
atomic-age.md
autumn-field-guide-naturalism.md
autumn-library-reading-challenge.md
b2b-quick-order-grid.md
balletcore.md
barbiecore.md
bauhaus.md
beaux-arts.md
biedermeier.md
biomechanical.md
bloomberg-terminal-monochrome.md
blue-note-jazz-modernism.md
board-game-box-art.md
bootleg-streetwear-logo-remix.md
browser-chrome-netscape.md
brutalism.md
bubble-chamber-track-photography.md
casino.md

详细介绍

美学素养

概述

为 Agent 提供一个结构化框架,用于将具名美学运动理解为符号系统,而不只是视觉偏好。该框架提供一个 7 维拆解模型(配色、字体、纹理、形状、动态、空间惯例、文化标记),以及一份按类别整理的精选词典,收录了 168 种主要美学风格。它支持识别、刻画、区分任何具名视觉美学,并在应用时考虑其内涵。

这是 aesthetic-application 的基础。

兼容性 / 工具

此技能有意不声明 allowed-tools 前置元数据。它可在兼容 Agent Skills 的运行时之间移植,依赖于读取此 SKILL.md 以及技能本地的 references/ 和 aesthetics/ Markdown 文件。如果 Agent 配备了文件读取工具,请使用这些工具加载引用的文件;否则,请用户提供相关摘录。

何时应用此技能

适用于以下情况:

  • 用户提到一种美学风格(“Y2K”“粗野主义”“田园核心”),并希望正式地理解它
  • 用户使用含糊的描述(“复古”“舒适”“简洁”),需要将其对应到具体的美学风格
  • 用户询问两种相关美学风格之间的区别
  • 在制作设计令牌或素材前,需要刻画一种设计美学
  • 其他工作流需要在生成应用规范前推理美学身份

当请求纯粹涉及组件实现、布局结构或无障碍时,不要应用此技能。这些内容不在此技能的范围内。

7 维框架

每种美学都是一个可通过 7 个形式维度表达的系统。始终刻画全部 7 个维度。切勿将一种美学简化为单一维度(通常是配色)。

#维度涵盖内容
1配色核心色相类别、饱和度、明度范围、对比度表现、典型组合
2字体字体类别(衬线 / 无衬线 / 等宽 / 展示字体)、历史风格、字重分布、大小写惯例、字距规范
3纹理表面质感(光滑、粗糙、光泽、哑光、老旧、数字瑕疵)、实现技术(CSS 渐变、SVG 滤镜、backdrop-filter、图像叠加)
4形状圆角特征、几何形态(直线形 / 曲线形 / 几何形 / 有机形)、轮廓表现、UI 元素比例
5动态时间节奏(干脆 / 缓慢 / 弹性 / 线性)、缓动特征、动画类型(淡入淡出 / 滑动 / 弹簧 / 变形)、减少动态效果时的行为
6空间惯例密度(稀疏 / 密集)、留白运用、分层 / Z 轴深度、网格结构(严格 / 自由 / 放射状)、内容层级安排
7文化标记图标词汇、主题元素、符号、文本语体——用于表明归属该美学社群的元素
不可妥协的要素

每种美学都有 2–4 个不可妥协的维度或属性。即使其他维度正确,去掉它们也会破坏该美学的身份。始终明确指出这些不可妥协的要素。

例如:Y2K 必须具备金属 / 铬质表面、圆润几何形态以及酸性色 / 虹彩色。去掉其中任何一项,它就会变成“模糊的复古数码风”,而不再具有鲜明的 Y2K 特征。

文化内涵层

每种美学除了视觉特征外,都承载着文化内涵,这些内涵受到以下因素影响:

  • 起源背景:这种美学何时、何地兴起?它源于怎样的文化时刻?
  • 当代内涵:如今人们如何解读它——是忠实呈现时代的文献、怀旧式引用,还是带有反讽意味的仿作?
  • 受众共鸣:哪些人能认出它?他们会联想到什么?
  • 审美疲劳风险:这种美学是否已泛滥,以至于其文化信号弱化?

内涵模式(请明确使用以下术语):

  • 原真风格:秉持其原本精神运用——真诚、浑然不觉
  • 怀旧式引用:深情回望;温暖而不带反讽
  • 反讽式仿作:有意识地引用;刻意为之本身就是表达的一部分
  • 当代复兴:沿用某个历史时期的形式语言,但以当代方式呈现——既非仿作,也非戏仿

美学词典

词典条目与此技能一同存放在 aesthetics/ 子目录中。描述特定美学时,请加载相关文件。

按 slug 查找:aesthetics/<slug>.md(相对于此 SKILL.md)

对于已安装的用户,如需查找 slug、别名或类别,请先查看技能本地索引 references/aesthetic-index.md。然后加载 aesthetics/<slug>.md,以获取规范制作条目。

常规应用设计工作流中,不要加载根目录下的研究日志。根目录中的 knowledge/aesthetics/ 资源用于记录来源、维护或研究;仅当用户明确要求了解来源、维护或研究详情,或规范条目标注了必须核查来源的不确定性时,才使用这些资源。

已安装用户可查阅的技能本地参考资料:

  • references/aesthetic-index.md — 生成的 slug/类别/别名索引
  • references/artifact-schema.md — 精简的产物模型和规范条目架构
  • references/canonical-entry-example.md — 可复制的规范条目格式 | 类别 | 数量 | 代表性 Slug | |---|---|---| | 数字 / 互联网原生 | 25 | y2k, vaporwave, synthwave, early-internet, glitch, frutiger-aero, 8-bit-pixel, skeuomorphism, web-2-gloss, flat-design, material-design, corporate-grunge, myspace-chaos, neumorphism, claymorphism, pen-and-pixel, j-gov-futurism, liminal-space-backrooms, dreamcore-weirdcore, ai-slop-synthetic-corporate-art, hauntology, xlyk, clowncore, browser-chrome-netscape, 88x31-badge-webring, personal-homepage-builder, skate-video-vhs-fisheye, dvd-menu | | 当代生活方式 | 16 | cottagecore, dark-academia, warm-minimalism (取代 quiet-luxury), maximalism, 1990s-minimalism, decora-kei, magical-girl, witchcore, gorpcore, balletcore, barbiecore, coastal-grandmother, goblincore, nu-goth-pastel-goth, kidcore | | 历史设计运动 | 54 | art-nouveau, art-deco, swiss-international, bauhaus, ulm-school, polish-poster-school, shaker-design, high-tech-architecture, prairie-school, beaux-arts, italian-radical-design, new-objectivity, japanese-metabolism, aesthetic-movement, memphis, brutalism, arts-and-crafts, vienna-secession, futurism, vorticism, suprematism, constructivism, de-stijl, streamline-moderne, wpa-poster-style, wartime-propaganda, scandinavian-modern, die-neue-typographie, mid-century-modern, pop-art, op-art, psychedelic, atomic-age, punk-zine, new-wave-typography, grunge-typography, desktop-publishing, rave-flyer, city-pop, blue-note-jazz-modernism, chinoiserie, gothic-revival, wabi-sabi-slow-living, pierrotcore, plakatstil, shin-hanga, amsterdam-school, orphism, precisionism, mingei, biedermeier | | 新兴 / 混合 | 10 | organic-digital, solarpunk, corporate-memphis, glassmorphism, neubrutalism, quiet-luxury (重定向 → warm-minimalism), cybersigilism, scandi-noir, storybook-gothic | | 技术 / 机构 | 10 | high-performance-hmi, sports-scorebug, prescription-label-clarity, bloomberg-terminal-monochrome, cheminformatics-map-explorer, bubble-chamber-track-photography | | 材料 / 印刷工艺 | 10 | risograph, harm-reduction-zine, queer-nightlife-ephemera, fairground-carnival-poster-art, skate-deck-screen-print, pichwai | | 民间 / 商业 | 24 | mexican-rotulismo, guochao, konbini-utility, convenience-store-backoffice, b2b-quick-order-grid, lotto, casino, tiki-polynesian-pop, chicano-lowrider-art, board-game-box-art, trading-card-game-design, sticker-bomb-slap, bootleg-streetwear-logo-remix, fileteado-porteno, chicha-poster-graphics | | 推想 / 机器人 | 19 | cyberpunk, cassette-futurism, nanopunk, techno-noir, apple-core-tech, uncanny-android, dieselpunk, steampunk, post-apocalyptic-scavenged-tech, space-western, cute-tech, companion-bot, mecha-kaiju, anime-mecha-realism, biomechanical, chibi-mecha, used-future-weathering, fictional-user-interface-diegetic, tactical-sci-fi-utility-ui |

完整列表:参见 aesthetics/ 目录。8 个类别中共有 168 个完整条目和 1 个重定向。

每个条目都说明:配色、字体、质感、形状、动效、空间惯例、文化标志、不可或缺的元素、内涵,以及子类 / 相关美学(如适用)。如适用,还会附上审美疲劳说明。


消歧协议

当审美线索模糊或彼此重叠时:

  1. 提取线索:列出用户给出的情绪 / 描述词(“温暖”“复古”“舒适”“简洁”)
  2. 映射到类别群:确定词典中哪些美学风格与这些线索相符
  3. 找出歧义轴:什么问题能消除歧义?(通常是:年代 / 十年、温暖还是冷峻、真诚还是戏谑)
  4. 提出一个有针对性的问题:一次只问一个消歧问题
  5. 确认并继续:得到回答后,指出你将采用的美学风格,然后继续

示例

如果不确定输出格式、理想的回复结构,或想查看反面示例,请加载 EXAMPLES.md。

易踩的坑

  • 不要将一种美学简化为单一维度(通常是配色)。 采用 Y2K 配色,但表面平坦、字体为中性的无衬线字体,这样的设计不会给人 Y2K 的感觉。必须兼顾全部 7 个维度,不可妥协的特征(例如 Y2K 的圆润几何造型和金属质感表面)与配色同样重要。
  • 不要混淆相近的美学风格。 Vaporwave 和 synthwave 的配色相近,但它们的起源、文化内涵和形式特征各不相同。将两者混为一谈,会产生既缺乏美学一致性、又缺乏文化辨识度的混合风格。
  • 不要将子类别与其母体美学混为一谈。 如果用户提出的是有文献记载的子类别(例如 synthwave 下的“outrun”、glitch 下的“datamoshing”,以及与 quiet-luxury 相近的“old money”),请说出其规范的母体美学名称,加载完整的词典条目,阅读 Subsets / Related 部分,并强化该子类别的特有属性,而不要将其视为同义词。子类别的独特特征——配色侧重、图案、技法限制——正是设计信号。
  • 描述含糊时,不要跳过消歧步骤。 “复古”至少涵盖 5 种不同的美学风格。在作出任何设计决策前,先提出一个有针对性的问题。
  • 确认某种历史美学风格前,务必进行内涵审查。 Art Deco 根据具体的呈现语境,可能给人“永恒的奢华”或“镀金时代的铺张”之感。请先指出这种歧义。

当美学风格的名称明确且毫无歧义时,不要进行消歧。

知识库查询

为常规应用设计描述任何美学风格之前,先加载 aesthetics/<slug>.md 中的规范词典条目,并将其中的制作指南作为快速流程的信息准则。

仅当用户询问来源、维护或研究,或者你明确在更新仓库的研究资料时,才检查根目录下的 knowledge/aesthetics/<slug>.md。如果出于此类目的加载了研究档案,其维度分析可以优先于词典中的频次信息;但应通过规范条目提炼设计指南,而不是将研究笔记直接倾倒到面向用户的回答中。

Slug 格式:小写并以连字符分隔(例如 dark-academia、frutiger-aero、neubrutalism)。

如果不存在规范条目,且该美学风格较为陌生或小众,请说明此公开软件包目前尚无足够的、有来源依据的指南,不要凭空编造内容。

评论

支持 Markdown