跳转到使用指南
redesign-existing-projects作者 Leonxlnx

Redesign Existing Projects Skill.

Claude Code 和 Codex skill,用于设计审查:审核现有网站或应用,并将其升级至高级视觉质量。

  • Design Review & Accessibility
  • 审查报告
Leonxlnx/taste-skill · skills/redesign-skill/SKILL.mdSKILL.md
--- name: redesign-existing-projects description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. --- ## How This Works ## Design Audit ## Upgrade Techniques ## Fix Priority ## Rules
从上游文件读取的前言和章节标题(2026-09-14)· 完整内容 15,032 字符

01 功能说明

redesign-existing-projects Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

通过审查现有设计、识别常见的通用 AI 模式,并在不破坏功能的前提下应用高端设计标准,将现有网站和应用升级到高质量的视觉水准。可配合任意 CSS 框架或原生 CSS 使用。

该 skill 会扫描代码库以识别所用框架和样式方案,通过全面的设计审查诊断出每一个通用模式和薄弱环节,然后在现有技术栈基础上进行针对性升级。改动会按视觉影响和风险排定优先级,从字体替换、色彩清理,到组件替换和排版打磨。

审查报告
查看示例提示词 ↗

工作方式

  1. 01
    扫描代码库

    读取代码库以识别所用框架、样式方案(Tailwind、原生 CSS、styled-components 等)以及当前的设计模式。

  2. 02
    诊断通用模式

    运行设计审查,列出项目中发现的每一个通用模式、薄弱环节和缺失的状态。

  3. 03
    通过针对性升级进行修复

    在现有技术栈基础上应用针对性升级,而不是从零重写,改进已有的内容。

02 找到适合场景

何时使用 redesign-existing-projects Skill

在 Claude Code 或 Codex 中使用 redesign-existing-projects skill 处理此类设计审查工作。适用范围和限制来自该 skill 的文件。

适合场景

  • 需要升级到高质量水准的现有网站和应用
  • 存在通用 AI 设计模式、需要识别并替换的项目
  • 使用任意 CSS 框架(Tailwind、styled-components)或原生 CSS 的项目

    03 Skill 内部

    redesign-existing-projects Skill 赋予 Claude Code 和 Codex 的规则

    SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

    1. 使用现有技术栈

      不要迁移框架或样式库。保持改动与当前配置兼容。

    2. 每次改动后进行测试

      不要破坏现有功能。每次改动后都要测试,确保项目仍能正常运行。

    3. 导入前先检查依赖

      在导入任何新库之前,先查看项目的依赖文件,确认是否已有可用的库。

    4. 检查 Tailwind 版本

      如果项目使用 Tailwind,在修改配置文件之前先确认它是 v3 还是 v4。

    5. 若无框架则使用原生 CSS

      如果项目没有使用任何框架,请使用原生 CSS,而不是引入新的样式系统。

    6. 绝不使用 Lorem Ipsum

      绝不使用占位拉丁文本。应撰写真实的草稿文案,而非通用占位内容。

    7. 遵循修复优先级顺序

      按优先级顺序应用改动:先替换字体(见效最快、风险最低),然后清理配色、处理悬停状态、调整布局、替换组件、完善状态,最后进行字体排版的润色。

    8. 保持改动可审查

      保持改动可审查且聚焦。多做小而有针对性的改进,而非大规模重写。

    04 投入使用

    在 Claude Code 或 Codex 中安装 redesign-existing-projects

    一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

    将 redesign-existing-projects 添加到 Claude Code、Codex 或您的 Agent

    在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

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

    针对 skills/redesign-skill/SKILL.md 的通用 skills CLI 形式;该仓库可能会另行说明其路径。

    为 Skill 提供第一个设计审查任务

    按 skill 自身的术语撰写;把括号中的部分换成你的内容。

    Starter prompt
    Audit the design of my [React dashboard app] and upgrade it to premium quality. The project uses Tailwind CSS v3. Identify generic AI patterns like the purple gradient background, centered three-column feature cards, and browser default fonts. Replace them with high-end design standards while keeping all existing functionality working. Focus on typography, color palette cleanup, and adding proper hover states first.

    来源:依据 SKILL.md,按 skill 自身的术语撰写。

    检查首次结果

    SKILL.md 本身如何描述正确的结果:

    • 确认项目中所有图标的描边宽度保持一致
    • 检查所有图片是否为屏幕阅读器提供了描述性 alt 文本

    在 OpenDesign 中通过其 SKILL.md 链接导入 redesign-existing-projects:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

    05 开源、可追溯

    来源、许可与验证

    本页面事实的来源,以及最后检查时间。

    Author
    Leonxlnx
    Repository
    github.com/Leonxlnx/taste-skill 分支 main
    Skill 文件
    skills/redesign-skill/SKILL.md 内容校验和已记录于验证时;commit ccbc156
    License
    MIT 来自 LICENSE。
    仓库星标数
    86,946 GitHub 快照拍摄于 2026-09-14,针对整个 Leonxlnx/taste-skill 仓库,该仓库在本目录中包含 11 个 skills。不是 redesign-existing-projects 的评分或使用计数。
    已由 OpenDesign 验证
    2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

    SKILL.md 内部

    1. 工作原理三步流程:扫描代码库、诊断模式、通过针对性升级进行修复
    2. 设计审查涵盖排版、色彩、布局、交互、内容、组件、图标、代码质量以及战略性遗漏的完整清单
    3. 排版修复浏览器默认样式、标题呈现、正文宽度、字重多样性、数字格式、字间距,以及处理孤词
    4. 色彩与表面替换纯黑色、过饱和的强调色、混杂的灰色、AI 渐变、通用阴影、扁平化设计以及不一致的光照
    5. 布局打破对称、替换三栏卡片、使用 CSS Grid、添加容器、变化圆角、营造层次、修正对齐
    6. 交互与状态添加悬停、激活、聚焦、加载、空状态与错误状态,并配以流畅的过渡与 GPU 加速动画
    7. 内容使用真实的姓名与数据、去除 AI 套话、采用主动语态、变化日期、避免使用 Lorem Ipsum
    8. 组件模式替换通用卡片、按钮组、徽章、折叠面板、轮播、弹窗、头像、开关以及页脚链接堆砌
    9. 图标跳出 Lucide/Feather 默认样式,避免陈词滥调的隐喻,统一描边宽度,添加 favicon,使用真实照片
    10. 代码质量使用语义化 HTML、统一样式、相对单位、alt 文本、清晰的 z-index,移除死代码,添加 meta 标签
    11. 战略性遗漏在需要的地方添加法律链接、返回导航、自定义 404、表单验证、跳转链接以及 Cookie 同意提示
    12. 升级技巧用于排版、布局、动效与表面升级的高影响力技巧,以替换通用模式
    Skill 自身的描述
    "将现有网站和应用升级至高端质量。审查当前设计,识别通用 AI 模式,在不破坏功能的前提下应用高标准设计。适用于任何 CSS 框架或原生 CSS。"

    来自 SKILL.md 的 front-matter 描述。完整文件约 15,032 个字符。在 GitHub 上阅读完整文件。

    Redesign Existing Projects

    在真实设计审查任务上运行 redesign-existing-projects。

    下载 OpenDesign,从 SKILL.md 链接导入 redesign-existing-projects,粘贴上述提示,在查看结果前先阅读计划。

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

    OpenDesign 桌面客户端

    一套设计系统,让每一次创作都保持品牌一致

    在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

    • 覆盖网页、PPT、原型、数据看板、图像与视频
    • 140+ 设计系统,以及完整模板与技能库
    • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
    免费下载

    支持 macOS 与 Windows