- AI 技能
- AI 插件
【免费下载链接】stitch-skills
A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.
导读
本文讲解 stitch-design 插件中extract-design-md技能针对 Vue / Nuxt 项目的专属提取模式（对应 references/vue.md）。Vue 项目的样式架构具有鲜明特征：样式与组件同文件共存于<style>块内，Nuxt 又叠加了约定式目录结构，因此需要一套专门的"文件发现顺序"来逐层定位设计令牌。读完本文，你将掌握从nuxt.config.ts、全局 CSS、Tailwind 配置、Vuetify 主题定义到组件<style>块的完整提取链路，能独立把一个 Vue/Nuxt 代码库的视觉语言（颜色、字体、圆角、间距）整理成可供 Stitch 消费的 DESIGN.md。
一、为什么 Vue 项目需要独立的提取模式
在extract-design-md技能的 Phase 1 中，技能会先通过package.json判定框架，再要求 Agent 读取与框架匹配的参考文档（见 SKILL.md）。Vue 之所以与 React、Svelte 等并列单列一份参考，是因为它的样式架构天然不同：
- 样式与组件同置：Vue 单文件组件（SFC）把
<template>、<script>、<style>打包在同一个.vue文件中，组件级样式散落在各个组件内部，而不是集中在独立样式表； - 约定式目录：Nuxt 引入了
assets/、layouts/、composables/等约定目录，全局样式、字体、设计令牌的存放位置都有默认规范； - 主题声明显式化：Vuetify、Quasar、PrimeVue、Element Plus 等 Vue 生态组件库都把主题定义收敛在插件或配置文件中，是提取设计系统的最高信号来源。
因此，"先读哪几个文件、每个文件里找什么"就成了 Vue 提取流程的核心。下面按官方推荐的优先级顺序逐一展开。
二、文件发现顺序：五层优先读取清单
references/vue.md给出了 Vue/Nuxt 项目的文件发现顺序，优先级从高到低，高层文件给出"设计意图"，低层文件展示"实际落地"：
| 优先级 | 文件 | 提取目标 |
|---|---|---|
| 1 | nuxt.config.ts/nuxt.config.js | 全局 CSS 路径、字体配置、Tailwind/UnoCSS 模块配置 |
| 2 | assets/css/main.css（或类似文件） | 全局样式、CSS 自定义属性（design tokens）、字体引入 |
| 3 | tailwind.config.js（若使用 Tailwind） | 与 React 一致，直接提取自定义主题值 |
| 4 | plugins/vuetify.ts（若使用 Vuetify） | 自定义调色板与排版的主题定义 |
| 5 | 组件<style>块 | 同置样式（scoped 或全局） |
1.nuxt.config.ts/nuxt.config.js
Nuxt 配置是整个应用的入口，它通常以css数组显式声明需要注入到每个页面的全局样式表。文档特别指出，该文件还可能包含字体配置以及 Tailwind / UnoCSS 模块的配置项。例如：
// nuxt.config.ts export default defineNuxtConfig({ css: ['~/assets/css/main.css'], modules: ['@nuxtjs/tailwindcss'], app: { head: { link: [{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }], }, }, })从这些配置可以推断：全局样式表有哪些、字体从哪里加载、Tailwind 是否被启用。这是决定后续该往哪些文件深入的第一份线索。
2.assets/css/main.css（全局样式）
Nuxt 约定把全局样式放在assets/目录。该文件通常定义:root级别的 CSS 自定义属性（如--color-*、--font-*）、字体@import/@font-face声明和基础样式。文档强调这是全局样式、CSS 自定义属性和字体引入的核心位置。
3.tailwind.config.js（若使用 Tailwind）
与 React 场景完全一致：tailwind.config.js中theme.extend.colors、fontFamily、borderRadius、spacing、screens等自定义值本身就是设计系统的定义。可对照 references/react-tailwind.md 中的提取方法直接读取。
4.plugins/vuetify.ts（若使用 Vuetify）
Vuetify 项目把主题声明显式写入插件文件（详见下文第四节），这是整个项目中信号最强的设计系统声明。
5. 组件<style>块
最后才是逐个查看组件内的同置样式。文档特别提醒：这一层文件数量多、样式零散，不要逐一读完所有组件，而是挑选 4～5 个最具代表性的组件（按钮、卡片、导航、表单、布局壳）来归纳使用模式。
三、单文件组件（SFC）样式提取
Vue 将模板、脚本与样式捆绑在同一个.vue文件中，以下是一个典型的卡片组件：
<template> <div class="card"> <h2 class="card__title">{{ title }}</h2> </div> </template> <style scoped> .card { background: var(--color-surface); border-radius: 12px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .card__title { font-size: 1.5rem; font-weight: 600; color: var(--color-text-primary); } </style>文档提炼出三个关键提取点：
var(--*)引用 → 回溯全局 CSS：var(--color-surface)、var(--color-text-primary)这类引用本身不是值，而是指向全局 CSS（如assets/css/main.css的:root）中定义的令牌。提取时必须以"引用名 → 实际值"的映射方式记录，并保留变量名的语义（--color-*、--font-*、--radius-*等命名本身就是角色的线索）；scoped样式 → 组件专属，但能暴露一致模式：scoped属性只保证样式不泄漏到其他组件，但多个组件若使用了相同的border-radius、padding或颜色引用，说明存在跨组件的设计约定（详见第六节）；- BEM 命名（
.card__title）→ 组件层级结构：.card__title中的__表明它是.card的元素（element），这种命名习惯暗示了组件的 DOM 层级与样式组织方式，有助于在 DESIGN.md 中描述组件的内部结构。
四、Vuetify 主题提取
Vuetify 项目通过createVuetify显式声明设计系统，references/vue.md给出了完整示例：
// plugins/vuetify.ts export default createVuetify({ theme: { defaultTheme: 'light', themes: { light: { colors: { primary: '#294056', secondary: '#6B6B6B', background: '#FCFAFA', surface: '#F5F5F5', error: '#EF4444', success: '#10B981', } } } } })文档指出：这段代码就是设计系统的声明本身。提取的核心动作是"将每个 key 映射到功能角色，并赋予描述性名称"：
primary: '#294056'→ 品牌主色，通常承载 CTA 按钮、导航高亮等交互角色。按 SKILL.md Phase 2 的命名规范（见 SKILL.md），应起一个唤起颜色性格的名字，例如 "Deep Muted Teal-Navy"（深灰调青海军蓝），而不是简单写 "Blue"；background/surface→ 页面底色与卡片表面色，构成"Primary Foundation（主基础层）"；secondary→ 次级文字或次级操作；error/success→ 功能状态色（Functional States）。
同时注意defaultTheme: 'light'这一配置——若存在多个themes（如light与dark），应逐一提取并说明哪个是默认主题，这在 DESIGN.md 的"视觉主题与氛围"小节中是重要信息。
五、Quasar / PrimeVue / Element Plus 的组件库主题
Vue 生态的组件库各自拥有独立的主题体系，文档给出的定位方式如下：
| 组件库 | 主题定义位置 | 提取目标 |
|---|---|---|
| Quasar | quasar.config.js→framework.config.brand | 品牌色定义 |
| PrimeVue | assets/下的 CSS 主题文件或主题 preset 配置 | 主题色与样式变量 |
| Element Plus | element-variables.scss | SCSS 变量 |
这里的关键方法论是："寻找覆盖文件（override file）——项目独有的值就藏在那里"。组件库自带的是通用默认样式，只有项目对主题的覆盖（override）才是这个项目真正独特的设计语言。这与 references/react-tailwind.md 中"组件库集成"一节的思路完全一致：Chakra 看extendTheme()调用、MUI 看createTheme()、Ant Design 看ConfigProvider的 theme 属性、shadcn/ui 看globals.css中的 CSS 自定义属性——覆盖值才是设计系统，默认值应记录但不必强调。
六、CSS 作用域行为：从 scoped 样式中发现设计约定
Vue 的scoped属性会在编译时为选择器附加 data 属性（如[data-v-xxxx]）以实现 CSS 隔离。这意味着单个组件内的scoped样式严格属于该组件，不能直接视为全局约定。
但文档给出了可操作的反向用法：扫描多个组件，寻找重复出现的值——多个组件使用相同的border-radius、相近的padding、一致的色值引用，这些"跨组件重复模式 = 设计系统约定"。例如，如果 5 个组件的<style scoped>中都出现border-radius: 12px，就可以推断12px是该项目的卡片圆角令牌；同理，反复出现的padding: 2rem、box-shadow: 0 2px 8px rgba(0,0,0,0.06)都应被归纳为间距与阴影约定，而不是孤立地记录在某个组件条目下。
实际操作中建议先集中收集各组件<style>块中的var(--*)引用清单，再去全局 CSS 中查值；对没有走令牌的硬编码值，则按"近似值去重 + 上下文归类"处理（对应 references/plain-css.md 中的颜色提取策略）。
七、Nuxt 专属模式
Nuxt 的约定式目录让设计系统有了固定的"藏身之处"，文档列出四个高价值位置：
app.vue或layouts/default.vue— 根布局，揭示全局背景色、字体加载方式和整体页面结构。默认布局的background-color、font-family通常就是整个应用的视觉基调；assets/— 全局 CSS、字体文件与图片的存放目录，对应前文第 2 优先级；composables/— 可能包含useTheme或useDesignTokens这类可组合函数。若存在，主题/令牌数据通常以可编程方式集中管理，是直接可读取的设计令牌来源；nuxt.config.ts的css数组— 显式列出自动注入到每个页面的全局样式表，是确认"哪些样式作用于全站"的最权威依据。
此外，SvelteKit 场景与之高度相似（+layout.svelte承载全局结构、$lib/存放共享主题），可参考 references/svelte.md 互为印证。
八、从提取到 DESIGN.md：与 extract-design-md 工作流的衔接
本参考文档是extract-design-md技能的"框架专属配方"，它不是孤立存在的。完整的落地路径是（见 SKILL.md）：
- Phase 1 项目发现：读取
package.json判定 Vue/Nuxt，读取本参考确定文件发现顺序； - Phase 2 深度提取：按六大设计维度（视觉主题与氛围、颜色调色板与角色、排版规则、组件样式、布局原则、Stitch 生成备注）逐项从上述文件收集数据并合成描述性语言；
- Phase 3 输出 DESIGN.md：将结果写入项目目录的
.stitch/DESIGN.md。
SKILL.md 特别强调一个硬性要求：DESIGN.md必须以 YAML frontmatter 开头，包含name与colors映射，格式严格参照 examples/DESIGN.md：
--- name: Alpine Peak colors: surface: '#fcf8fa' primary: '#000000' background: '#fcf8fa' typography: display-lg: fontFamily: Inter fontSize: 48px fontWeight: '800' lineHeight: 56px letterSpacing: -0.02em rounded: md: 0.75rem spacing: unit: 4px ---从 Vue 项目中提取得到的 Vuetify 调色板、var(--*)令牌、Tailwind 扩展值等，最终都要落到这样的结构化 frontmatter 中，再配以## Colors、## Typography、## Layout & Spacing等 Markdown 章节。这些结构化数据是后续其他技能（如manage-design-system的 Stitch API 集成）解析设计系统的前提。
九、与其他框架参考文档的对照
本参考是extract-design-md五份框架参考之一，理解它与兄弟文档的异同有助于快速切换项目类型：
| 框架 | 最高信号文件 | 特点 | 参考文档 |
|---|---|---|---|
| Vue / Nuxt | nuxt.config.ts→ 全局 CSS →plugins/vuetify.ts | 样式与组件同置（SFC）、约定式目录 | references/vue.md |
| React / Next.js / Tailwind | tailwind.config.js | 配置即设计系统，theme.extend直接可读 | references/react-tailwind.md |
| Svelte / SvelteKit | src/app.css | 每个.svelte文件的<style>默认 scoped | references/svelte.md |
| Angular | 组件样式 + 全局样式 | 样式与组件分离 | references/angular.md |
| 纯 CSS / SASS / Less | :root自定义属性 /_variables.scss | 令牌体系即设计系统本体 | references/plain-css.md |
共同方法论是：先读主题/配置/令牌这类"意图层"文件，再抽查组件"落地层"样式——这与 SKILL.md "Tips for Better Extraction" 中"主题文件比组件样式信号更高"的建议一脉相承。
十、落地核对清单
完成 Vue/Nuxt 项目的提取并写出 DESIGN.md 后，对照以下要点自查（由 SKILL.md 的 Quality Checklist 结合 Vue 场景调整）：
- 已按五层发现顺序读取
nuxt.config.*、全局 CSS、Tailwind 配置、组件库主题文件与代表性组件<style>块； - 所有
var(--*)引用均已回溯到全局 CSS 并记录实际值； - Vuetify 主题的每个 key 均已映射到功能角色并配有描述性名称（如 "Deep Muted Teal-Navy"，而非 "Blue"）；
- 跨组件的重复值（圆角、内边距、阴影、色值）已被归纳为设计系统约定，而非零散记录；
- Nuxt 根布局（
app.vue/layouts/default.vue）、assets/、composables/与css数组均被检查； - DESIGN.md 包含 YAML frontmatter（
name+colors），格式与 examples/DESIGN.md 一致； - 大气氛围章节为编辑式描述而非 CSS 语法罗列，颜色已去重合并，Stitch 生成备注使用自然语言。
遵循上述模式，一个 Vue 2/3、Nuxt 2/3、Vuetify/Quasar/PrimeVue/Element Plus 甚至多组件库混用的代码库，都能在不构建、不运行的情况下，被系统性地逆推出完整、可复用的设计系统文档。
- AI 技能
- AI 插件
【免费下载链接】stitch-skills
A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.
相关推荐
从 Warp 官网逆向设计系统：基于 awesome-design-md 构建「暖调暗色 × 克制终端美学」的 AI 可读 DESIGN.md 指南
从 Warp 官网逆向设计系统：基于 awesome design md 构建「暖调暗色 × 克制终端美学」的 AI 可读 DESIGN.md 指南 导读 ：本
文档在 Elementor Core 中扩展原子 CSS 转换器：Shorthand Expander 与 Property Converter 的完整实现指南
在 Elementor Core 中扩展原子 CSS 转换器：Shorthand Expander 与 Property Converter 的完整实现指南 导
AI 技能AI 插件基于 taste-skill 编写 Stitch 语义设计系统：从零生成 anti-slop 的 DESIGN.md 实战指南
基于 taste skill 编写 Stitch 语义设计系统：从零生成 anti slop 的 DESIGN.md 实战指南 导读 ：本文以 taste sk
AI 技能前端设计系统
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
