mcpField
A
aesthetic-literacy

aesthetic-literacy

github.com/alexiseverageデザイン・UI1755 回インストール2 週間前に更新
リポジトリ

aesthetic-literacy について

aesthetic-literacyは、視覚的な美学を体系として捉えるAgent向けデザインスキルです。7つの分析軸と168種類の美学辞典を使い、特徴の把握や曖昧さの解消、文化的な意味を踏まえた検討を支援します。

主な機能

  1. 017次元の美学分析フレームワーク
  2. 02168種類を収録した美学辞典
  3. 03美学の特定と特徴づけ
  4. 04近接するスタイルの判別
  5. 05文化的含意と飽和リスクの分析

活用シーン

  1. 01Y2Kなど明示された美学の分析
  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

詳細

美的リテラシー

概要

エージェントに、名前の付いた美的ムーブメントを単なる視覚的な好みではなく、記号論的なシステムとして理解するための構造化されたフレームワークを提供します。7つの次元(パレット、タイポグラフィ、テクスチャ、形状、動き、空間的慣習、文化的マーカー)による分解モデルと、ファミリー別に整理された主要な美的スタイル168種の厳選辞書を備えています。名前の付いたあらゆる視覚的美学について、その特定、特徴づけ、区別、含意を考慮した適用を可能にします。

aesthetic-application の基盤として使用されます。

互換性/ツール

このスキルでは、allowed-tools のフロントマターを意図的に宣言していません。Agent Skills 対応ランタイム間で移植可能であり、この SKILL.md とスキル内の references/ および aesthetics/ の Markdown ファイルを読み込んで使用します。エージェントにファイル読み取りツールがある場合は、それらを使って参照先のファイルを読み込んでください。ない場合は、関連する抜粋をユーザーに提示してもらってください。

このスキルを適用する場面

次の場合に適用します。

  • ユーザーが「Y2K」「ブルータリスト」「コテージコア」などの美的スタイルを挙げ、形式的に理解したい場合
  • ユーザーが「レトロ」「居心地がよい」「クリーン」などの曖昧な表現を使い、具体的な美的スタイルへの対応づけが必要な場合
  • ユーザーが関連する2つの美的スタイルの違いを尋ねる場合
  • トークンやアセットを作成する前に、デザインの美的スタイルを特徴づける必要がある場合
  • 別のワークフローで、アプリケーション仕様を作成する前に美的アイデンティティについて推論する必要がある場合

リクエストがコンポーネントの実装、レイアウト構造、アクセシビリティのみに関する場合は適用しないでください。これらはこのスキルの対象外です。

7次元フレームワーク

あらゆる美的スタイルは、7つの形式的な次元で表現できるシステムです。必ず7つすべてを特徴づけてください。美的スタイルを単一の次元(通常はパレット)だけに還元してはいけません。

#次元対象範囲
1パレット中核となる色相の系統、彩度のレベル、明度の範囲、コントラストの振る舞い、特徴的な配色
2タイポグラフィ書体の分類(セリフ/サンセリフ/等幅/ディスプレイ)、歴史的なスタイル、ウェイトの配分、大文字・小文字の慣習、字間の基準
3テクスチャ表面の質感(滑らか、ノイズがある、光沢がある、つや消し、経年変化がある、デジタルアーティファクト)、手法(CSS グラデーション、SVG フィルター、backdrop-filter、画像オーバーレイ)
4形状角丸の個性、形状(直線的/曲線的/幾何学的/有機的)、シルエットの印象、UI 要素の比率
5動きタイミングの特徴(キビキビした/ゆっくりした/弾力的な/直線的な)、イージングの個性、使用されるアニメーションの種類(フェード/スライド/スプリング/モーフ)、動きを抑える設定時の挙動
6空間的慣習密度(疎/密)、余白の使い方、レイヤー構造/Z軸方向の奥行き、グリッド構造(厳格/自由/放射状)、コンテンツ階層のアプローチ
7文化的マーカーアイコンの語彙、モチーフ、シンボル、文章の文体など、その美的コミュニティへの帰属を示す要素
必須要件

それぞれの美的スタイルには、必須となる次元または特性が2〜4個あります。それらを取り除くと、ほかの次元が正しくても美的アイデンティティが損なわれます。必須要件は必ず明示してください。

例:Y2Kには、メタリック/クロームの表面、丸みを帯びた形状、鮮烈な色または玉虫色が必要です。どれか1つでも取り除くと、独特のY2Kではなく「なんとなくレトロなデジタルスタイル」になります。

コノテーションレイヤー

それぞれの美学には、視覚的な特徴を超えた文化的なコノテーションがあり、次の要素によって形作られます。

  • 起源の文脈:その美学はいつ、どこで生まれたのでしょうか。どのような文化的な時代背景から生まれたのでしょうか。
  • 現代のコノテーション:今日ではどのように受け取られているでしょうか。時代を忠実に伝える資料、ノスタルジックな引用、あるいは皮肉を込めたパスティーシュでしょうか。
  • オーディエンスの共鳴:誰がそれを認識し、どのような連想を抱くでしょうか。
  • 陳腐化のリスク:飽和によって、その美学が持つ文化的なシグナルは弱まっているでしょうか。

