分享前端项目常用的三个Skills--Vue、React 与 UI 核心 Skills本文分享了前端三个高频使用的age

前言

在过去的几年里，前端开发经历了从手写每一行 HTML/CSS 或使用组件库（Ant Design, Element Plus），到 AI 辅助编程（GitHub Copilot, Cursor）的巨大跨越。然而，2025 年以来的技术浪潮正将我们推向一个新的阶段：从 “AI 辅助” 向 “AI Agent（智能体)” 转型。

在这种模式下，开发者不再只是接收代码建议，而是为 AI 提供一系列“技能包（Skills）”，让 AI 能够理解复杂的框架逻辑、项目结构乃至视觉审美。

什么是Skills? 用一句话概括就是： Skills = 领域专业知识 + 你的项目偏好 + 严厉的审查官。

1. 为什么需要 Skills？

在 AI 编程的语境下，Skills 的出现是为了解决大模型（LLM）“博而不精”的天然缺陷。

1.1 通才 AI：知识的“图书馆”

一个没有安装 Skills 的大模型（如 GPT-5 或 Claude 4.5）就像一个读过全世界所有代码的毕业生：

广度惊人：它知道几百种编程语言，甚至能背出 2014 年的过时语法。
深度断层：它不知道你公司内部的封装规范，不知道你的组件命名习惯，更不知道你项目中那个“不能动的老 Bug”。
执行模糊：给它一个需求，它会从 100 种可能的解法中随机选一个给你，不管这是否符合你现在的工程环境。

1.2 专才 AI：自带“十年工龄”的骨干

安装了 Skills 的 AI（Agent），则完成了从“大模型”到**“领域智能体”**的进化：

安装了 Skills 之后，它不再是那个满嘴跑火车的机器人，而是一个被你强制要求“必须按这套规约写代码”的资深开发。

特性	通才 AI (Generalist)	专才 AI (Specialist with Skills)
思维边界	无边界，容易产生幻觉	有界思维：严格锁定在当前技术栈内
项目理解	盲人摸象，只看当前文件	全局视野：理解路由、状态管理、样式体系
输出质量	“大概能跑”的代码	“符合工程直觉”的生产级代码
角色定位	知识检索器	虚拟技术负责人 (Virtual Lead)

2. Skills 里面到底装了什么

一个 Skills 文件夹里通常不是深奥的代码，而是三样东西：

规约（Rules） ：一堆告诉 AI “准许做什么”和“严禁做什么”的指令（通常是 .cursorrules 或 .md 文件）。
上下文（Context） ：你项目的特殊结构。比如你的路由写在哪里，你的接口是怎么封装的。
工具（Tools） ：一些自动化的小脚本。比如 AI 写完代码后，自动运行一下 npm lint 检查有没有写错。

如果说通才 AI 提供的是“概率” （它觉得这段代码看起来像对的），那么 Skills 提供的就是“确定性”。它把行业内顶尖架构师的经验，封装成了 AI 触手可及的“条件反射”。

本文将分享前端高频使用的三个核心技能包：vue-skills、react-skills（agent-skills）以及 ui-skills（uipro-cli），剖析它们如何通过标准化的指令集，彻底改变我们的开发流。

Vue-Skills

Vue-Skills涵盖了 Vue 3 项目的最佳实践、TypeScript 类型安全增强、IDE 性能优化以及现代 Vue 编码模式。它们旨在解决大型 Vue 项目中常见的开发痛点，如 IDE 卡顿、类型推断错误、构建配置以及代码可维护性问题。

1.1 核心规则

可以将这些规则概括为以下 5 个主要方面：

1. 开发体验与 IDE 性能优化 (IDE & Performance)

关注如何解决大型项目中 VSCode 和 Volar 插件的性能问题。

codeactions-save-performance.md: 解决在大型 Vue 项目中保存文件时耗时过长（30秒+）的问题，建议禁用或限制耗时的 Code Actions。
volar-3-breaking-changes.md: 针对 Volar 升级带来的变更进行适配，确保插件功能正常。
vue-directive-comments.md: 介绍了@vue-ignore, @vue-skip,@vue-expect-error等指令注释，用于在模版中精细控制类型检查行为（类似 @ts-ignore）。

2. TypeScript 类型安全与配置 (Type Safety & Configuration)

致力于提升 Vue 模版和组件的类型检查严格度，减少运行时错误。

