1仕組みと動作原理

プロンプトの構成設計のみでアンチスロップ（粗製乱造防止）を完全実現：skill ディレクトリには単一の SKILL.md（87,253 バイト / 1,206 行の Markdown）のみが存在し、スクリプトやデータファイルは一切含みません。『厳格な禁止事項＋カウント可能な閾値＋セルフチェックリスト』の形式により、エージェントが出力前に自己フィルタリングを行います。

skills/taste-skill/SKILL.md (目录内唯一文件；仓库 skill.sh 注册表)

[taste-skill]="skills/taste-skill/SKILL.md"

リポジトリの git ツリーによれば、skills/taste-skill/ 配下には SKILL.md のみが存在します。skill.sh は各 skill を SKILL.md のパスにマッピングするローカル登録用スクリプトに過ぎず、skill の実行ロジックには関与しません。

ルール適用の前にまず『要件書（brief）の読み込み』を実施：3つのダイヤル（DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY）をドキュメント全体の疑似グローバル変数（ベースライン 8/6/4）として定義し、すべてのレイアウト・アニメーション・密度の決定をこの変数で制御。各ルールはこの変数のコンテキスト下でのみ有効となります。

skills/taste-skill/SKILL.md

**Baseline:** `8 / 6 / 4`. Use these unless the design read overrides them. Do not ask the user to edit this file - overrides happen conversationally.

1.C では『never invent aliases like LAYOUT_VARIANCE or ANIM_LEVEL』と命名規律を厳格化し、ルール間の安全な相互参照を担保しています（例：§4.3 ANTI-CENTER BIAS は VARIANCE > 4 の場合のみ発火）。

アンチスロップルールは実践的な『AI Tells（AI特有の癖）ブラックリスト』として機能：LLM 生成物で頻出する欠陥を識別可能なシグネチャ（em-dash、eyebrow のカウント、均等3分割カード、スプリットスクリーンヘッダー、単色フッターなど）としてリスト化し、カウント可能な閾値を設定。その多くに明確なオーバーライド（例外規定）パスを設けています。

skills/taste-skill/SKILL.md

**Em-dash (`—`) is COMPLETELY banned.** It is the LLM's signature stylistic crutch and it is the #1 visual Tell in production tests. There is no "limited use" allowance, no "natural language frequency" allowance, no "in body copy is fine" allowance. None.

§9.F はリストについて『came out of real LLM-generated landing-page tests（実際の LLM 生成 LP テストから導出）』と記載しており、実証テストに基づくルール化がなされています。§4.7 の eyebrow ルールでは、`uppercase tracking` の出現数をカウントし、ceil(sectionCount / 3) を超えた場合は出力不合格とする機械的数式を提示しています。

出荷前チェックマトリクスを強制：§14 PRE-FLIGHT CHECK ではこれまでの全ルールを網羅する 50 項目以上のチェックボックスを提供し、出力前の全項目セルフチェックを義務化。1項目でもチェックできない場合は『not done（未完了）』とみなします。

skills/taste-skill/SKILL.md

Run this matrix before outputting code. This is the last filter. **THIS IS NOT OPTIONAL. Run every box. If any box fails, the output is not done.**

散在する数百のルールを実行可能な出荷前チェックリストに集約したものであり、メカニズムとしてはプログラムによる静的解析（lint）ではなくエージェントの自己認識・内省プロセスに基づいています。

エージェントが記憶に頼って誤ったライブラリを使用するのを防ぐため、『コピーして即使用可能』なコードスケルトンと実際のインストールコマンドを提供：§5.A/B/C では GSAP/Motion の TSX カノニカルスケルトンをインライン展開し、付録 A に各種デザインシステムの正確な install コマンドを、付録 B に公式ドキュメントリンクを掲載しています。

skills/taste-skill/SKILL.md

The sections below are vendored reference content. They give the agent real install commands, real canonical doc links, and real working starter snippets for each design system named in Section 2. Use them to ground decisions in production reality, not training-data fiction.

§3.F では依存関係の検証を強制（'Before importing ANY 3rd-party library, check `package.json`. … **Never** assume a library exists'）。付録 C では Apple Liquid Glass に公式 Web CSS が存在しないことを明記し、近似値としてラベル付けされたスケルトンのみを提供することで、架空の公式ライブラリを捏造するのを防止しています。

