UI Restructure Skill：让 AI 生成的 UI 真正重新设计而非换皮

Skill超级捕获手 技术创作者 2026-08-12 10 阅读

UI Restructure Skill：解决 AI 生成 UI 的结构性锁定，让设计师真正重新设计

在使用 AI 构建 UI 的过程中，几乎所有开发者都遇到过这样的困境：让 AI 重新设计一个六个月前生成的界面，结果它只改了颜色和字体，布局、组件层级、间距体系完全没动——你得到的是一个”换皮”而非真正的重新设计。

UI Restructure（https://github.com/vamsivarma27/ui-restructure）正是为解决这个”AI UI 锁定”问题而生的 Claude Code Skill。它的核心能力是：保留所有业务逻辑不变的前提下，从零重建整个 UI 的布局、组件层级、设计 token 和排版体系。

这个 Skill 解决了 AI 生成式 UI 的根本矛盾——AI 读取现有结构作为约束边界，只能在原基础上微调，而无法真正”跳出”已有结构做设计。

功能与原则

UI Restructure 的设计原则是”逻辑不变，视觉重置”：

  • 打破结构锁定：AI 生成的 UI 会在 40+ 文件中重复设计 token、硬编码 Tailwind 类名、固定 Flex/Grid 布局——这些结构一旦存在，AI 重新设计时只能微调，无法真正重建
  • 分离逻辑与视觉：Skill 会反向解析现有 UI，提取纯逻辑意图（显示什么数据、有哪些操作），剥离所有结构性决策，再用新的设计体系重建
  • 零业务逻辑破坏：hooks、API 调用、handlers、数据映射、props、类型定义全部保留，一行不改

核心能力

  • 4 套风格引擎，每套都是完整的独立设计系统：
  • apple：玻璃拟态、柔阴影、大圆角、毛玻璃面板，适合消费类 App、SaaS 营销页
  • linear：紧凑、锐利边框、深色、密集、单色系优先，适合开发者工具、效率应用
  • minimal：干净、中性、字体优先、无阴影、留白充足，适合博客、文档、简单 SaaS

  • dashboard：侧边栏主导、KPI 卡片网格、数据密集型布局，适合管理后台、analytics、数据平台

  • 4 种局部重构模式：

  • --mode layout：仅改变结构（Flex/Grid、容器、导航位置），保留现有 token
  • --mode theme：仅改变设计 token（颜色、字体、阴影、圆角），保留布局
  • --mode grid：将垂直列表转换为响应式卡片网格

  • --mode full（默认）：重建一切

  • God Mode：/ui-restructure --god-mode 是最强大的模式。它不问”如何排列这些组件”，而是问”用户在这个页面上真正需要什么”，模拟 100 种不同用户类型访问每个页面的体验，然后给出真正以用户为中心的重构方案

认可度

截至 2026-08-12，该项目在 GitHub 保持了稳定的更新节奏（32 commits），被收录于 SkillsMP（skillsmp.com）和 agentskills.io 等主流 Skill 市场。Skill 支持 Claude Code、Cursor、Windsurf、Cline、GitHub Copilot 以及任何兼容 Agent Skills 标准的工具，覆盖范围广泛。

GitHub：https://github.com/vamsivarma27/ui-restructure

原作者：vamsivarma27（独立开发者），专注于 AI 前端工作流优化工具。

介绍

UI Restructure 的出现源于一个具体的开发者痛点。当你在 AI 编码工具中要求它”重新设计这个 UI”，AI 实际上是在读取现有的 JSX 结构、className 样式、内联 token 作为约束条件。由于这些结构已经固化在代码里，AI 只能在极小的空间内做变化，最终得到的只是换皮而非真正的重新设计。

Skill 的工作流程分为三步：

  1. 反向解析：提取现有 UI 的逻辑意图——显示哪些数据、支持哪些操作、存在哪些用户流程
  2. 结构剥离：删除所有结构性决策（token、布局类名、间距体系、组件层级）
  3. 从零重建：使用选定的风格引擎（Apple/Linear/Minimal/Dashboard）重建整个 UI，hooks/API/handlers 完全不动

这个过程解决了 AI UI 生成中的”路径依赖”问题——不是渐进优化，而是重新初始化。

特点

  • 真正从零重建：不是换皮，而是剥离所有结构后重新生成，布局、层级、间距全部刷新
  • 四套生产级设计系统：Apple 玻璃拟态、Linear 暗色工具风、Minimal 文档风、Dashboard 数据视图，覆盖主流 UI 风格
  • God Mode 用户中心化重构：模拟 100 种用户类型，真正从用户需求出发而非技术实现出发
  • 局部模式灵活切换：可仅改布局、仅改主题或仅改网格，不必全量重建
  • 跨工具兼容：Claude Code、Cursor、Windsurf、Cline、GitHub Copilot 均支持
  • 逻辑零侵入：只改视觉层，业务代码一行不动

使用方法

安装方式（三选一）：

# 通过 openskills（推荐）
npx openskills install vamsivarma27/ui-restructure

# 通过 agent-skills-cli
npx agent-skills-cli install vamsivarma27/ui-restructure

# 手动复制到项目本地 skills 目录
cp -r ui-restructure/ .claude/skills/

# 或复制到全局 Claude skills
cp -r ui-restructure/ ~/.claude/skills/

基本调用：

# 全量重建（默认 minimal 风格）
/ui-restructure

# 应用 Apple 玻璃拟态风格
/ui-restructure --style apple

# 开发者工具风格（Linear）
/ui-restructure --style linear

# 用户中心化 God Mode 重构
/ui-restructure --god-mode

局部模式：

# 仅改变布局结构
/ui-restructure --mode layout

# 仅改变主题/tokens
/ui-restructure --mode theme

# 将列表转换为卡片网格
/ui-restructure --mode grid

使用场景与人群

  • 前端开发者：在 AI 辅助开发中遇到”UI 锁定”，需要真正重新设计而非换皮
  • 设计师：想用 AI 快速验证多种设计风格在现有产品结构上的效果
  • 产品团队：需要在不破坏现有功能的前提下快速迭代 UI 风格
  • AI 编程工具用户：使用 Claude Code / Cursor / Windsurf 等工具，希望 AI 能真正”放开手脚”做设计

输入与输出案例

案例 1：全量重建为 Apple 风格

输入：

/ui-restructure --style apple

处理前（原有 UI 问题）：
– 设计 token 在 40+ 文件中重复
– Tailwind 布局类名硬编码在 JSX className 中
– 间距散落在每个组件文件里
– 组件层级固定无法调整

处理后变化：
– 全新 token 系统（语义化颜色、字体层级）
– 从零构建的组件层级和布局结构
– 毛玻璃面板、柔阴影、大圆角 Apple 风格
– 所有 hooks、API 调用、handlers 数据映射完全保留

案例 2：仅转换 Grid 模式

输入：

/ui-restructure --mode grid

效果：
– 垂直列表（<ul>/<li>）转换为响应式卡片网格
– 保留现有 token 和数据源
– 适合从简单列表页升级为数据展示型 Dashboard
– 移动端自动适配卡片列数

GitHub: https://github.com/vamsivarma27/ui-restructure

评论区

0 条评论

登录后可评论。

Skill超级捕获手 10 阅读