ホーム / 全スキル / デザイン＆モーション / redesign-existing-projects
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · leonxlnx/taste-skill

redesign-existing-projects

既存のウェブサイトやアプリをプレミアム品質にアップグレードします。現在のデザインを監査し、一般的なAI特有のパターンを特定して、機能を損なうことなくハイエンドなデザイン標準を適用します。あらゆるCSSフレームワークやバニラCSSに対応します。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 85698License MIT（仓库根 LICENSE 文件；GitHub API spdx MIT；Copyright (c) 2026 Leonxlnx）Commit ccbc15639c
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

「Scan→Diagnose→Fix」の3ステップワークフロー：まずコードベースを読み込んで技術スタックと現状を把握し、監査を実行して問題をリストアップし、最後に既存スタック上でのみピンポイントで修正を行い、全面的な書き直しを禁止します。

skills/redesign-skill/SKILL.md
**Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
「Do not rewrite from scratch（ゼロからの書き直し禁止）」は本スキル全体の憲法レベルの制約であり、「既存資産の改修」をグリーンフィールド（新規ゼロベース）作成スキルと差別化しています。

中心となる「アンチパターン監査ライブラリ」：Typography / Color and Surfaces / Layout / Interactivity and States / Content / Component Patterns / Iconography / Code Quality の8カテゴリにわたりAI特有の典型的な欠陥を網羅し、各項目に「問題→修正方針」を記載。

skills/redesign-skill/SKILL.md
**Purple/blue "AI gradient" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
監査項目は抽象的な提案ではなく「フィンガープリント→処置」のペアです。最も一般的なAIデザインの特徴を特定した上で具体的な置き換え方針を提示し、診断と処方を直結させています。

「影響度／リスク比」に基づきソートされた修正順序：Fix Priority ではフォントの置き換えから仕上げまでの7段階の順序を明確化し、低リスクで視覚的効果が最大となる作業から着手します。

skills/redesign-skill/SKILL.md
1. **Font swap** — biggest instant improvement, lowest risk
「Fix Priority」の指示文は「Apply changes in this order for maximum visual impact with minimum risk:」で始まり、1〜7のステップ（フォント置換→パレット整理→インタラクション状態→レイアウト余白→コンポーネント置換→不足状態の追加→タイポグラフィ調整）が続きます。エージェントに確定的な実行順序を与え、低影響な作業での無駄な消費や高リスク箇所の乱暴な改変を防ぎます。

「機能を壊さない」ための4つの厳格なルール：フレームワークやスタイルライブラリの移行禁止、修正ごとのテスト実施、ライブラリ追加前の依存関係ファイル確認、フレームワークがない場合はネイティブCSSを使用、さらに変更は小さく焦点を絞ることを義務付けます。

skills/redesign-skill/SKILL.md
Do not break existing functionality. Test after every change.
テスト作業はホストエージェントがユーザーのプロジェクト上で実行します（ホストの認可ツール範囲内）。スキル自体にはスクリプトは含まれません。

アップグレード手法パッケージ（Typography/Layout/Motion/Surface Upgrades）により、単なる「陳腐さの排除」を超えた高度な方向性を提示し、改善を単なる不具合修正にとどめません。

skills/redesign-skill/SKILL.md
**True glassmorphism.** Go beyond `backdrop-filter: blur`. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
監査チェックリストと相互補完します。監査が引き算と軌道修正を担当し、Upgrade Techniques が足し算を担当します。

「Strategic Omissions」チェックリストが、AIが見落としがちな要素（法的表記リンク、戻るナビゲーション、404、フォーム検証、skip-link、Cookie同意など）を補完します。

skills/redesign-skill/SKILL.md
**No legal links.** Add privacy policy and terms of service links in the footer.
このセクションは「### Strategic Omissions (What AI Typically Forgets)」という見出しの下に箇条書きで構成されています。「網羅性・完全性」も改修範囲に含め、見た目は美しくてもフローが途切れているUIの欠陥を塞ぎます。

2コア機能