vue-tsc-strict-templates.md: 推荐开启 strictTemplates，在编译时捕获模版中未定义的组件和属性错误。
vue-router-typed-params.md: 解决unplugin-vue-router,导致的路由参数类型丢失问题（Property does not exist），推荐更严格的路由参数类型定义。
data-attributes-config.md: 配置 vueCompilerOptions 以支持 data-*属性的类型检查，避免误报类型错误。
** module-resolution-bundler.md**: 推荐在 tsconfig.json 设置 "moduleResolution": "bundler" 以适配现代构建工具。
with-defaults-union-types.md: 修复在defineProps中使用联合类型（如 string | false）配合withDefaults 时的虚假警告问题。

3. Vue 3 现代编码模式 (Modern Patterns)

推广 Vue 3.4+ 的新特性及更优雅的代码组织方式。

define-model-update-event.md: 推荐使用 Vue 3.4 的 defineModel()宏，替代手写的props+ emit('update:modelValue')模式。
extract-component-props.md: 建议将复杂的defineProps类型提取为独立的 TS 接口，提高代码可读性和复用性。
script-setup-jsdoc.md: 规范 <script setup>中的 JSDoc 使用，增强组件文档和类型提示。
fallthrough-attributes.md: 关于 inheritAttrs: false和透传属性（Attributes Fallthrough）的最佳实践。

4. 运行时陷阱与调试 (Runtime Caveats & Debugging)

解决特定场景下的怪异 bug 和运行时问题。

deep-watch-numeric.md: 警告在侦听（watch）数字数组时使用 deep: true的陷阱（新旧值相同），建议使用深拷贝。
duplicate-plugin-detection.md: 防止 Vue 插件（如 Pinia）在微前端或特定环境下被重复注册。
hmr-vue-ssr.md: 处理服务端渲染（SSR）场景下的热更新（HMR）问题。

5. 测试与样式 (Testing & Styling)

pinia-store-mocking.md: 关于如何在测试中正确 Mock Pinia Store 的指南。
strict-css-modules.md: 开启 CSS Modules 的严格模式，防止使用未定义的 class 名。

1.2 安装方法

通过简单的命令，你可以将此技能植入到你的 AI 工作流中：

npx add-skill hyf0/vue-skills

执行上面的指令后，会自动检查IDE，终端环境

选择安装在当前项目，还是对所有项目生效

选择下载一份每个项目建立软链接，还是将规则文件复制在每个项目下

安装完成之后的显示

1.3 实战案例

案例展示了当 AI Agent 加载了 vue-best-practices 技能包后，如何通过 “提取组件属性 (Extract Component Props)” 规则，优雅地解决二次封装组件时的类型继承问题。

场景描述：我们正在基于一个第三方库的 BaseButton.vue 组件，封装一个我们项目专用的 ProButton.vue。我们需要让 ProButton 继承 BaseButton 的所有属性（Props），同时增加一个自定义属性 loading。

1. 优化前：常规“盲写”模式

现象：如果没有技能包指导，开发者往往会手动重复定义属性，或者使用不推荐的 Vue 内部实例类型。

<!-- ProButton.vue -->
<script setup lang="ts">
// ❌ 错误做法 1：手动重复定义，维护成本极高
interface Props {
  text: string;
  color?: string;
  loading: boolean; // 自定义属性
}

// ❌ 错误做法 2：使用 InstanceType，会包含大量的 Vue 内部属性，干扰类型提示
import type BaseButton from "./BaseButton.vue";
type BaseProps = InstanceType<typeof BaseButton>["$props"];

defineProps<BaseProps & { loading: boolean }>();
</script>

2. 优化后：使用 `vue-component-type-helpers`

技能规则应用：

规则名称：extract-component-props.md
核心逻辑：利用 vue-component-type-helpers 库精确提取组件定义的 Props，排除内部干扰项。

重构结果：代码简洁，类型提示完美，且具备 100% 的继承安全性。

<!-- ProButton.vue -->
<script setup lang="ts">
import type { ComponentProps } from "vue-component-type-helpers";
import BaseButton from "./BaseButton.vue";

// ✅ 符合最佳实践：精确提取子组件的 Props 类型
type BaseButtonProps = ComponentProps<typeof BaseButton>;

// 扩展基础组件的属性
interface Props extends BaseButtonProps {
  loading?: boolean;
  size?: "sm" | "md" | "lg";
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  size: "md",
});
</script>

