AI 技能AI 插件【免费下载链接】stitch-skillsA 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.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载导读本文讲解 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 项目的文件发现顺序优先级从高到低高层文件给出设计意图低层文件展示实际落地优先级文件提取目标1nuxt.config.ts/nuxt.config.js全局 CSS 路径、字体配置、Tailwind/UnoCSS 模块配置2assets/css/main.css或类似文件全局样式、CSS 自定义属性design tokens、字体引入3tailwind.config.js若使用 Tailwind与 React 一致直接提取自定义主题值4plugins/vuetify.ts若使用 Vuetify自定义调色板与排版的主题定义5组件style块同置样式scoped 或全局1.nuxt.config.ts/nuxt.config.jsNuxt 配置是整个应用的入口它通常以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若使用 VuetifyVuetify 项目把主题声明显式写入插件文件详见下文第四节这是整个项目中信号最强的设计系统声明。5. 组件style块最后才是逐个查看组件内的同置样式。文档特别提醒这一层文件数量多、样式零散不要逐一读完所有组件而是挑选 45 个最具代表性的组件按钮、卡片、导航、表单、布局壳来归纳使用模式。三、单文件组件SFC样式提取Vue 将模板、脚本与样式捆绑在同一个.vue文件中以下是一个典型的卡片组件template div classcard h2 classcard__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(--*)引用 → 回溯全局 CSSvar(--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深灰调青海军蓝而不是简单写 Bluebackground/surface→ 页面底色与卡片表面色构成Primary Foundation主基础层secondary→ 次级文字或次级操作error/success→ 功能状态色Functional States。同时注意defaultTheme: light这一配置——若存在多个themes如light与dark应逐一提取并说明哪个是默认主题这在 DESIGN.md 的视觉主题与氛围小节中是重要信息。五、Quasar / PrimeVue / Element Plus 的组件库主题Vue 生态的组件库各自拥有独立的主题体系文档给出的定位方式如下组件库主题定义位置提取目标Quasarquasar.config.js→framework.config.brand品牌色定义PrimeVueassets/下的 CSS 主题文件或主题 preset 配置主题色与样式变量Element Pluselement-variables.scssSCSS 变量这里的关键方法论是寻找覆盖文件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.mdPhase 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 / Nuxtnuxt.config.ts→ 全局 CSS →plugins/vuetify.ts样式与组件同置SFC、约定式目录references/vue.mdReact / Next.js / Tailwindtailwind.config.js配置即设计系统theme.extend直接可读references/react-tailwind.mdSvelte / SvelteKitsrc/app.css每个.svelte文件的style默认 scopedreferences/svelte.mdAngular组件样式 全局样式样式与组件分离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 frontmatternamecolors格式与 examples/DESIGN.md 一致大气氛围章节为编辑式描述而非 CSS 语法罗列颜色已去重合并Stitch 生成备注使用自然语言。遵循上述模式一个 Vue 2/3、Nuxt 2/3、Vuetify/Quasar/PrimeVue/Element Plus 甚至多组件库混用的代码库都能在不构建、不运行的情况下被系统性地逆推出完整、可复用的设计系统文档。赞分享AI 技能AI 插件【免费下载链接】stitch-skillsA 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.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载相关推荐从 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 skAI 技能前端设计系统上一篇3行代码实现Prism多主题切换从白天到黑夜的无缝切换方案下一篇从源码到界面Hosts.prefpane的Cocoa GUI实现原理深度剖析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考