redesign-existing-projects

今から使うなら design-taste-frontend の解説を読んでください。

すでに動いているサイトやアプリの見た目を良くしたいときに効きます。一から作るのではなく、今の技術のまま、壊さずに直すのが前提です。

進め方は 3 段

1. 読む枠組み、スタイルの書き方、今の見た目の型を調べる
2. 診断する点検の一覧に照らし、ありがちな型・弱い所・足りない状態を全部挙げる
3. 直す今の技術で、的を絞って直す。作り直さない

点検の一覧が広い

点検は 9 つの観点に分かれています。下は各観点の主な項目です。

• 書体どこでも Inter、見出しに存在感が無い、本文の行が長すぎる、数字が等幅でない
• 色と面真っ黒の背景、彩度の高すぎる差し色、差し色が 2 色以上、紫と青の「AI らしい」グラデーション
• 配置何でも中央寄せ、同じ幅のカードが 3 列、height: 100vh、最大幅が無い
• 操作の反応ホバーや押したときの反応が無い、フォーカスの枠が無い、読み込み・空・失敗の表示が無い
• 文言「John Doe」、「Acme」、決まり文句、感嘆符、Lorem Ipsum
• 部品枠と影の白いカード、アコーディオンの FAQ、3 本の塔の料金表
• アイコンLucide や Feather だけ、「打ち上げ」にロケットのような定番の比喩、線の太さの不揃い、favicon が無い
• コード意味の無い div の入れ子、固定の px、画像の代替テキストの欠け、存在しない import、メタタグの欠け
• 忘れがち規約へのリンク、戻る道、404 の頁、入力の確かめ、本文へ飛ぶリンク、必要な地域での同意の表示

直す順番も決まっている

直す順番も決まっています。書体の差し替え（効果が大きく危険が小さい）→ 色の整理 → ホバーと押したときの反応 → 配置と余白 → ありがちな部品の置き換え → 読み込み・空・失敗の表示 → 書体の段の仕上げ、です。

一から新しく作るとき

同じ公開元の high-end-visual-design や design-taste-frontend が新しく組む側です。

見た目の決まりが社内で決まっているとき

書体や色を「個性のあるもの」に替える指示が中心です。ブランドの決まりがあるなら、依頼文で変えてはいけない所を先に書いてください。

解析では見つからないが、コードを書き換える

SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱ファイルは無く、SKILL.md 1 枚で完結しています。リポジトリの中では skills/redesign-skill/ というフォルダにあります。

ただし実際にはコードを書き換えます。解析は、この地の文の指示を拾えていません。

本番のサイトでは、偽のデータを作らせない

文言の節に「丸い数字ではなく 47.2% のような生っぽい数字を」「ブログの日付が全部同じなら、本物らしく見えるよう散らせ」という指示があります。

仮の画像に外部のサービスを使う

素材が無いときの仮の画像として picsum.photos の URL を勧めています。本番に残すと、表示のたびに外部から画像を読み込むことになります。公開前に差し替えてください。

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

替え先の例は Geist、Outfit、Satoshi などの欧文の書体です。日本語のサイトでは、和文の書体を別に決める必要があります。

壊さない決まりがある

枠組みやスタイルの道具を移し替えない、変更ごとに動作を確かめる、新しい道具を入れる前に依存の一覧を見る、Tailwind なら版（v3 か v4）を先に確かめる、と書かれています。

インストール数

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

まず何から直すのがいいですか

本文の順番では書体の差し替えです。最も効果が大きく、壊す危険が小さいとされています。そのあと色の整理、操作の反応の順です。変更は小さく、見直しやすい単位にせよ、とも書かれています。

アクセシビリティも見てもらえますか

一部は入っています。フォーカスの枠（「任意ではなく必須」と明記）、画像の代替テキスト、本文へ飛ぶリンク、意味のある HTML の要素、などです。網羅的な点検の道具ではないので、必要なら別に確かめてください。

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

こちらは今あるものの点検と修正の一覧です。新しく作る作風の指定は high-end-visual-design、画像で方向を決めるなら imagegen 系、と分かれています。