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点击查看免费下载Svelte 与 Vue、React 一样属于组件化前端框架但它的样式架构独树一帜——每个.svelte文件自带的style块默认是 scoped 的样式与组件被刻意地锁在一起。这意味着在stitch-design插件的stitch::extract-design-md技能即从源码反向提取设计系统的 Agent Skill中针对 Svelte / SvelteKit 项目需要一套不同于其他框架的提取模式设计系统的真正源头往往不在组件内部而是藏在全局 CSS、CSS 自定义属性Custom Properties和共享主题 store 里。本文基于仓库中的 references/svelte.md 参考文档完整讲解面向 Svelte / SvelteKit 项目提取设计系统文件的文件发现顺序、组件样式剖析方法、SvelteKit 布局模式、CSS 自定义属性策略与组件库主题定位技巧并结合extract-design-md技能的整体工作流见 SKILL.md说明如何将这些模式汇总成一份可供 Stitch 消费的DESIGN.md。读完本文你将能够在只读源码、无需构建和渲染应用的前提下为任何 Svelte / SvelteKit 项目产出结构完整、语义化的设计系统文档。一、为什么 Svelte 需要专属的提取模式stitch::extract-design-md技能的核心前提是不依赖构建产物和运行时仅通过阅读源码文件本身样式表、组件文件、主题配置、Tailwind 配置来还原项目的视觉语言。在 SKILL.md 的 Phase 1 中技能首先通过package.json中的依赖信号判断框架package.json中出现svelte即判定为 Svelte / SvelteKit 项目随后会引导 Agent 阅读对应的框架参考文档。Svelte 与 Vue 一样采用样式与组件共置co-location的架构但耦合程度更高每一个.svelte文件都有一个style块且默认启用 scoped作用域隔离样式默认不会泄露到其他组件。这种设计带来一个关键推论——Svelte 项目的设计系统通常不会完整存在于组件内部而是分布在以下三类位置全局 CSS 文件src/app.css/src/app.postcss承载全局样式与 CSS 自定义属性CSS 自定义属性--*变量主题化的主力机制共享主题 storesrc/lib/theme.ts/tokens.ts以 JS 对象形式导出的设计令牌。scoped 样式只能告诉我们某个组件长什么样而真正决定整套视觉语言的 token 层级信息必须从全局文件与主题文件中挖掘。这正是 references/svelte.md 存在的意义它给出了针对 Svelte / SvelteKit 的最优文件发现路径。二、文件发现顺序File Discovery Order对于 Svelte / SvelteKit 项目references/svelte.md 规定了如下按优先级排列的文件读取顺序——优先级越高的文件越能反映设计意图优先级越低的文件越接近实际落地细节优先级文件/目录提取价值1src/app.css/src/app.postcss最重要的文件。全局样式与 CSS 自定义属性设计令牌的核心载体2svelte.config.js可能引用 CSS 预处理器、Tailwind 或 UnoCSS 配置揭示构建链路的样式工具栈3tailwind.config.js若使用 Tailwind/UnoCSS提取方式与 React 项目完全一致直接读取theme.extend中的自定义值4src/lib/theme.ts/src/lib/tokens.ts以 JS 对象形式导出的共享设计令牌5src/routes/layout.svelte根布局展示全局字体加载、背景与整体结构模式6组件style块scoped 样式揭示组件级别的模式与约定需要特别强调的是第一步src/app.css或其 PostCSS 变体src/app.postcss被文档明确标注为 The most important file最重要的文件。在 Svelte 项目中全局 CSS 不仅定义了body背景、字体导入等基础样式更重要的是集中声明了整棵:root下的 CSS 自定义属性——这是后续把变量名映射为设计系统角色颜色、字体、圆角、间距、阴影的第一手证据。与 references/vue.mdVue 项目优先看nuxt.config.ts和assets/css/main.css、references/angular.mdAngular 优先看angular.json中的全局样式声明相比Svelte 的发现顺序更强调全局 CSS 即设计系统入口这一差异正源于 Svelte 的 scoped 样式机制——全局层是唯一能跨组件共享样式信息的公共层。三、Svelte 组件样式模式Component Style PatternsSvelte 组件的解剖学结构是script 模板 style三块式其中style块默认 scoped。文档给出了一个典型的按钮组件示例这也是提取设计系统时最高价值的组件类型之一script export let variant primary /script button classbtn btn-{variant} slot / /button style .btn { border-radius: 8px; padding: 0.875rem 2rem; font-weight: 500; transition: all 250ms ease-in-out; } .btn-primary { background-color: var(--color-primary); color: white; } .btn-primary:hover { filter: brightness(0.9); } /style从这个看似简单的组件中可以提炼出三个关键提取点文档明确列出的 Extraction points组件 props如variant揭示变体系统export let variant primary说明该项目存在一个以 variant 为轴的按钮变体体系primary / secondary / ghost 等。在写DESIGN.md的 Component Stylings 章节时应当把每个变体的颜色方案、悬停状态、过渡时长都记录在案而不是只记单个按钮的静态外观。var(--*)引用需要回溯到app.cssbackground-color: var(--color-primary)中的--color-primary是一个指针真正的值在全局 CSS 中。提取时必须沿着变量名追踪到 src/app.css 的:root块把变量名与十六进制值配对并为其赋予语义化的角色名称。过渡值transition values反映交互设计哲学transition: all 250ms ease-in-out这类时间与缓动函数配置直接揭示了项目在交互反馈上的取向如快速干脆 vs. 柔和流畅应写入交互状态描述中。从源码结构看这种样式内聚 变量外引的组件模式在 Svelte 生态中极为普遍。scoped 样式虽然不会跨组件泄漏但重复出现的模式本身就是设计系统约定——正如 references/vue.md 对 Vue scoped 样式的建议一样提取时应横向扫描多个组件找出反复出现的border-radius、padding、颜色引用这些一致值才构成真正意义上的设计系统惯例。四、SvelteKit 布局模式Layout PatternsSvelteKit 是 Svelte 官方推荐的应用框架它引入了一套约定优于配置的目录结构其中几个约定与设计系统提取高度相关layout.svelte路由根处全局页头header、页脚footer与字体加载通常都发生在这里。这是观察全局字体方案 页面骨架的最高效位置——例如 Google Fonts 的link标签会直接暴露字体族名而 body 的背景色与整体结构则定义了视觉基调。layout.ts/js可能承担加载主题数据或设计令牌的逻辑值得检查其导出的 load 函数中是否引用了theme.ts/tokens.ts。$lib/目录SvelteKit 的别名目录对应src/lib/存放可复用组件与共享工具。设计令牌文件theme.ts/tokens.ts通常就在这里例如src/lib/theme.ts。这一部分对应 SKILL.md 中 Phase 2 的 Component Stylings 与 Layout Principles 提取维度根布局解决的是全局字体、背景与结构问题$lib/目录解决的是可复用组件与令牌的定位问题。在最终DESIGN.md的 Layout Principles 章节中根布局的max-width、容器 padding、页边距等值都应当来源于对layout.svelte及其嵌套布局的观察。五、CSS 自定义属性策略核心theming 的基石文档强调Svelte 项目大量使用 CSS 自定义属性做主题化Svelte projects heavily use CSS custom properties for theming。这是与 React/Tailwind 项目最大的思维差异之一——Svelte 项目的设计令牌往往不是 Tailwind config 里的 JS 对象而是:root里的一串--*变量。文档给出的典型app.css示例/* app.css */ :root { --color-primary: #294056; --color-bg: #FCFAFA; --color-surface: #F5F5F5; --color-text: #2C2C2C; --color-text-muted: #6B6B6B; --font-heading: Manrope, sans-serif; --font-body: Inter, sans-serif; --radius-sm: 8px; --radius-md: 12px; --radius-full: 9999px; --shadow-hover: 0 2px 8px rgba(0,0,0,0.06); --spacing-section: 5rem; }文档特别强调这些变量名是高度刻意的highly intentional——开发者写下--color-primary、--font-heading、--radius-md、--spacing-section本质上是在宣告这就是本项目的设计令牌。因此提取时应以变量名作为角色线索直接作为设计系统的基础Use them as the foundation of your design system extraction。提取这套变量时可以按 SKILL.md Phase 2 的四维框架进行归类与上面示例形成一一对应维度变量前缀示例提取要点颜色--color-*--color-primary/--color-bg/--color-surface/--color-text/--color-text-muted按功能分组Primary Foundation背景/表面、Accent Interactive、Typography Text Hierarchy、Functional States字体--font-*--font-heading/--font-body记录字体族名 字符气质geometric/humanist、serif/sans圆角--radius-*--radius-sm/--radius-md/--radius-full形状语言按钮与卡片常使用不同圆角级别阴影--shadow-*--shadow-hover高度策略平铺 vs. 悬停浮现 vs. 常驻悬浮间距--spacing-*--spacing-section留白哲学宽松32px还是紧凑基准网格是 4px 还是 8px同时要注意文档提出的去重Deduplication原则代码库中经常出现近似重复的颜色如#333与#2C2C2C应将其合并到最能代表设计意图的单一名称下。此外在最终DESIGN.md中每个颜色都需要一个唤起色彩性格的描述性名称而非裸的 hex 值——例如文档建议#294056应描述为Deep Muted Teal-Navy深哑光青蓝-藏青角色为 Primary CTA、active navigation。这一命名要求贯穿 examples/DESIGN.md 中 Alpine Peak 示例的 Colors 章节如 Deep Peak Blue、Powder White、Safety Orange是DESIGN.md可被 Stitch 及其他 Agent 复用的关键。六、Svelte 生态组件库的主题定位许多 Svelte 项目会引入现成的组件库此时设计系统往往被外包给了组件库的主题机制提取的重点就变成找到每个组件库的覆盖override文件——项目特有的值就藏在里面。文档覆盖了 Svelte 生态最常见的三款库1. Skeleton UI主题定义在tailwind.config.js中使用 Skeleton 自身的设计令牌系统。提取时需寻找自定义主题配置对象custom theme config objectSkeleton 允许通过theme配置覆盖默认令牌如--theme-color-primary-500等。2. DaisyUI主题同样在tailwind.config.js中具体位置是daisyui.themes数组。该数组定义了一套完整的主题light/dark/custom每个主题包含 color 对象primary、secondary、accent、neutral、base-100等语义槽位。提取时把每个槽位的值映射到对应的功能角色即可——这比从散落的组件类名中猜颜色要可靠得多。3. Flowbite-Svelte采用标准 Tailwind theming即按 Tailwind 生态常规方式定制tailwind.config.js的theme.extend提取方式与 React/Tailwind 项目完全一致可对照 references/react-tailwind.md 中的theme.extend.colors、fontFamily、borderRadius、spacing提取法。对比其他框架生态如 Vue 生态的 Vuetify 在plugins/vuetify.ts中用createVuetify({ theme })显式声明主题、Angular 生态用 SCSS 调色板 mat.m2-define-light-themeSvelte 生态的组件库主题几乎全部集中在tailwind.config.js这一个文件——这大大简化了提取路径发现tailwind.config.js中是否存在daisyui或 Skeleton 相关配置块即可快速判断主题的归属与位置。七、端到端实战从源码扫描到 DESIGN.md将上述模式放入stitch::extract-design-md技能的完整工作流中见 SKILL.md针对一个 Svelte / SvelteKit 项目的完整执行路径如下Phase 1 项目发现读取package.json确认svelte依赖 → 判定框架按 文件发现顺序 逐一读取src/app.css、svelte.config.js、tailwind.config.js、src/lib/theme.ts、src/routes/layout.svelte、代表性组件的style块。Phase 2 深度提取沿 五维框架主题氛围、颜色、排版、组件样式、布局收集原始数据再综合成描述性语言——目标不是罗列每条 CSS 属性而是理解样式选择背后的意图intent用设计师或 Stitch 能据此复刻相同视觉感受的编辑式语言来描述。Phase 3 撰写 DESIGN.md将结果按标准格式落盘为.stitch/DESIGN.md若.stitch/目录不存在则创建。SKILL.md 特别强调IMPORTANT 提示块文件顶部必须包含 YAML frontmatter内含name与colors映射格式严格参照 examples/DESIGN.md该示例展示了完整的 Material 3 风格 colors 映射、typography 分层、rounded 与 spacing 令牌以及 Brand Style / Colors / Typography / Layout Spacing / Elevation Depth / Shapes / Components 等正文章节结构。缺少这段带核心颜色令牌的 YAML 块将被判定为技能使用失败。Phase 4可选集成若用户需要把设计系统推入 Stitch则将生成的DESIGN.md交给manage-design-system技能完成 MCP 的 create/update 调用若用户只要文档则到 Phase 3 即可结束。交付前还应对照 SKILL.md 的 Quality Checklist 自检每个颜色都有描述名 hex 功能角色排版包含字体族、字符气质与完整层级组件样式覆盖形状、颜色、状态与过渡布局包含 max-width、栅格、断点与间距策略Stitch 生成备注使用自然语言而非 CSS 语法氛围章节读起来像编辑文案而非技术文档近似重复颜色已合并文档捕捉的是样式背后的意图而非原始值。八、进阶技巧让提取更精准结合 SKILL.md 结尾的 Tips for Better Extraction 与 Svelte 的具体情况还有几个可以显著提升提取质量的做法阅读注释与提交信息开发者在代码注释如/* hero section — breathable */和提交信息中常常记录设计意图这是理解 why 的宝贵线索尤其常见于app.css的变量分组注释。主题文件优先于组件样式src/lib/theme.ts定义的调色板代表设计意图组件内散落的样式代表实际交付。两者都重要但应从主题文件入手再抽查组件确认是否有覆盖。Tailwind config 本身就是设计系统若项目存在定制过的tailwind.config.js那就直接以它为提取起点再抽查组件寻找偏离点overrides。CSS 自定义属性是刻意为之的令牌开发者写下--brand-primary就是在声明这是一个设计令牌提取时应当尊重这个命名所隐含的角色。横向比较 scoped 样式找公约数单个组件的 scoped 样式信息有限但多个组件中反复出现的相同border-radius、padding、颜色引用就是设计系统约定本身。这套方法论不仅适用于 Svelte也为 Vue见 references/vue.md、Angular见 references/angular.md、React/Next.js/Tailwind见 references/react-tailwind.md与纯 CSS 项目见 references/plain-css.md提供了可对照的框架化参考——但在 Svelte 项目中请始终记住那条最核心的法则先读src/app.css把:root里的每一个--*变量都当作设计系统的基础令牌。赞分享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点击查看免费下载相关推荐在 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步实现10倍下载速度的免费方案终极城通网盘加速指南3步实现10倍下载速度的免费方案 还在为城通网盘的下载速度而烦恼吗ctfileGet 是一款专门解决城通网盘限速问题的开源工具通过获取AI 技能AI 插件上一篇如何利用开源AI框架实现精准时间序列预测5个关键技术解析下一篇Phaser粒子系统终极指南如何创建逼真的天气效果模拟创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考