mcpField
R
redesign

redesign

github.com/plugin87设计与 UI3.0k547 次安装1 天前更新
代码仓库

关于 redesign

redesign 是一项先审查再改造界面的设计技能，重点是在保留现有行为的同时推进重设计。它指导代码库分析、统一令牌主题、实施改动及无障碍和设计验证。

主要功能

  1. 01先审查后改造的流程
  2. 02检查代码库与框架
  3. 03整理有优先级的设计问题
  4. 04跨页面共享令牌主题
  5. 05验证无障碍与设计

适用场景

  1. 01改造现有应用界面
  2. 02统一多个页面的主题
  3. 03保留可用流程并改善设计

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill redesign

安装后在 Claude Code 中输入/redesign确认已加载。

详细介绍

原文在翻译后有更新，译文可能不是最新。

技能：重新设计与审查

步骤 0 — 工具包在这里吗？ 此技能会读取工具包中的文件。检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 只有在 KIT_MISSING 时，才表示安装的只有技能文件夹，这是 npx skills add 的安装方式。请明确说明这一点，指引用户使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测自己无法打开的文件内容。

以审查为先、保留现有行为的重新设计。

步骤

  1. 阅读 ${CLAUDE_SKILL_DIR}/../../../workflows/redesign-audit.md（完整的 Scan → Diagnose → Direct → Apply → Verify 流程 + Output Completeness）。
  2. Scan 代码库：框架、样式方法（→ 转到匹配的 frameworks/ 适配器）、令牌现状、组件，以及必须保留的内容。
  3. Diagnose：使用 Banned Defaults 检查清单（${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md）和审查标准（design-review 技能）。生成按优先级排序的发现表格。
  4. Direct：选择适合品牌的原型/系统（apply-aesthetic 技能）。
  5. Apply 按顺序执行——先处理令牌，然后是排版/间距，再处理组件状态，最后处理动效——不得更改路由/数据/标记语义（无障碍修复除外）。
  6. Verify：重新运行 design-review + a11y-audit；对所有此前可用的流程进行冒烟测试；抽查深色模式和响应式布局。对令牌源运行 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py，并对更改的代码运行 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py。

防护原则

绝不为了美观而牺牲可用功能。绝不发布对比度不达标的品牌色。绝不移除现有的无障碍功能。交付完整文件——不得使用占位符。

单主题一致性（多页应用的关键）

整合为一个共享令牌主题，并确保每个页面都使用它——如果重新设计后不同页面仍使用不同配色方案，就算失败。将页面级/临时颜色替换为语义令牌；使用 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py 验证没有页面重新引入偏离主题的值。主题切换必须来自单一令牌源，而不是修改页面（.claude/rules/tokens-and-color.md → Single-Theme Consistency）。

评论

支持 Markdown