<template>
  <div class="pro-button">
    <!-- 将剩余属性透传给基础组件 -->
    <BaseButton v-bind="$attrs" :loading="loading">
      <slot />
    </BaseButton>
  </div>
</template>

3.核心价值总结

维度	传统方式	Skills 方案 (Vue Best Practices)
开发效率	需要翻阅源码查找子组件 Props	自动提取，AI 自动完成类型桥接
类型提示	混杂大量 `$props` 内部属性，极难看清	纯净提示，仅显示业务定义的属性
维护性	子组件增加 Prop 后，包装组件需手动同步	自动同步，类型定义随子组件动态更新
代码洁癖	充满大量的 Hack 或冗余定义	标准工程化，符合 Vue 3 官方推荐模式

提示：安装技能包后，当你在写高阶组件（HOC）或二次封装组件时，AI 会自动识别场景并提示你使用 vue-component-type-helpers 进行类型提取，确保你的 TypeScript 链路在全项目保持强类型约束。

2.1 核心功能

1. React 组件组合模式 (`vercel-composition-patterns`)

适用场景：

组件重构：当核心组件因布尔属性（Boolean props）爆炸（如 isLoading, isSmall 等）而难以维护时。
库级开发：构建需要高度灵活、可扩展 API 的企业级 UI 组件库。
复杂交互设计：实现具有强父子联动逻辑的复合组件（如 Tabs, Select, Menu）。

核心规则：

架构优先组合：严禁无限制叠加布尔属性，推崇使用 复合组件 (Compound Components) 和 Context 共享状态。
接口解耦：Provider 集中管理状态逻辑，子组件仅通过约定的 Context 接口进行交互。
显式变体 (Explicit Variants)：与其给一个组件加 10 个布尔值，不如创建明确命名的变体组件（如 PrimaryButton, IconButton）。
组合优于配置：优先通过 children 进行 UI 拼装，而非通过庞大的配置对象或大量的 renderX Props。

2. React & Next.js 性能最佳实践 (`vercel-react-best-practices`)

适用场景：

性能调优：页面响应慢、首屏渲染 (LCP) 时间长或存在明显的交互延迟。
现代 Web 构建：基于 Next.js App Router 架构的全栈开发。
大规模数据处理：需要并行获取多个 API 数据且必须避免渲染阻塞的场景。

核心规则：

消除瀑布流 (Waterfalls)：性能优化的 头等大事。强制要求并行化独立异步操作，并利用 Suspense 实现流式 (Streaming) 内容分发。
打包体积压缩：禁用 Barrel Files (单一入口导出文件) 以保护 Tree-shaking；强制使用 next/dynamic 进行代码分割。
服务端性能 (RSC)：利用 React.cache() 进行请求级数据去重，最小化传输至客户端的序列化数据量。
重渲染控制：避免在 Effects 中处理同步状态，提倡使用派生状态 (Derived State)；利用 startTransition 处理非紧急更新。

3. React Native & Expo 移动开发指南 (`vercel-react-native-skills`)

适用场景：

移动端丝滑体验：针对 iOS 和 Android 优化长列表滑动和复杂手势动画。
跨端性能消除：解决由于 JS 线程与 UI 线程通信延迟导致的性能瓶颈。
原生功能集成：在 Expo 或原生环境中处理多媒体、字体和原生组件的高性能接入。

核心规则：

列表性能 (最关键)：强制使用 FlashList 替代 FlatList；列表项必须经过 memo 处理以减少多余重绘。
GPU 加速动画：动画属性仅限在 transform 和 opacity 上操作，确保逻辑在 UI 线程直接执行。
原生 UI 适配：始终使用 expo-image 优化图片加载；优先使用 Pressable 替代 TouchableOpacity 以获得更好的响应响应。
渲染规范：文本必须且只能包裹在 Text 组件内；禁止在条件渲染中使用 &&（防止在移动端渲染出数字 0）。

4. Web 界面设计指南 (`web-design-guidelines`)

适用场景：

UI/UX 审计：项目发布前检查 UI 间距、颜色 Token 和视觉输出的一致性。
无障碍性 (A11y)：确保网站符合 Web 辅助功能标准，提升产品包容性。
自动化 UI 审查：在 Code Review 阶段快速发现硬编码和非标准交互实现。

核心规则：

