について
`committed-aesthetic`スキルは、選択肢のカタログとは異なり、一貫したエージェント実行のための単一かつ精密なデザインスタイルを定義します。これは、特定のハウススタイルをゼロから適用し、汎用的な出力を防止し、再現可能な結果を保証するために使用されます。既存の参照資料がない新しいブランドの表面を開始する場合、または定義された美的基準をエージェントに確実に実装させる必要がある場合に適用してください。
クイックインストール
Claude Code
推奨npx skills add avelikiy/great_cto -a claude-code/plugin add https://github.com/avelikiy/great_ctogit clone https://github.com/avelikiy/great_cto.git ~/.claude/skills/committed-aestheticこのコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします
ドキュメント
A committed aesthetic beats a catalogue
The problem this exists for
ui-ux-pro-max ships 84 styles, 161 palettes and 57 font pairings, and
design-advisor is wired to all of it. The catalogue is not the bottleneck.
The bottleneck is that a catalogue lets a model pick, and an unconstrained pick is the modal one. Asked for a landing page with no brand, any model reaches for the same safe centre: a soft gradient, a large sans heading, three rounded cards with a left accent border, generous neutral grey. Every input in the training distribution votes for it. Nothing in a catalogue entry saying "Swiss minimalism — clean, grid-based, generous whitespace" is specific enough to override that, because that sentence describes the safe centre too.
Compare a rule from a committed aesthetic:
every dimension is
calc(fraction * 100vw)against a baseline width, so one page at 1024px reads as a perfect scaled-down of the same page at 1920px
You can check that. A design either obeys it or does not. That is the whole difference: a catalogue entry is a label, a committed aesthetic is a constraint.
The form
A committed-aesthetic skill has five parts. The first is the one that does the work.
1. Transferable DNA — numbered, specific, falsifiable
Between 8 and 14 rules. Each must be checkable by someone who was not in the room. Test every rule against this: could two designers disagree about whether a page obeys it? If yes, it is a vibe, rewrite it.
| Vibe (useless) | Constraint (usable) |
|---|---|
| "thin, elegant type" | "weights 100 or 300 only, never 400+" |
| "lots of whitespace" | "~60% of any above-the-fold area is empty" |
| "restrained motion" | "no shadows, no gradients, no bounce; one shadow exists in the system, on toasts" |
| "technical feel" | "product codes use en-dash U+2013, never hyphen" |
| "dark and dense" | "five surface steps, each ~5% apart; depth is a surface step, never a shadow" |
2. What this does NOT do — the IP boundary, as a table
An aesthetic is inspired-by, not cloned. Name the specific assets that belong to whoever you are borrowing from — wordmark, icon set, information architecture, product names, copy — and for each give the reason and what to do instead. This is not a legal disclaimer at the bottom; it is a working table an agent reads while building, and it is the difference between an homage and a trademark problem. Where the source is a real company, default to inspired-but-distinct and ask before taking the clone path.
3. A component library that runs
One HTML file the agent can open, with every component rendered and its own CSS inline, copy-pasteable. A token table in prose is read and paraphrased; a rendered gallery is copied exactly. This is why the form works at all.
4. Templates for the signature patterns
The two or three moves nobody would reconstruct from the DNA list alone — the
navigation shape, the section header, the hero. With swap these for your own brand marked in comments.
5. Reference captures, marked "study, do not pixel-copy"
Screenshots are for understanding the patterns. Building FROM a screenshot rather than from the rules produces a bad tracing of one page instead of a design in the family.
The banned list, and why we needed one
ui-ux-pro-max's anti-pattern tables are about accessibility, touch targets and
performance. They are good and they are not about taste. Nothing in this repository
told an agent what cliché looks like, so the only defence against slop was one
sentence in design-advisor: "no generic clean modern minimal filler".
Banned by default on any surface without an existing system that calls for them:
- A gradient as the page ground. Especially purple-to-blue, especially at 135°.
- The card triplet: three equal cards, rounded corners, a coloured left border, an icon in a tinted circle.
- Inter, Roboto, Arial, Open Sans, Fraunces, Poppins as the display face. Not because they are bad — because they are the default vote.
- Emoji as iconography. Draw the icon. (Emoji are fine if the brand uses them.)
- The hero that describes a category rather than taking a position. "The modern platform for X" is the sentence a model writes when it has not been told what to believe.
- Glassmorphism, neumorphism, and a mesh-gradient blob unless the brief names one of them.
- Symmetric three-column feature grids as the default second section.
A banned list is not a style. It removes the centre so a choice has to be made.
Using one
- If a system already governs, this skill does not apply — match what exists.
- If nothing governs and you can ask: offer 2–4 genuinely different directions, each an axis you can name, before building. Not five shades of one aesthetic — that is not a choice.
- If nothing governs and you cannot ask: commit to ONE, state the assumption in a line at handover, and put 1–2 low-fi alternates beside the deliverable, never instead of it.
- Once a direction is chosen, load its committed-aesthetic skill and execute the
DNA rules literally. Cite the rule number for each choice, the way
design-advisoralready cites a ui-ux-pro-max rule.
Instances in this repository
skills/aesthetic-instrument/SKILL.md— great_cto's own, measured from the board and greatcto.systems rather than designed for this document.
Related: skills/ui-ux-pro-max/SKILL.md is the
catalogue this stands beside, not a replacement for it — the catalogue is where
you look when you need to KNOW something; this is what you load once you have
DECIDED something.
GitHub リポジトリ
よくある質問
committed-aesthetic Skillとは何ですか?
committed-aesthetic はavelikiy が作成した Claude Skillです。Skillは、Claudeが必要に応じて読み込む指示とリソースをまとめ、追加の指示なしで committed-aesthetic に関連するタスクを実行できるようにします。
committed-aesthetic をインストールするには?
このページのインストールコマンドを使用してください。committed-aesthetic をプラグインとして Claude Code に追加するか、リポジトリを skills ディレクトリにクローンし、Claudeを再起動してSkillを読み込みます。
committed-aesthetic はどのカテゴリに属しますか?
committed-aesthetic は メタ カテゴリに属します。
committed-aesthetic は無料で利用できますか?
はい。committed-aesthetic は AIMCP に掲載されており、無料でインストールできます。
関連スキル
このスキルは、Content Collections(Markdown/MDXファイルを型安全なデータコレクションに変換するTypeScriptファーストのツール)の本番環境でテストされた設定を提供します。Zodバリデーションによる型安全性を実現し、ブログ、ドキュメントサイト、コンテンツ重視のVite + Reactアプリケーション構築時にご利用ください。Viteプラグインの設定、MDXコンパイルから、デプロイ最適化、スキーマバリデーションまで、すべてを網羅しています。
このスキルは、開発者がPolymarket予測市場プラットフォームを活用したアプリケーション構築を可能にします。API統合による取引や市場データの取得に加え、WebSocketを介したリアルタイムデータストリーミングにより、ライブ取引や市場活動を監視できます。取引戦略の実装や、ライブ市場更新を処理するツールの作成にご利用ください。
このスキルは、開発者がコマンド、ファイル、LSP操作など25種類以上のイベントタイプにフックするOpenCodeプラグインを作成することを支援します。JavaScript/TypeScriptモジュール向けに、プラグイン構造、イベントAPI仕様、および実装パターンを提供します。カスタムイベント駆動ロジックでOpenCode AIアシスタントのライフサイクルをインターセプト、監視、または拡張する必要がある場合にご利用ください。
SGLangは、高性能なLLMサービングフレームワークであり、RadixAttentionプレフィックスキャッシュを活用したJSON、正規表現、エージェントワークフロー向けの高速で構造化された生成を特長とします。特にプレフィックスが繰り返されるタスクにおいて、大幅に高速な推論を実現し、複雑な構造化出力やマルチターン対話に最適です。制約付きデコードが必要な場合や、広範なプレフィックス共有を伴うアプリケーションを構築する場合は、vLLMなどの代替案ではなくSGLangを選択してください。