『モデルの事前分布の使い回し』に対抗するプロジェクト間ローテーション機構：フォントやプレミアムカラーパレットについて、連続するプロジェクトで同一の組み合わせを再利用することを禁止し、多様性を強制します。

skills/taste-skill/SKILL.md

**Palette-rotation rule:** if the previous premium-consumer project you generated used the beige+brass family, this one MUST use a different family. Do not ship the same warm-craft palette twice in a row.

セリフフォントのローテーションプール（'rotate from this pool, do NOT reuse the same serif across consecutive projects'）など同様の制約が存在し、LLM 出力の画一化問題を直接防止しています。

2コア機能

01Brief Inference / デザイン方向性の推論：シグナル（ページ種別、vibe ワード、参考リンク、ターゲット層、ブランド資産）を読み取り、1行の『Design Read』を出力。曖昧な場合も質問は1点のみに限定

02アンチスロップ厳格ルールベース：§4 デザインエンジニアリング指令＋ §9 AI Tells ブラックリスト（ファーストビュー構造の上限、eyebrow の配分数、ジグザグ配置の上限、em-dash の全面禁止、ダミーデータ/架空の人名/ダミースクリーンショットの禁止）

033ダイヤル設定システム：VARIANCE/MOTION/DENSITY の 1〜10 段階の定義＋要件書からダイヤル値を導出するマッピング表と用途別プリセット

04要件書からデザインシステムへのマッピング：12以上の公式システム（Fluent/Carbon/Material/GOV.UK/USWDS/Primer/Polarisなど）の選定表＋『1プロジェクトにつき1システム』の原則＋美的近似（Liquid Glass 等）の誠実な明記

05再利用可能なアニメーション骨格とモーション仕様：sticky-stack / horizontal-pan / reveal-stagger の 3 つのカノニカル TSX ＋ Motion/GSAP の選定ルール＋モーションに対する意図（動機）の義務付け

06パフォーマンスとアクセシビリティのガードレール：transform/opacity のみに限定したアニメーション、prefers-reduced-motion への対応必須、デュアルモードのダークテーマ、CWV 目標値、DOM コストおよび z-index の制限

07Redesign プロトコル：着手前の事前監査（ブランドトークン/情報設計/SEO ベースライン）、Preserve（維持）と Overhaul（刷新）モードの切り分け、近代化レバーの優先順位付け、情報設計・コピー・計測イベントの無断変更禁止

08Final Pre-Flight Check：出荷ゲートとして機能する 50 項目以上の出力前セルフチェックマトリクス

3外部依存関係

