Communitygithub.com

plugin87/redesign

将现有网站或应用升级至高级品质,同时保持功能完整性——审计当前设计,识别通用/AI痕迹,然后运用品味与系统规则进行精准改造。当用户希望改进、现代化、打磨或让现有UI/代码库“变得更好”时使用。

redesign 是什么?

这是一个专注于审计优先的UI/代码库改造技能,名为“Redesign & Audit”。其核心价值在于确保改造过程不破坏现有功能,即“行为保留”。该技能适用于希望提升现有应用视觉品质、去除AI生成通用痕迹、或进行现代化改造的开发者或AI代理。它支持扫描代码库(框架、样式方法、令牌使用情况等),使用“Banned Defaults”检查清单和评审标准进行诊断,然后通过选择合适的美学原型进行定向改造,并按照令牌、排版、间距、组件状态、动效的顺序逐步应用。最后会进行严格的验证,包括重新运行设计评审、无障碍审计、对比度检测和硬编码检查,确保改造后的代码完整且符合语义。特别强调多页面应用中的单一主题一致性,要求所有页面共享同一个令牌主题,避免出现不同的调色板。

兼容平台✓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/ 适配器)、令牌实际情况、组件、必须保留的内容。
  3. 诊断:使用禁用默认值检查清单(taste/design-taste.md)+ 评审标准(design-review 技能)。生成一个按优先级排序的问题表。
  4. 定向:选择适合品牌的原型/系统(apply-aesthetic 技能)。
  5. 按顺序应用——先令牌,然后是排版/间距,接着是组件状态,最后是动效——不改变路由/数据/标记语义(无障碍修复除外)。
  6. 验证:重新运行 design-review + a11y-audit;对每个曾经可用的流程进行冒烟测试;对深色模式和响应式布局进行抽检。在令牌源上运行 scripts/validate_contrast.py,在改动的代码上运行 scripts/lint_hardcodes.py。

护栏

切勿为了美观而牺牲可用的功能。切勿发布对比度不合格的品牌色。切勿移除现有的无障碍辅助功能。交付完整的文件——不留占位符。

单一主题一致性(对多页面应用至关重要)

合并到一个共享的令牌主题,并让每个页面都使用它——如果重新设计后不同页面仍然使用不同的调色板,那就是失败的。将按页面/临时颜色替换为语义化令牌;使用 scripts/lint_hardcodes.py 验证没有页面重新引入偏离主题的值。主题切换必须来自单一的令牌源,而不是页面编辑(.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.

相关技能