Communitygithub.com

plugin87/redesign

將現有網站或應用程式無痛升級至頂級品質——在不破壞功能的前提下稽核現有設計、識別常見的AI痕跡,並精準運用品味與系統規則進行改造。當使用者想要改善、現代化、打磨或讓現有UI/程式碼庫「變得更好」時使用。

redesign 是什麼?

此技能提供一套以稽核為先的重新設計流程,專注於保存既有功能行為,同時大幅提升視覺品質與使用者體驗。它會先掃描整個程式碼庫,包括框架、樣式方法、設計Token與元件結構,並辨識必須保留的關鍵部分。接著使用「禁止預設清單」與「設計審查」技能進行診斷,產出優先級排序的問題表,再根據品牌調性選擇合適的美學系統。套用時遵循嚴格的順序(Token → 字體/間距 → 元件狀態 → 動畫),且絕不改變路由、資料或標記語意(可及性修復除外)。最後透過設計審查、可及性稽核、對比度驗證與硬編碼檢查腳本進行驗證。此技能支援單一主題一致性,強制所有頁面共用同一套Token主題,確保多頁應用程式不會出現不同色板,並附有自動化腳本檢測離題顏色。適用於Claude Code、Cursor、Codex等平台,特別適合需要現代化、打磨或無痛升級現有UI的開發者。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/redesign

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

技能:重新設計與稽核

以稽核為先的重新設計,保存行為。

步驟

  1. 閱讀 workflows/redesign-audit.md(完整的掃描 → 診斷 → 方向 → 套用 → 驗證序列 + 輸出完整性)。
  2. 掃描程式碼庫:框架、樣式方法(→ 導向對應的 frameworks/ 適配器)、Token 現狀、元件、必須保留的內容。
  3. 診斷:使用禁止預設清單(taste/design-taste.md)+ 審查評分表(design-review 技能)。產出優先級排序的問題表。
  4. 方向:選擇符合品牌調性的原型/系統(apply-aesthetic 技能)。
  5. 套用:依序進行——先 Token,再字體/間距,接著元件狀態,最後動畫——不改變路由、資料或標記語意(可及性修復除外)。
  6. 驗證:重新執行 design-review + a11y-audit;對每個先前運作正常的流程進行煙霧測試;檢查深色模式與響應式設計。對 Token 來源執行 scripts/validate_contrast.py,對變更過的程式碼執行 scripts/lint_hardcodes.py。

護欄

絕不為美觀犧牲運作功能。絕不導入對比度失敗的品牌色。絕不移除現有的可及性輔助功能。交付完整的檔案,不含佔位符。

單一主題一致性(對多頁應用程式至關重要)

整合為一個共享的 Token 主題,並讓每個頁面都使用它——一個讓不同頁面殘留不同色板的重新設計就是失敗。將逐頁/臨時顏色替換為語意 Token;使用 scripts/lint_hardcodes.py 驗證沒有任何頁面重新引入偏離主題的數值。主題切換必須來自單一的 Token 來源,而非頁面編輯(.claude/rules/tokens-and-color.md → 單一主題一致性)。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

相關技能