动态合规检查：通过远程拉取最新的设计系统准则，确保证审视标准始终是最新的。
无障碍强制约束：严格检查颜色对比度、ARIA 标签完整性以及键盘导航流程。
高精度反馈：能够精确到代码行指出不符合设计系统规范（如未使用的 Design Tokens）的地方。

2.2 安装方法

npx add-skill vercel-labs/agent-skills

可以只选择安装其中的一个规则集，比如说vercel-react-best-practices

其余步骤，与Vue-Skills的问询问题一模一样，不再赘述。

2.3 用法示例

在一个 Next.js App Router 项目的个人中心页面中，我们需要同时获取用户信息、订单列表和优惠券信息。

1. 优化前：串行瀑布流 (Sequential Waterfall)

现象：如果没有技能包约束，AI 可能会写出标准的串行代码。这种方案下，总耗时是三个接口请求时间的累加（T1 + T2 + T3）。

// ❌ 不符合最佳实践：串行阻塞
export default async function ProfilePage() {
  // 请求 1：获取用户信息
  const user = await fetchUser();

  // 请求 2：依赖于 user.id，但在请求 1 完成前无法开始
  const orders = await fetchOrders(user.id);

  // 请求 3：不依赖于前二者，却被白白阻塞
  const coupons = await fetchCoupons();

  return (
    <div>
      <UserInfo user={user} />
      <OrderList orders={orders} />
      <CouponList coupons={coupons} />
    </div>
  );
}

2. 优化后：并行获取 + 组件组合 (Parallel & Composition)

技能规则应用：

async-parallel：识别出不互相关联的请求，并并行启动。
server-parallel-fetching：利用服务器组件的组合特性，减少主线程阻塞。

重构结果：页面总耗时缩短为（T1 + Max(T2, T3)），且实现了流式分发。

// ✅ 符合最佳实践：并行获取与解耦渲染
import { Suspense } from "react";

export default async function ProfilePage() {
  // 1. 同时启动互不关联的异步任务，不加 await
  const userPromise = fetchUser();
  const couponsPromise = fetchCoupons(); // 并行开始

  // 2. 仅等待必要的基础数据
  const user = await userPromise;

  return (
    <div>
      {/* 优先渲染用户信息 */}
      <UserInfo user={user} />

      {/* 3. 将耗时较长的“订单列表”逻辑下移至组件内部，并行获取 */}
      <Suspense fallback={<Skeleton />}>
        <OrderDataLayer userId={user.id} />
      </Suspense>

      {/* 4. 将预启动的“优惠券”Promise 传入组件 */}
      <Suspense fallback={<Skeleton />}>
        <CouponDataLayer promise={couponsPromise} />
      </Suspense>
    </div>
  );
}

// 独立的异步数据层组件
async function OrderDataLayer({ userId }) {
  const orders = await fetchOrders(userId); // 并行进行的请求
  return <OrderList orders={orders} />;
}

async function CouponDataLayer({ promise }) {
  const coupons = await promise; // 使用外部传入的 Promise
  return <CouponList coupons={coupons} />;
}

3. 核心价值总结

优化点	传统方案	Skills 方案 (Vercel Best Practices)
请求速度	累加耗时 (Waterfall)	并发执行，耗时大幅度缩减
用户感知	全黑屏等待，直到所有数据返回	流式渲染 (Streaming)，局部内容先出
代码结构	逻辑逻辑堆在主页面，难以复用	原子化组件，数据获取逻辑与渲染高度内聚
AI 表现	随机生成，依赖运气	确定性重构，严格执行 Vercel 性能规约

结论：通过注入 vercel-react-best-practices 技能，AI Agent 从一个简单的“代码生成器”转变为具备“性能自觉”的高级架构师。

三、 UI-Skills

如果说前两个工具解决了“逻辑”问题，那么 uipro-cli 及其关联的 ui-skills 则是为了解决“审美与交付”问题。 UI/UX Pro Max：赋能 AI Agent 的专业设计大脑。uipro-cli 是一个功能强大的命令行工具，专门用于为各种 AI 编程助手（如 Claude Code, Cursor, Windsurf, Antigravity 等）一键注入 UI/UX Pro Max 专家级技能。它让 AI 不仅能写代码，更能像资深设计师一样思考。

2.1 核心功能

1. 多元化视觉风格 (67 种 UI 风格)