コノテーションのモード(以下の用語を明示的に使用してください):

  • Authentic(真正):本来の精神に沿って適用されるもの。真摯で、意図的な演出がない
  • Nostalgic quotation(ノスタルジックな引用):愛情を込めた過去へのまなざし。皮肉のない温かさ
  • Ironic pastiche(皮肉を込めたパスティーシュ):自覚的な引用。その自覚自体がメッセージの一部
  • Contemporary revival(現代的なリバイバル):歴史的な時代の形式語彙を、現代的な表現で更新したもの。パスティーシュでもパロディーでもない

美学辞典

辞典の項目は、このスキルと同じ aesthetics/ サブディレクトリにあります。特定の美学の特徴を説明するときは、該当するファイルを読み込んでください。

スラッグから検索:aesthetics/<slug>.md(この SKILL.md からの相対パス)

インストール済みユーザーがスラッグ、別名、ファミリーを調べる場合は、まずスキル内のインデックス references/aesthetic-index.md を確認してください。次に、正式な制作項目として aesthetics/<slug>.md を読み込みます。

通常のアプリ設計ワークフローでは、ルートの調査ログを読み込まないでください。ルートの knowledge/aesthetics/ リソースは、出典確認、メンテナンス、調査のための資料です。ユーザーから出典確認、メンテナンス、調査に関する詳細を明示的に求められた場合、または正式な項目に不確実性があり、出典との照合が必要な場合にのみ使用してください。

インストール済みユーザー向けのスキル内リファレンス:

  • references/aesthetic-index.md — 生成済みのスラッグ/ファミリー/別名検索
  • references/artifact-schema.md — 簡潔な成果物モデルと正式な項目のスキーマ
  • references/canonical-entry-example.md — コピーして使える正式な項目の形式 | ファミリー | 件数 | 代表的なスラッグ | |---|---|---| | デジタル/インターネットネイティブ | 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. 曖昧さの軸を特定する:曖昧さを解消するための質問を1つ考えます(多くの場合、時代/年代、暖かさと冷たさ、真剣さと皮肉のどちらかです)
  4. 的を絞った質問を1つする:曖昧さを解消するための質問を一度に複数してはいけません
  5. 確認して進める:回答を受けたら、取り組む美学の名称を伝え、続けます

例

出力形式、理想的な回答の構成に迷った場合や、アンチパターンを確認する場合は、EXAMPLES.md を読み込んでください。

注意点

  • 美学を一つの次元(通常は配色)に矮小化しないでください。 Y2K の配色でも、表面がフラットでニュートラルなサンセリフ体を使ったデザインは、Y2K らしく見えません。7 つすべての次元に対処する必要があり、譲れない要素(例:Y2K における丸みのある形状とメタリックな表面)は配色と同じくらい重要です。
  • 隣接する美学を混同しないでください。 Vaporwave と synthwave は配色が近接していますが、起源、文化的な背景、形式的な特性は異なります。両者を混同すると、美学としての一貫性も文化的な明確さもないハイブリッドが生まれます。
  • 一部の系統を、その親となる美学と混同しないでください。 ユーザーが文書化された下位系統(例:synthwave における「outrun」、glitch における「datamoshing」、quiet-luxury に隣接する「old money」)を指定した場合は、正式な親となる美学の名称を特定し、辞書の項目全体を読み、下位系統/関連項目のセクションを確認して、下位系統固有の特性を強調してください。類義語として扱ってはいけません。配色の重点、モチーフ、技法上の制約など、その下位系統ならではの特徴がデザインの手がかりになります。
  • 曖昧な表現の明確化を省略しないでください。 「レトロ」は少なくとも 5 つの異なる美学を指します。デザイン上の判断を行う前に、的を絞った質問を 1 つしてください。
  • 歴史的な美学を確定する前に、必ず含意を監査してください。 Art Deco は、表現の文脈によって「時代を超えた贅沢」にも「金ぴか時代の過剰」にも見えます。まずこの曖昧さを明らかにしてください。

美学が明示的かつ一義的に指定されている場合は、曖昧さの明確化を行わないでください。

ナレッジベースの参照

通常のアプリ設計で美学を特徴づける前に、aesthetics/<slug>.md にある正式な辞書項目を読み込み、その制作ガイドを最優先の情報源として使用してください。

ルートの knowledge/aesthetics/<slug>.md を確認するのは、ユーザーが出典、メンテナンス、または調査について尋ねた場合、あるいはリポジトリの調査資料を明示的に更新している場合に限ります。その目的で調査プロファイルを読み込んだ場合は、その次元分析が辞書の頻度情報に優先することがあります。ただし、調査メモをユーザー向けの回答にそのまま記載せず、正式な項目を通じて設計ガイドにまとめ直してください。

スラッグの形式:小文字とハイフン(例:dark-academia、frutiger-aero、neubrutalism)。

正式な項目が存在せず、美学が未知またはニッチな場合は、値を作り出すのではなく、この公開パッケージには根拠となる十分な情報がまだ含まれていないと伝えてください。

コメント