Kind	Dependency / Endpoint
cli	npx shadcn@latest
cli	npm install / yarn add（设计系统安装指令）
package	设计系统：@fluentui/react-components、@material/web、@carbon/react、@primer/css、@radix-ui/themes、govuk-frontend、uswds、bootstrap、@atlaskit/*
package	动效库：motion（motion/react）、gsap、three.js
package	图标库：@phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react（lucide 降级）
network	素材源（写进生成页面）：picsum.photos 占位摄影 / cdn.simpleicons.org 品牌 logo / unsplash、pexels（若明确允许）
network	Polaris Web Components CDN script（仅 Shopify app 场景，写入生成页面 head）
tool	图像生成工具（条件式）：generate_image / MCP image tool / IDE-integrated gen / OpenAI image tools——仅在宿主环境可用时
network	官方文档链接（仅参考不抓取）：github.com、developer.mozilla.org、各设计系统官网、developer.apple.com 等 50+ 条

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: プロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への直接的副作用はありません。

監査ノート： 🟢 緑（純粋なプロンプト指示）：skill ディレクトリ内は 87KB の単一 Markdown ファイルのみで構成され、スクリプト、内部ネットワーク通信、認証情報へのアクセス、スキルのファイル自己書き込み等は一切ありません。記載されている全 55 個の URL は公式ドキュメントへのリンク、または『生成ページ』内に埋め込まれる素材ソース（picsum/simpleicons/Shopify CDN）であり、実行は skill 内部ではなくユーザーの成果物ページ上で行われます。誘導される npm/npx のインストールや条件付きの画像生成は、ホストコーディングエージェントの一般的なタスク動作の範囲内です。留意点として、成果物ページに外部 CDN へのリンクが含まれる点、および 87KB の長文プロンプトが大きなコンテキスト負荷となる点が挙げられます。

5二重目の独立検証

[ok] 『无脚本、单文件』 — git ls-tree 确认 skills/taste-skill/ 下仅 SKILL.md；仓库根 skill.sh 只是 SKILL.md 路径注册表，非 skill 运行代码
[ok] 『无网络外发』 — 全量提取 55 个 http(s) URL，全部为官方文档链接或写给生成页面的素材/CDN 源；SKILL.md 内无 fetch/axios/curl/wget
[ok] 『无凭证读取』 — 全文唯一命中 api-key 的是 Polaris 模板中的 <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" /> 占位符，写入的是用户页面；无 env/keychain/密钥读取指令
[ok] 『安装命令仅文字指示』 — npm/npx/yarn 只出现在 Appendix A 代码块与 §2.A 表格，作为给 agent 的安装提示；npx shadcn 为官方初始化器
[discrepancy] §12 引用的 blocks/ 目录 — SKILL.md 内唯一内部路径引用 skills/taste-skill/blocks/（§12.A）在本 commit 不存在；正文已自述 'Blocks will be added iteratively'，属未兑现契约而非缺陷
[ok] em-dash 自洽性（正文宣称全禁却含 em-dash） — 全文仅 5 个 —，均为禁令规则演示文本；git log 339afcb 证实 'purge em-dashes throughout (177 -> 6)'，与声明一致
[ok] 『strict pre-flight check』是否夸大 — §14 确实给出 50+ 勾选盒矩阵并声明 'THIS IS NOT OPTIONAL'；但它是认知自检而非程序化校验——文档未声称有自动化，无夸大
[ok] 『real design systems when applicable』是否夸大 — §2.A 表 + Appendix B 官方文档 + Appendix A 真实安装命令俱全；Appendix C 主动声明 Apple Liquid Glass 无官方 web 实现，诚实度高于多数同类 skill

6結論

実践可能なアンチスロップ機構：抽象的な『センスを良くする』指示ではなく、数値カウント可能な禁止令（em-dash の全面禁止、eyebrow の配分数式、ジグザグ/ヒーロー構造の上限）と機械的な Pre-Flight マトリクスを提供

全ルールがコンテキストに応じて適用され、例外規定（override）も用意されているため、スタイル強制スキルにありがちな『テンプレートへの形骸化』を回避

実際の LLM 生成サイトに対する本番テストから逆算し反復改善されたルールベースであり、高い実効性を裏付ける実証データが存在

高いエンジニアリング誠実性：package.json の事前確認を義務付け、存在しない公式ライブラリを捏造せず（Liquid Glass は近似表現と明記）、付録で実在するインストールコマンドと公式リンクを提供してハルシネーションを防止

インライン展開されたカノニカルコードスケルトン（GSAP/Motion の 3 コンポーネント）により、低品質なアニメーション実装リスクを低減し、モーションの分離および RSC 制約を明確化

最適な用途： コーディングエージェントにデザインの規律を組み込みたいフロントエンド開発者：Claude Code、Cursor、Codex などの長コンテキスト環境で LP、ポートフォリオ、公式サイトのリニューアルを行うユーザー。『Awwwards を参考にして』といった曖昧な指示ではなく、『厳格な禁止ルール＋カウント可能な閾値＋出荷前セルフチェック』による決定論的な制約を好む方に適しています。

不向きな用途： ダッシュボードやデータ主導のプロダクト UI（作者により対象外と明記）；プログラムによる lint や CI による強制検証が必要なワークフロー（本スキルは純粋なセルフチェック前提）；短コンテキストのモデル（プロンプト単体で 87KB）；実画像や画像生成機能のないテキスト完結環境（§4.8 によりビジュアルアセットが必須とされ、欠落時はスロップと自己判定されます）。

Install Agent-Ready

① Verified Mirror 2026-09-06

Option A · Direct DownloadDownload design-taste-frontend.tar.gz

sha256: 1cf075267bf20c7a…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ccbc15639c.