UI/UX Pro Max 内置了 67 种最前沿的视觉设计风格，确保 AI 生成的界面告别“通用感”。

现代趋势：支持 Glassmorphism（玻璃拟态）、Claymorphism（粘土拟态）、Minimalism（极简主义）。
特色风格：包括 Brutalism（新野兽派）、Neumorphism（新拟物化）、Bento Grid（便当网格）以及针对 AI 产品的 AI-Native UI 风格。

2. 行业深度色彩与排版 (96 行业色板 + 57 字体配对)

精准色板：提供 96 套针对特定行业（如 SaaS, 电商, 医疗, 金融金融, 美妆）优化的专业色板。
字体艺术：内置 57 组精心挑选的字体组合，无缝集成 Google Fonts，从视觉底层提升产品质感。

3. 跨平台技术栈适配 (13 种主流技术栈)

支持从 Web 到移动端的 13 种主流技术架构，生成的代码即学即用。

Web 端：React, Next.js, Vue, Nuxt.js, Astro, Svelte, HTML+Tailwind, shadcn/ui。
移动端：React Native, Flutter, SwiftUI, Jetpack Compose 等。

4. 专家级 UX 准则与设计推理 (100+ 准则与推理规则)

内置专业的设计逻辑，让 AI 具备“审美自觉”：

UX 指南：涵盖 99 条 UX 最佳实践、反模式规避和 A11y 无障碍规则。
设计推理：拥有 100 条行业推理规则（例如：金融类应用严禁使用 AI 风格的紫粉渐变，以确保稳重感），自动进行交付前的 UI/UX 质量自检。

2.2 安装方法

通过 uipro-cli，你可以在几秒钟内完成技能初始化：

1. 全局安装工具

npm install -g uipro-cli

2. 为指定编辑器初始化技能

# 为 Claude Code 初始化
uipro init --ai claude

# 为 Cursor 初始化
uipro init --ai cursor

# 为所有支持的 AI 助手同时初始化
uipro init --ai all

3. 实战案例

场景描述：用户需要为一个 AI 内容创作平台设计一个数据看板（Dashboard）。用户希望界面现代、直观，并且符合当前流行的审美趋势。

1. 传统 AI 生成：平庸且缺乏设计感

现象：如果没有加载专业 UI 技能包，AI 通常只会根据组件库（如 shadcn/ui）的基础示例，堆砌出缺乏灵魂的列表和卡片。色调单一（通常只用蓝色或灰阶），布局死板。

// ❌ 传统 AI 的“直觉”：基础的 Grid 布局，没有任何样式特色
export default function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-4 p-4">
      <Card title="总收入" value="$12,000" />
      <Card title="活跃用户" value="1,240" />
      <Card title="API 调用" value="45.2k" />
      <div className="col-span-3">主要统计图表</div>
    </div>
  );
}

2. UI/UX Pro Max 介入：具备“审美自觉”的设计

技能规则应用：

风格锁定：选择了 Bento Grid（便当网格） 布局。
行业色板：套用了 SaaS 行业高阶调色盘。
设计推理：AI 会自动添加微交互动画、圆角分层（Glassmorphism 效果）以及符合产品气质的字体排版。

重构指令：

“使用 UI/UX Pro Max 技能，为我的 AI 创作平台设计一个 Bento Grid 风格的统计看板。色调选用‘高级钛金灰’配合‘赛博蓝’点缀，并要求包含毛玻璃质感。”

重构结果（语义描述与关键代码片段）：

// ✅ 符合设计的组件 (自动生成的 Tailwind 样式)

// 使用了 Bento Grid 非对称网格布局
export function BentoDashboard() {
  return (
    <section className="bg-slate-950 p-8 min-h-screen font-sans text-slate-100">
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-6">
        {/* 高度分层的毛玻璃卡片 (Glassmorphism) */}
        <div
          className="md:col-span-2 md:row-span-2 bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-3xl p-8 
                        hover:bg-slate-800/60 transition-all duration-300 group"
        >
          <header className="flex justify-between">
            <h3 className="text-xl font-bold tracking-tight">创作产出分析</h3>
            <div className="h-2 w-2 bg-cyan-400 rounded-full animate-pulse" />
          </header>
          {/* AI 自动推荐的图表配色与坐标轴样式 */}
          <MainAnalyticChart color="#22d3ee" />
        </div>

        {/* 紧凑型统计卡片 */}
        <div className="bg-slate-900/50 backdrop-blur-md rounded-3xl p-6 border border-white/5">
          <Subtitle>API 余额</Subtitle>
          <Value className="text-3xl font-mono">84.2%</Value>
        </div>

        {/* 动态微交互元素 */}
        <div className="bg-cyan-500/10 rounded-3xl p-6 border border-cyan-500/20 text-cyan-400">
          <div className="text-sm font-semibold mb-2">服务状态</div>
          <div className="text-lg">系统运行正常</div>
        </div>

        {/* 更多 Bento 网格单元... */}
      </div>
    </section>
  );
}

