前端

redesign-existing-projects

改造已有项目 UI 的技能：先通读全站组件与样式输出审计报告，再从布局、间距、视觉层级、字体排版、配色五个方面逐条修复，与从零生成新页面的默认款互补。

star 等数据核实于 2026-10-07

安装

npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects"

使用步骤

触发方式有三种：Claude Code 等客户端把 skill 挂进斜杠菜单，输入/redesign-existing-projects直接调用；与任务相关时 Agent 会按语义自动加载；任何客户端都可在消息里点名「使用redesign-existing-projects skill」。以下示例均为可直接粘贴的第一条消息。

第一步先审计：别一上来就说「帮我改好看点」，先拿到问题清单再说（此时它不会改任何代码）

使用 redesign-existing-projects skill，先审计我整个前端项目的 UI：
通读所有页面组件和样式文件，从布局、间距、视觉层级、字体排版、
配色五个方面列出问题清单，先不要改任何代码。

第二步看完审计报告后，圈定要修的问题让它动手

按审计结果逐条修复。要求：
- 不改变任何业务逻辑和功能
- 不改路由和数据流
- 保持现有技术栈
- 每修完一个模块说明改了什么

第三步（可选）修完后让它对照规则自查一遍

对照 skill 的规则做一遍 pre-flight 检查：间距体系是否统一、
层级是否清晰、还有没有模板化的渐变卡片，输出复查结果。

注意事项与建议

动手前先 git commit 留好回滚点——redesign 改的是样式与结构，容易改崩布局
按页面分批改：先只改一个页面，确认风格满意后再按同一套规范铺开其余页面，风格统一且可控
数据密集场景（仪表盘、看盘工具类页面）在提示里说明「优先保证可读性」，避免它为设计感牺牲信息展示
可叠加方向型 skill（如 minimalist-ui）：在提示里说明以该风格方向执行修复，形成「流程 + 风格」的互补组合

redesign-existing-projects

推荐理由

安装

使用步骤

注意事项与建议

相关条目

联系我