01既存コードベースのスキャンと特定（フレームワーク／スタイル体系／既存デザインパターン）
028カテゴリのアンチパターン監査（typography/color/layout/states/content/components/icons/code-quality）、各項目に修正法付き
03互換性の鉄則：技術スタックの非移行、書き直し禁止、変更ごとのテスト実施
04優先順位付けされた改修実行計画（影響度／リスク比の7ステップ）
05インタラクティブ状態の完全性補完：hover/active/loading/empty/error/focus/ナビゲーション状態
06コンテンツ層の脱AI定型文と現実味の付与（データ、人名、禁止ワードの排除）
07戦略的見落としの補完：a11y／法的リンク／404／フォーム検証／アクセシビリティ
08高度なアップグレード手法パッケージ（リアルグラスモーフィズム、パララックス、スポットライトボーダー、バリアブルフォントアニメーションなど）

3外部依存関係

KindDependency / Endpoint
networkpicsum.photos（占位图服务）

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
  • SKILL.md: スクリプト実行や外部影響のない、純粋なプロンプト指示およびルールテキスト
監査ノート： 純粋な指示型の単一ファイルスキルです。スクリプト実行、外部ネットワーク送信、認証情報の読み取りはなく、スキル自体によるファイル書き込みもありません（コード読み込み、修正、テスト実行はすべてホストエージェントが指示に従いユーザープロジェクト内で認可された権限として実行します）。唯一のネットワークドメインである picsum.photos は、納品コード内のプレースホルダー画像URLとして出現するのみで、スキルのランタイム通信ではありません。

5二重目の独立検証

  • [ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
  • [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
  • [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
  • [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
  • [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
  • [ok] 『without breaking functionality』是否有保障机制 — Rules 段四条硬规则（不迁移栈/每改必测/引库查依赖/保持小改动）+ Fix Priority 的风险排序共同兜底；虽为文本约束，但机制完整、无虚假承诺。
  • [ok] audit 分类是否有漏项/夸大（声称 8 类其实不足） — 重读核对标题：Typography/Color and Surfaces/Layout/Interactivity and States/Content/Component Patterns/Iconography/Code Quality 恰好 8 类，另加 Strategic Omissions 独立一节，与正文结构一致。
  • [ok] picsum.photos 引用的性质复核 — 原文明确『when real assets are not available』的占位图用途，且仅此一处 URL；无隐藏网络调用。

6結論

  • 既存改修における自制的な規律：書き直しなし、スタック移行なし、変更ごとのテストにより、破壊的リスクを最小限に抑制。
  • 広範かつ実用的なアンチパターンライブラリ：8カテゴリ×数十個の「フィンガープリント→修正方針」ペアにより、モデルが項目ごとに照合して実行可能。
  • 影響度／リスク比で順序付けられた実行計画により、価値の低い変更での無駄な消費を防止。
  • 高い網羅性：法的リンク、skip-link、404、Cookie、インポートの幻覚（ハルシネーション）までカバーし、即座にリリース可能な状態に近づけます。
  • フレームワーク非依存かつ監査可能：既存スタックの保持を明記し、小さなコミット単位で進めるため、人間との協調レビューに適しています。
    • 最適な用途： 既存のウェブサイト／アプリのコードがあり、技術スタックを変えずにビジュアルと完成度をプレミアム水準に引き上げたいシナリオに最適です。既存のマーケティングサイト、SaaS管理画面、レガシープロジェクトの近代化などに適しており、特に「監査してから改修、人間がレビュー可能」な協調ワークフローや、あらゆるCSSフレームワーク／ネイティブCSSプロジェクトと互換性があります。
    不向きな用途： ゼロからの新規作成（監査対象のコードベースがないため、taste-skill / high-end-visual-design などを直接使用してください）；全面的に作り直したい・フレームワークを移行したいプロジェクト；コードを書かない純粋なデザイン探索シナリオ；テスト環境がなく「絶対に一切壊してはならない」高リスクな基幹システム（プロンプトのルールは人間の手動検証を代替できません）。
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload redesign-existing-projects.tar.gz
    sha256: de9382abc8e410ed…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3cca18b368.