原典: Improving frontend design through Skills
一行要約
「いかにも AI が作った見た目」は分布収束の産物であり、prompt で外せる。ただし禁止しただけでは別の局所最適に寄るので、最後に発散を促す一文が要る。そしてその prompt を常時 context に置かないための器が skill である。
要点
なぜ同じ見た目になるのか
The issue? Distributional convergence. During sampling, models predict tokens based on statistical patterns in training data. Safe design choices–those that work universally and offend no one–dominate web training data. Without direction, Claude samples from this high-probability center.
問題は？ 分布収束である。サンプリング時、モデルは訓練データ中の統計的パターンに基づいてトークンを予測する。安全なデザイン選択 —— 普遍的に機能し誰も不快にさせないもの —— が web の訓練データを支配している。方向づけが無ければ、Claude はこの高確率の中心からサンプリングする。
具体的な症状として Inter フォント・白地に紫のグラデーション・最小限のアニメーションが名指しされる。
skill が要る理由は「専門性 × 常時性」
But this creates a practical challenge: the more specialized the task, the more context you need to provide.
だがこれは実務的な課題を生む。タスクが専門的であるほど、与えるべき context は増える。
You could pack all this into a system prompt, but then every request–debugging Python, analyzing data, writing emails–carries frontend design context. The question becomes: how do you provide Claude with domain-specific guidance exactly when needed, without permanent context overhead for unrelated tasks?
全部を system prompt に詰め込むこともできるが、そうするとあらゆるリクエスト —— Python のデバッグ、データ分析、メール書き —— が frontend デザインの context を背負う。問いはこうなる。無関係なタスクに恒久的な context オーバーヘッドを課さずに、どうやって必要なときちょうどにドメイン固有の指針を与えるか。
効かせ方の中核 — 実装できる次元に落とす
The core insight is to think about frontend design the way a frontend engineer would. The more you can map aesthetic improvements to implementable frontend code, the better Claude can execute.
中核的な洞察は、frontend エンジニアが考えるように frontend デザインを考えることである。美的な改善を実装可能な frontend コードに写像できるほど、Claude はうまく実行できる。
そこで選ばれた4次元が typography / animations / background effects / themes。いずれも書けるコードに直結する。高度（altitude）の取り方も明示される。
prompting the model at the right altitude, avoiding the two extremes of low-altitude hardcoded logic like specifying exact hex codes and vague high-altitude guidance that assumes shared context
正しい高度でモデルに prompt する。厳密な hex 値を指定するような低空のハードコードされた論理と、共有された文脈を前提とする曖昧な高空の指針という、2つの極端を避ける。
副次的な観察も面白い。
Interestingly, the mandate to use more interesting fonts seems to encourage the model to improve other aspects of the design as well.
興味深いことに、より面白いフォントを使えという指示は、デザインの他の側面も改善するようモデルを促すように見える。
禁止だけでは別の局所最適に落ちる（この記事で最も実務的な指摘）
We also include additional guidance at the end to prevent Claude from converging to a different local maximum. Even with explicit instructions to avoid certain patterns, the model can default to other common choices (like Space Grotesk for typography). The final reminder to “think outside the box” reinforces creative variation.
別の局所最大へ収束するのを防ぐため、末尾に追加の指針を入れている。特定のパターンを避けよと明示的に指示しても、モデルは他のありふれた選択（typography なら Space Grotesk など）に既定で落ちうる。最後の「枠の外で考えよ」という念押しが創造的な変化を補強する。
つまり「Inter を使うな」だけでは足りず、禁止リストは新しい既定を作る。原典はこれを自分の prompt の中で自己言及的に扱っている（後掲の実物の末尾を参照）。
skill にスクリプトを持たせる
web-artifacts-builder skill の説明に、skill の一般的な利点が書かれている。
by giving Claude access to scripts to execute boilerplate actions, Claude is able to minimize token usage while increasing reliability and performance
定型的な動作を実行するスクリプトへのアクセスを Claude に与えることで、Claude はトークン使用量を最小化しつつ信頼性と性能を高められる。
具体的には (1) React リポジトリの雛形を作る、(2) 編集後に Parcel で単一ファイルへバンドルする、の2つを skill 側のスクリプトが担う。artifacts が単一 HTML ファイルでなければならないという制約を、Claude に手で守らせるのではなくスクリプトで満たしている。
そのまま使える具体例
原典が提示する汎用 prompt（約400トークン）。
<frontend_aesthetics>
You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
Focus on:
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.
Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character
Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
</frontend_aesthetics>typography だけを狙う版:
<use_interesting_fonts>
Typography instantly signals quality. Avoid using boring, generic fonts.
Never use: Inter, Roboto, Open Sans, Lato, default system fonts
Here are some examples of good, impactful choices:
- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
- Editorial: Playfair Display, Crimson Pro
- Technical: IBM Plex family, Source Sans 3
- Distinctive: Bricolage Grotesque, Newsreader
Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.
Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.
Pick one distinctive font, use it decisively. Load from Google Fonts.
</use_interesting_fonts>構造の型（原典の説明を要約すると3層）:
- 問題の高レベルな文脈を与える（何を解こうとしているか）
- 改善の各次元に的を絞った助言を置く
- 末尾で「別の局所最適に寄るな」と念押しする
原典で言及されている関連文書
- effective-context-engineering-for-ai-agents — 「正しい高度で prompt する」の出典。context を薄く保つ理由も
- agent-skills-overview — skill による progressive disclosure
- skills — Claude Code 側の skill
- create-files — Claude がコンピュータを使う（artifacts の土台）