关于 aesthetic-literacy
aesthetic-literacy 是面向 Agent 的设计技能,用结构化框架解析和描述视觉美学。它结合七维分析、文化含义审视与 168 种美学词典,为后续设计应用提供依据。
主要功能
- 01七维美学分解模型
- 02涵盖 168 种美学的词典
- 03识别与描述美学风格
- 04区分相近或模糊风格
- 05分析文化联想与疲劳风险
适用场景
- 01分析 Y2K 等明确命名的美学
- 02将“复古”等模糊描述映射到具体风格
- 03比较相近美学之间的差异
- 04在制作设计规范前明确美学特征
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ alexiseverage/ aesthetic-frontend-skills --skill aesthetic-literacy安装后在 Claude Code 中输入/aesthetic-literacy确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
aesthetics/1990s-minimalism.md8-bit-pixel.md88x31-badge-webring.mdaesthetic-movement.mdai-slop-synthetic-corporate-art.mdamsterdam-school.mdanime-mecha-realism.mdapple-core-tech.mdapple-orchard-educational.mdart-deco.mdart-nouveau.mdarts-and-crafts.mdatomic-age.mdautumn-field-guide-naturalism.mdautumn-library-reading-challenge.mdb2b-quick-order-grid.mdballetcore.mdbarbiecore.mdbauhaus.mdbeaux-arts.mdbiedermeier.mdbiomechanical.mdbloomberg-terminal-monochrome.mdblue-note-jazz-modernism.mdboard-game-box-art.mdbootleg-streetwear-logo-remix.mdbrowser-chrome-netscape.mdbrutalism.mdbubble-chamber-track-photography.mdcasino.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 个重定向。
每个条目都说明:配色、字体、质感、形状、动效、空间惯例、文化标志、不可或缺的元素、内涵,以及子类 / 相关美学(如适用)。如适用,还会附上审美疲劳说明。
消歧协议
当审美线索模糊或彼此重叠时:
- 提取线索:列出用户给出的情绪 / 描述词(“温暖”“复古”“舒适”“简洁”)
- 映射到类别群:确定词典中哪些美学风格与这些线索相符
- 找出歧义轴:什么问题能消除歧义?(通常是:年代 / 十年、温暖还是冷峻、真诚还是戏谑)
- 提出一个有针对性的问题:一次只问一个消歧问题
- 确认并继续:得到回答后,指出你将采用的美学风格,然后继续
示例
如果不确定输出格式、理想的回复结构,或想查看反面示例,请加载 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)。
如果不存在规范条目,且该美学风格较为陌生或小众,请说明此公开软件包目前尚无足够的、有来源依据的指南,不要凭空编造内容。