3.核心价值总结

维度	传统构建	UI/UX Pro Max (uipro)
布局逻辑	简单的 1/2 或 1/3 等分	非对称动态布局 (如 Bento Grid, Masonry)
色彩应用	基础颜色（#3b82f6），视觉单调	分层色彩系统，包含渐变、阴影与半透明层
细节打磨	只有基础功能	微交互、骨架屏、平滑过渡自动注入
设计自检	需要人工多次反馈返工	内置反模式自检，首次生成即达“可交付”标准

结语：前端开发者的角色转变

随着 vue-skills、react-skills 和 ui-skills 的普及，前端开发者的角色正在发生深刻变化。我们正在从 “代码编写者（Coder）” 转变为 “AI 指令师（Prompt Engineer）” 和 “技术评审员（Reviewer）” 。

传统的 AI 辅助仅仅是“搜索”的变种，而 Skills 模式代表了 “领域知识的预装载” 。

降低认知负荷：你不需要记住 Vue 3 的所有新特性或 Tailwind 的上千个类名，Skills 充当了你的“外部脑”。
代码风格统一：团队只需约定一套 Skill 脚本，就能保证所有 AI 生成的代码风格高度一致，甚至比人类手动编写的更规范。
快速原型到生产：它极大地缩短了从 MVP（最小可行性产品）到正式发布的时间，让前端开发者更关注于“业务价值”而非“语法实现”。

掌握这些 Skills 并不意味着放弃底层的学习，相反，只有深刻理解 Vue/React 原理和 UI 规范的人，才能通过这些技能包更好地引导 AI，释放出前所未有的生产力。

分享前端项目常用的三个Skills--Vue、React 与 UI 核心 Skills

前言

1. 为什么需要 Skills？

2. Skills 里面到底装了什么

Vue-Skills

1.1 核心规则

1. 开发体验与 IDE 性能优化 (IDE & Performance)

2. TypeScript 类型安全与配置 (Type Safety & Configuration)

3. Vue 3 现代编码模式 (Modern Patterns)

4. 运行时陷阱与调试 (Runtime Caveats & Debugging)

5. 测试与样式 (Testing & Styling)

1.2 安装方法

1.3 实战案例

1. 优化前：常规“盲写”模式

2. 优化后：使用 vue-component-type-helpers

3.核心价值总结

2.1 核心功能

1. React 组件组合模式 (vercel-composition-patterns)

2. React & Next.js 性能最佳实践 (vercel-react-best-practices)

3. React Native & Expo 移动开发指南 (vercel-react-native-skills)

4. Web 界面设计指南 (web-design-guidelines)

2.2 安装方法

2.3 用法示例

1. 优化前：串行瀑布流 (Sequential Waterfall)

2. 优化后：并行获取 + 组件组合 (Parallel & Composition)

3. 核心价值总结

三、 UI-Skills

2.1 核心功能

1. 多元化视觉风格 (67 种 UI 风格)

2. 行业深度色彩与排版 (96 行业色板 + 57 字体配对)

3. 跨平台技术栈适配 (13 种主流技术栈)

4. 专家级 UX 准则与设计推理 (100+ 准则与推理规则)

2.2 安装方法

1. 全局安装工具

2. 为指定编辑器初始化技能

3. 实战案例

1. 传统 AI 生成：平庸且缺乏设计感

2. UI/UX Pro Max 介入：具备“审美自觉”的设计

3.核心价值总结

结语：前端开发者的角色转变

2. 优化后：使用 `vue-component-type-helpers`

1. React 组件组合模式 (`vercel-composition-patterns`)

2. React & Next.js 性能最佳实践 (`vercel-react-best-practices`)

3. React Native & Expo 移动开发指南 (`vercel-react-native-skills`)

4. Web 界面设计指南 (`web-design-guidelines`)