high-end-visual-design

AI が作る Web の画面の、「よくある安っぽさ」を消したいときに効きます。宣伝サイトやポートフォリオ、製品の紹介ページのような、見た目で印象を作るページ向けです。

公開元は 2026-10-19 に、このスキルを Leonxlnx/taste-skill-classics へ移しました。導入名は変わっていません。エージェントが自分で選ぶことはなく、名前で呼んだときだけ動きます。

中心は 2 つです。使ってはいけないものの一覧と、作り方の型です。

使ってはいけないもの

• 書体Inter、Roboto、Arial、Open Sans、Helvetica
• アイコン太い線の Lucide、Font Awesome、Material Icons
• 枠と影1px の灰色の枠、濃い影
• 配置上端に貼り付いた全幅の見出し、余白の少ない 3 列
• 動き等速や標準の緩急、一瞬で切り替わる変化

雰囲気と配置を 1 つずつ選ぶ

作り始める前に、雰囲気（暗い背景のガラス調・紙のような編集調・白基調の柔らかい構造）と、配置（大小のカードを並べる・重ねて奥行きを出す・左に大きな文字と右に画像）を 1 つずつ選びます。毎回同じ見た目にしないことも決まりです。

作り方の型が具体的

• カードは二重の枠にする。外側の薄い殻と、内側の中身で、角の丸みを計算して合わせる
• ボタンは丸い形にし、矢印はボタンの中の小さな円に入れる
• 見出しの上に小さなラベルを置く。区画の上下の余白は py-24〜py-40
• 動きは独自の緩急の曲線を使い、押したときにわずかに縮める

業務の画面や管理画面

大きな余白、重ねたカード、入場の動きは、毎日使う画面では邪魔になります。本文の想定も「高級な制作会社」の宣伝向けの見た目です。

最初から方針を自分で決めたいとき

見た目の度合いを数値で調整できるのは、同じ移転先にある design-taste-frontend-v2-experimental です。Anthropic 公式の frontend-design は、先に方針（配色・書体・配置）を短くまとめ、依頼と照らしてから作る形です。

解析で見つかった記述と同梱ファイル

SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱は Codex 向けの設定 1 件（agents/openai.yaml。自動では呼ばれない設定）だけで、本文は SKILL.md 1 枚です。リポジトリの中では skills/soft-skill/ というフォルダにあります。

「高級な書体が使える」と仮定している

Geist、Clash Display、PP Editorial New、Plus Jakarta Sans が例で、本文は「使えるものと仮定せよ」と書いています。読み込めていなければ、別の書体で表示されます。

商用の利用に購入が要る書体も含まれるので、使う前に配布元の条件を確かめてください。

日本語の書体には触れていない

挙がっているのは欧文の書体だけです。日本語のページでは、見出しと本文の和文の書体を別に指定しないと、端末の標準の書体になります。

「動きを減らす」設定への配慮が書かれていない

一方で、利用者が OS で動きを減らしている場合の扱い（prefers-reduced-motion）には触れていません。また、透明から始める作りは、スクリプトが止まると中身が見えないままになります。

性能の決まりは堅実

動かすのは transform と opacity だけ、ぼかしは固定の要素だけ、スクロールの検出は IntersectionObserver を使う、スマートフォンで h-screen を使わない、などが並んでいます。

インストール数

インストール数は約 33 万件です。移る前のリポジトリにあった 13 件は約 22 万〜45 万件に収まっていて（2026-09-20 の上流集計）、一部がまとまって入っている形です。

Inter が禁止なのはなぜですか

本文は理由を書いていません。「AI の画面を安っぽく見せる既定値」を並べた一覧の中に入っています。Inter 自体は読みやすい書体で、業務の画面では広く使われています。禁止はこのスキルの好みと考えてください。

スマートフォンではどう表示されますか

配置の型ごとに、768px 未満での崩し方が決まっています。大小のカードは 1 列に、重ねたカードは傾きと重なりを外して縦に並べ、左右に分けた配置は上下に積みます。

Tailwind を使っていないプロジェクトでも使えますか

指定は Tailwind のクラスで書かれていますが、中身は余白・角の丸み・影・緩急の値なので、普通の CSS に置き換えられます。出力の形として、React と Tailwind、または HTML が挙がっています。

同じ公開元の他のスキルとどう違いますか

こちらは 1 つの「高級な制作会社」の作風に絞った、禁止と型の一覧です。design-taste-frontend は方向を配って実ブラウザで測り直す汎用の版、見た目の度合いを目盛りで調整するなら design-taste-frontend-v2-experimental、画像で方向を決めるなら Leonxlnx/imagegen-skills の imagegen 系、と分かれています。