前端与 UI

redesign-existing-projects

审查现有网站,在不破坏功能的前提下升级它。

这是什么

一套面向存量项目的扫描、诊断、修复流程。它审查字体、颜色、布局、状态、内容、图标和代码质量,再在现有技术栈内做针对性升级。

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
来自上游 SKILL.md

它对设计意味着什么

  • 紫蓝色的 AI 渐变和三栏等宽卡片会被替换成经过推敲的方案。
  • 卡片组里的按钮会对齐到同一条底线,不受内容长短影响。
  • 缺失的 hover、focus、加载、空状态和错误状态会被补全。

包含哪些内容

  • How this works
  • Design audit
  • Upgrade techniques
  • Fix priority
  • Rules

如何安装

redesign-existing-projects

  1. 克隆这个仓库。

    git clone https://github.com/Leonxlnx/taste-skill
  2. 把 Codex 指向这个 Skill 文件。

    skills/redesign-skill/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 它先扫描代码库,确认用的是什么框架和样式方案。

  2. 在改动任何东西之前,先列出所有平庸套路和薄弱点。

  3. 修复按优先级落地:字体、颜色、状态、布局、组件,最后打磨排版细节。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。