1. 项目概述当AI代码生成器遇上设计系统如果你和我一样经常用 Claude Code 或者 Cursor 来快速搭建项目原型那你一定也经历过那种“功能都对但就是丑”的尴尬时刻。AI 能生成出逻辑正确的 React 组件能用 Tailwind CSS 堆出布局但出来的界面总带着一股浓浓的“AI 味”——颜色搭配生硬、间距混乱、组件排列呆板一看就是机器生成的缺乏设计师那种对视觉节奏和信息密度的直觉把控。这就是styleseed要解决的问题。它不是一个普通的组件库也不是一个设计稿转代码的工具。它是一个设计判断引擎一套专门写给 AI 看的“设计规则书”。它的核心思想是AI 不缺数据它知道 Toss 的紫色是#8B5CF6它缺的是判断力——知道在什么场景下该用哪个颜色、多大的间距、哪种卡片变体才能让界面看起来“被设计过”而不是“被拼凑出来”。我把它理解为一个“设计副驾”。当你用/ss-setup命令初始化项目时它会把 69 条精炼的设计规则、48 个遵循这些规则的 React 组件以及 11 个 Claude Code 技能一股脑儿地注入到你的开发环境中。从此当你对 AI 说“给我建个 SaaS 仪表盘”时它不再是从零开始瞎蒙而是会像一个受过训练的设计师一样遵循一套成熟的视觉语言来思考。1.1 核心价值从“数据”到“判断”的跃迁市面上一堆项目在教 AI “品牌长什么样”比如整理出 Stripe、Linear 等公司的 Design Tokens设计变量JSON 文件。这当然有用但只解决了问题的一半。这就好比给一个新手画家提供了伦勃朗的调色盘但他依然画不出《夜巡》。他缺的不是颜料而是构图、光影、笔触背后的法则。styleseed提供的正是这些法则。它不关心你的品牌色具体是紫是蓝它关心的是色彩纪律为什么最精致的黑色不是#000而是#2A2A2A如何构建一个有层次感的 5 级灰度系统空间节奏为什么不能连续使用两个相同类型的区块如何通过“高密度”与“低密度”区块的交替创造出舒适的视觉流信息层级为什么 KPI 卡片必须要有变化有的带趋势箭头有的带进度条如何通过字体大小、重量和间距无声地引导用户的视线阴影与高程为什么阴影的透明度最好设置在 4%如何用微妙的背景色差#FFF卡片 vs#FAFAFA页面背景替代生硬的边框这些规则被编码在engine/DESIGN-LANGUAGE.md文件中Claude Code 和 Cursor 在生成代码时会自动读取并应用。这才是让 AI 产出摆脱“业余感”的关键从提供数据升级为传授方法论。1.2 核心架构引擎与皮肤的分离styleseed的架构非常清晰采用了“引擎Engine”与“皮肤Skin”分离的设计这也是它能灵活适配不同品牌的核心。引擎Engine是品牌无关的“设计大脑”。它包含了所有设计规则、组件逻辑和 AI 技能。无论你的应用最终看起来像 Toss 还是像 Vercel这套引擎的思考方式是不变的。它定义了“如何结构化一个界面”、“如何建立视觉层次”但不说“用什么颜色”。皮肤Skin是视觉身份的“外衣”。它本质上就是一个theme.css文件里面定义了一套 CSS 自定义属性CSS Custom Properties比如--brand主品牌色、--background背景色、--muted柔和色等。更换皮肤就是更换这个 CSS 文件整个应用的颜色、圆角、阴影风格会瞬间切换而组件的布局逻辑和交互规则保持不变。这种分离带来了巨大的灵活性。你可以直接使用内置的 Toss金融科技风、Stripe专业感、Linear深色开发者风等皮肤也可以通过/ss-setup向导从awesome-design-md仓库自动获取 58 个其他品牌的皮肤甚至用几分钟创建一个属于自己品牌的皮肤。2. 核心设计哲学与规则深度解析styleseed的 69 条设计规则不是凭空捏造的它们是对现代 SaaS 和工具类产品界面设计模式的提炼和编码。理解这些规则背后的“为什么”比单纯记住规则本身更重要。下面我挑几条最具代表性的结合我自己的开发经验拆解一下它们的用意。2.1 色彩纪律为什么是#2A2A2A而不是#000规则示例“最精致的黑色不是#000而是#2A2A2A。构建 5 级灰度#2A2A2A→#3C3C3C→#6A6A6A→#7A7A7A→#9B9B9B。”这条规则直接挑战了开发者的直觉。纯黑#000在白色背景上对比度极高容易产生视觉疲劳在屏幕上看起来会过于“刺眼”和“死板”。#2A2A2A是一种带有极微量灰度的深灰在白色背景上依然保持了极高的可读性WCAG AA 标准绰绰有余但视觉上更柔和、更高级减少了“墨水感”。5 级灰度的构建是为了建立清晰的视觉层次。在界面中信息的优先级通常通过颜色深度来体现#2A2A2A用于最重要的标题、关键数据。#3C3C3C用于次级标题、重要正文。#6A6A6A用于辅助说明文字、标签。#7A7A7A用于占位符、禁用状态文字。#9B9B9B用于最次要的提示、边框颜色。AI 在生成代码时如果没有这条规则很可能会随意使用text-gray-700、text-gray-800等类名导致层次混乱。styleseed通过语义化 Token如--foreground、--muted-foreground来封装这些颜色值AI 只需引用 Token就能自动获得正确的色彩层次。实操心得在定义自己的皮肤时千万不要简单地把--brand设成公司 Logo 色就完了。一定要按照这个 5 级灰度的逻辑仔细调整你的中性色阶。一个协调的灰度系统是专业感的基石比一个亮眼的品牌色更重要。2.2 空间与布局卡片即容器背景即画布规则示例“所有内容都放在卡片内。永远不要直接放在页面背景上。卡片#FFF与背景#FAFAFA之间的对比度本身就是分隔符。”这条规则强制建立了“背景层-卡片层-内容层”的三层结构。页面背景--background是一个极其浅的灰它的唯一作用就是衬托卡片。所有 UI 元素无论是按钮、列表还是图表都必须被包裹在一个具有明确背景色--card通常是纯白#FFF的卡片容器内。这样做有几个关键好处视觉聚焦卡片在浅背景上形成了明确的视觉边界将用户的注意力集中在内容区块内。减少视觉噪音避免了使用大量边框border来分隔元素界面更干净、现代。分隔感通过微妙的背景色差实现这是一种更高级的设计手法。统一性所有内容区块都有了统一的容器布局看起来更规整、有秩序。易于AI理解给AI一个明确的构图框架“先画卡片再在卡片里放内容”。这大大降低了它生成杂乱布局的概率。注意事项这条规则有个例外那就是全屏的“英雄区域”Hero Section或导航栏。它们有时需要与背景融为一体。但在仪表盘、设置页、列表页等核心内容区必须严格遵守。2.3 信息节奏与组件变体拒绝单调重复规则示例“永远不要连续使用相同类型的区块。遵循‘英雄区域 → 网格 → 图表 → 轮播 → 列表’的视觉节奏。” “KPI 卡片必须有所变化2 个带趋势箭头1 个带进度条1 个带对比文本。绝不能出现 4 个一模一样的卡片。”这是对抗 AI 生成界面“呆板感”最有力的规则之一。AI 倾向于寻找模式并重复它。如果你让它生成 4 个数据卡片它很可能给你 4 个完全一样的div只是里面的数字不同。这在功能上没错但在设计上是灾难。人的眼睛会被变化和模式所吸引。单调的重复会导致视觉疲劳用户会很快失去浏览的兴趣。styleseed的规则强制引入了“变体”和“节奏”区块类型变体在一个长页面中交替使用不同高度、不同布局的区块。例如一个全宽的“数据概览”图表卡下面接一个两栏的“最新活动”列表卡再下面接一个三栏的“功能特性”网格卡。这种变化创造了向下滚动的动力。组件内部变体对于同一类组件如 KPI 卡片提供多种呈现数据的方式。有的用“数值趋势箭头”突出变化有的用“数值进度条”展示完成度有的用“数值对比文本”提供上下文。这不仅能展示更多维度的信息也让界面看起来是经过深思熟虑的。实操技巧styleseed在components/patterns/目录下预置了 16 种常见的仪表盘模式如MetricCard、ChartCard、UserGrid。当你使用/ss-pattern技能时AI 会从这些模式中挑选并组合而不是从头发明。这是确保节奏感的最快方法。2.4 阴影与深度看不见的设计规则示例“阴影使用 4% 的不透明度。如果你能明显看到它那已经太多了。”在 Material Design 等设计语言中阴影被用来表达高程Elevation但很容易被滥用导致界面看起来“浮夸”且“脏”。styleseed推崇一种极其克制的阴影哲学。4% 的不透明度阴影例如rgba(0, 0, 0, 0.04)产生的效果非常微妙。它几乎不会被直接“看到”但能在大面积白色卡片和浅灰色背景之间创造出一层几乎无法察觉的空气感让卡片看起来是“轻轻地放在”背景上而不是“贴”在上面。这种微妙的深度感提升了整体的精致度。常见误区很多开发者包括AI会直接使用 Tailwind 的shadow-md或shadow-lg这些预设的阴影通常过重。styleseed通过 CSS 变量如--shadow来定义这组克制的阴影值确保所有组件使用的阴影都是统一且恰当的。3. 完整实操指南从零开始一个项目理论说再多不如动手做一遍。下面我将以一个典型的 SaaS 后台仪表盘项目为例展示如何将styleseed集成到你的 AI 辅助开发工作流中。假设我们使用 Next.js 15 (App Router) TypeScript Tailwind CSS 作为技术栈。3.1 环境准备与项目初始化首先确保你有一个可以运行 Claude Code 或 Cursor 的环境。我强烈推荐在 Cursor 中使用因为它对.cursorrules文件的集成更原生。# 1. 创建新的 Next.js 项目 npx create-next-applatest my-saas-dashboard --typescript --tailwind --app cd my-saas-dashboard # 2. 初始化 git 并安装基础依赖如果 create-next-app 没装的话 git init npm install class-variance-authority clsx tailwind-merge npm install lucide-react # 用于图标接下来我们不是手动复制styleseed的文件而是使用其最强大的功能AI 技能。3.2 使用/ss-setup交互式向导在 Cursor 或 Claude Code 的聊天框中直接输入/ss-setup这个技能会启动一个交互式向导引导你完成整个配置过程。它会问你一系列问题项目类型SaaS、电子商务、金融科技、内部工具等。这会影响初始页面模板和组件选择。品牌皮肤从内置皮肤中选择Toss, Stripe, Linear, Vercel, Notion。输入一个 HEX 颜色值让它生成一个基于该颜色的新皮肤。连接到awesome-design-md仓库从 58 个流行品牌中挑选一个。字体偏好选择系统字体栈如Inter、SF Pro或指定一个 Google Font。生成首屏是否立即生成一个示例主页如 Dashboard。假设我们选择Stripe皮肤项目类型为SaaS字体使用Inter。向导会自动完成以下工作在项目根目录创建.claude/文件夹并放入CLAUDE.md和DESIGN-LANGUAGE.md。将styleseed的 11 个技能文件复制到.claude/skills/目录下。在src/styles/目录下创建theme.css文件包含 Stripe 品牌的全部 CSS 变量。将基础的全局样式文件globals.css更新引入theme.css并应用styleseed的 CSS 重置和基础样式。在src/components/ui/和src/components/patterns/下生成核心的 48 个组件。如果选择生成首屏会在app/page.tsx创建一个符合styleseed设计规则的 Dashboard 雏形。关键检查点向导完成后打开src/app/globals.css确保顶部引入了theme.cssimport “../styles/theme.css”; /* 其他 Tailwind 指令 */3.3 理解生成的文件结构设置完成后你的项目结构会类似这样部分文件省略my-saas-dashboard/ ├── .claude/ │ ├── CLAUDE.md # AI的“设计任务书” │ ├── DESIGN-LANGUAGE.md # 69条设计规则核心 │ └── skills/ # 11个AI技能 │ ├── ss-setup/ │ ├── ss-page/ │ └── ... ├── src/ │ ├── app/ │ │ ├── globals.css # 已集成styleseed基础样式 │ │ └── page.tsx # 可能已由向导生成 │ ├── styles/ │ │ └── theme.css # Stripe皮肤变量 │ ├── components/ │ │ ├── ui/ # 32个基础UI组件 (Button, Card...) │ │ └── patterns/ # 16个布局模式组件 │ └── lib/ # 工具函数如utils.ts └── ...现在AIClaude Code/Cursor已经“认识”了你的项目。当你后续提出需求时它会自动参考CLAUDE.md和DESIGN-LANGUAGE.md中的规则。3.4 使用 AI 技能进行高效开发这是styleseed工作流的核心。你不再需要向 AI 描述冗长的设计细节只需发出高级指令。场景一快速搭建一个“用户管理”页面/ss-page UserManagementAI 会理解这是一个页面脚手架请求。它会在src/app/user-management/page.tsx创建一个新文件。遵循“卡片容器”原则使用Card组件包裹内容。遵循“视觉节奏”原则合理布局页面区块例如顶部搜索栏和筛选卡中间用户数据表格底部分页和统计。使用皮肤中的 CSS 变量如bg-card,text-foreground来应用颜色。生成符合styleseed间距系统基于rem的节奏的代码。场景二为仪表盘添加一个“月度收入图表”组件/ss-pattern ChartCard或者更具体在 src/components/dashboard/MonthlyRevenueChart.tsx 创建一个折线图组件展示过去12个月的收入趋势。使用 recharts 库。遵循 DESIGN-LANGUAGE.md 中关于图表容器的规则。AI 会使用components/patterns/ChartCard作为模板。创建一个包含标题、图例、自定义工具提示的卡片。确保图表有清晰的轴标签、适当的颜色使用--brand及其衍生色。在卡片底部添加一个简洁的洞察文本如“同比增长 24%”。场景三检查现有代码的设计合规性当你或 AI 生成了一些代码后可以运行审查/ss-review src/app/dashboard/page.tsx这个技能会逐行扫描代码对照 69 条设计规则进行检查。它会输出一份报告指出诸如“这里使用了#000建议改为var(--foreground)”、“这两个连续的区块类型相同建议引入一个MetricCard变体”、“阴影值rgba(0,0,0,0.1)过重建议使用var(--shadow)”等问题。你可以根据报告逐一修复或者直接让 AI 帮你修复。场景四生成用户体验文案按钮文本、空状态提示、错误信息这些微文案Microcopy对用户体验至关重要但 AI 常常生成得很生硬。/ss-copy “empty state for a user search that returned no results”AI 会生成类似“未找到匹配的用户。尝试调整搜索关键词或创建新用户。”这样友好、具指导性的文案而不是冷冰冰的“没有数据”。3.5 自定义与扩展创建自己的皮肤内置皮肤很好但你的品牌有自己的身份。创建自定义皮肤非常简单。复制模板在src/styles/下创建一个新文件比如my-brand-theme.css。修改变量打开任意一个内置的theme.css如skins/stripe/theme.css作为参考。核心是修改:root选择器下的 CSS 变量。:root { --background: #fafafa; /* 页面背景 */ --foreground: #2a2a2a; /* 主要文字色 */ --card: #ffffff; /* 卡片背景 */ --card-foreground: #2a2a2a; --primary: #635bff; /* 主品牌色 - 改成你的品牌色 */ --primary-foreground: #ffffff; --secondary: #f6f6f6; /* 次要背景 */ --secondary-foreground: #3c3c3c; --muted: #f9f9f9; /* 柔和背景 */ --muted-foreground: #6a6a6a; /* 辅助文字 */ --accent: #f1f0ff; /* 强调色背景 */ --accent-foreground: #635bff; --border: #eeeeee; /* 边框色 */ --radius: 0.75rem; /* 圆角大小 */ --shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 核心阴影 */ }应用皮肤在globals.css中将import “../styles/theme.css”;改为import “../styles/my-brand-theme.css”;。专业建议不要只改--primary。一个好的皮肤需要整体协调。使用在线调色板工具如 Coolors 或 Adobe Color基于你的主品牌色生成一套和谐的辅助色、中性色。确保--foreground和--background的对比度满足 WCAG 可访问性标准。4. 深度集成与现有工具链的协作styleseed并非一个孤岛它被设计成能与现代前端工具链无缝协作。4.1 与 shadcn/ui 的关系很多人问styleseed是不是要替代shadcn/ui恰恰相反它是shadcn/ui的“上层建筑”。styleseed的components/ui/目录下的 32 个基础组件其底层就是基于shadcn/ui的 Radix UI 原始组件和class-variance-authority(CVA) 模式构建的。区别在于shadcn/ui提供了高质量的、无样式的、可访问的组件原材料如Button、Dialog。你需要自己决定如何给它们上色、如何组合它们。styleseed提供了基于这些原材料的配方和摆盘指南。它告诉你“用这个Button组件在这里用primary变体在那里用ghost变体这个Card里面应该先放标题再放一个分隔线然后是内容并且内边距要遵循 24px 网格。”你可以把styleseed的组件看作是已经用styleseed设计规则“调味”过的shadcn/ui组件。如果你已经有一个使用shadcn/ui的项目引入styleseed后可以逐步用它的“调味”版本替换你的原始组件或者参考其DESIGN-LANGUAGE.md来重构你的现有组件。4.2 与 Tailwind CSS 的协作styleseed完全拥抱 Tailwind CSS。它的theme.css中定义的 CSS 变量可以通过apply或直接使用var(--variable)的方式集成到 Tailwind 的类名中。更重要的是styleseed的设计规则强化了 Tailwind 的最佳实践间距系统规则中强调使用一致的间距比例如p-6,gap-4,mt-8。这对应了 Tailwind 的spacing比例尺。颜色系统所有颜色都通过 CSS 变量引用这使得在 Tailwind 配置中扩展主题变得非常容易。你可以在tailwind.config.ts中将这些变量映射到 Tailwind 的颜色名上。// tailwind.config.ts import { fontFamily } from “tailwindcss/defaultTheme”; import type { Config } from “tailwindcss”; const config: Config { theme: { extend: { colors: { background: “var(--background)”, foreground: “var(--foreground)”, card: “var(--card)”, // ... 映射所有 styleseed 变量 primary: { DEFAULT: “var(--primary)”, foreground: “var(--primary-foreground)”, }, }, borderRadius: { lg: “var(--radius)”, md: “calc(var(--radius) - 2px)”, sm: “calc(var(--radius) - 4px)”, }, boxShadow: { DEFAULT: “var(--shadow)”, }, }, }, }; export default config;映射后你就可以在代码中使用bg-background、text-primary这样的类名了语义更清晰。4.3 在团队工作流中落地对于团队项目styleseed的价值在于统一设计输出和降低设计-开发摩擦。作为设计验收清单设计师可以将DESIGN-LANGUAGE.md中的 69 条规则作为设计稿的自检清单。开发者在实现时也可以对照此清单进行代码审查。作为新人 onboarding 工具新加入的开发者或实习生在接触项目时可以通过/ss-setup快速理解项目的设计语言和组件规范并通过 AI 技能快速产出符合规范的代码大幅缩短上手时间。保证设计一致性当产品需要扩展新功能或新页面时即使没有设计师全程跟进开发者利用styleseed和 AI 也能产出在视觉和体验上与现有产品高度一致的前端代码避免了“一个页面一个样”的尴尬。5. 常见问题与故障排查在实际使用中你可能会遇到一些典型问题。以下是我在多个项目中实践后总结的经验。5.1 AI 不遵循规则怎么办症状输入/ss-page或相关指令后AI 生成的代码仍然使用了硬编码的颜色如text-black、不符合间距规则或者组件排列单调。排查步骤检查技能是否加载确认.claude/目录及其下的CLAUDE.md、DESIGN-LANGUAGE.md和skills/文件夹已正确存在于项目根目录。AI 需要这些文件作为上下文。检查对话上下文在 Claude Code 或 Cursor 中确保你是在一个“新对话”或上下文清晰的对话中执行指令。如果之前的对话历史很长且杂乱AI 可能会忽略部分上下文。尝试开启一个新聊天窗口并首先发送指令“请参考本项目中的.claude/CLAUDE.md和DESIGN-LANGUAGE.md文件”。明确引用规则在指令中更具体地提及规则。例如不要只说“建一个仪表盘”而是说“请参考DESIGN-LANGUAGE.md中的规则 #12卡片容器原则和规则 #45KPI 卡片变体原则构建一个 SaaS 仪表盘首页”。使用/ss-review进行修正先让 AI 生成一个初版然后立即对生成的文件运行/ss-review。将审查报告反馈给 AI并要求它根据报告进行修正。这个过程本身也是对 AI 的“再训练”。5.2 自定义皮肤不生效或样式冲突症状更换了theme.css文件但界面颜色没有变化或者出现了意外的样式覆盖。排查步骤检查 CSS 引入顺序在globals.css或主样式文件中确保你的自定义theme.css在tailwind指令之前被引入。因为 Tailwind 的某些工具类如bg-primary可能依赖于这些变量需要先定义。/* globals.css */ import “../styles/my-brand-theme.css”; /* 自定义皮肤 */ tailwind base; tailwind components; tailwind utilities;检查变量作用域CSS 变量定义在:root下是全局的。确保你的theme.css中没有局部作用域如某个类名下的重复定义覆盖了全局变量。清除缓存Next.js 或 Vite 的开发服务器有时会缓存旧的样式。尝试重启开发服务器npm run dev。使用浏览器开发者工具检查出问题的元素看计算后的样式里--primary等变量的值是否是你设置的新值。如果不是沿着样式规则向上查找看是哪里被覆盖了。5.3 如何更新 styleseed 引擎styleseed项目本身在持续迭代可能会增加新的设计规则、组件或技能。安全更新流程# 1. 进入你本地克隆的 styleseed 仓库目录 cd path/to/your/local/styleseed-repo git pull origin main # 2. 只复制“引擎”部分到你的项目避免覆盖你的个性化内容 cp -r /path/to/styleseed-repo/engine/DESIGN-LANGUAGE.md /path/to/your-project/.claude/ cp -r /path/to/styleseed-repo/engine/.claude/skills/* /path/to/your-project/.claude/skills/ # 注意不要覆盖你的 theme.css 和已修改的组件重要提示更新前建议备份你的.claude/DESIGN-LANGUAGE.md文件。如果新版本有重大规则变更你需要评估这些变更是否与你的项目兼容可能需要手动合并一些规则。5.4 性能与包大小考虑症状担心引入几十个组件会增加最终打包体积。实际情况与优化建议Tree Shaking 友好styleseed的组件是基于 ES Modules 导出的并且每个组件都是独立的文件。像 Vite、Webpack 这样的现代打包工具可以很好地实现 Tree Shaking。只要你没有在项目中导入src/components/ui/index.ts这样的整体导出文件而是按需导入如import { Button } from ‘/components/ui/button’那么最终打包时只会包含你实际用到的组件代码。依赖分析核心依赖Radix UI, CVA, clsx, tailwind-merge本身都是轻量级且被广泛使用的库。styleseed并没有引入重型运行时。图标优化styleseed使用了lucide-react图标它也支持按需导入。确保你的图标导入方式是import { ArrowUp } from ‘lucide-react’而不是import * as Icons from ‘lucide-react’。自定义构建如果你非常关心包大小可以只复制你需要的组件和规则。styleseed是 MIT 协议你可以将其视为一个设计模式和规则的“知识库”只提取对你有用的部分而不是全盘照搬。6. 进阶技巧与最佳实践经过几个项目的磨合我总结出一些能让styleseed发挥更大效能的技巧。6.1 编写更有效的 AI 提示词虽然有了/ss-*技能但有时你需要更定制化的输出。结合styleseed的上下文你的提示词可以更精准差提示“创建一个用户个人资料页面。”好提示“参考DESIGN-LANGUAGE.md创建一个用户个人资料页面。要求使用‘卡片容器’原则规则#12将头像、基本信息、账户设置分别放在不同的卡片中。遵循‘信息密度递增’原则规则#61顶部展示大头像和姓名低密度底部展示详细的偏好设置列表高密度。使用皮肤中的--primary和--muted颜色变量。为‘保存更改’按钮添加加载状态参考components/ui/button.tsx的isLoading属性。 完成后请运行/ss-review检查合规性。”6.2 将设计规则融入代码审查在团队的 Pull Request 流程中可以将部分styleseed规则转化为 ESLint 规则或简单的脚本检查点。例如可以写一个简单的脚本检查.tsx文件中是否出现了硬编码的#000或#000000#!/bin/bash # check-black.sh if grep -r “#000000\|\”#000\”” src/ --include“*.tsx” --include“*.jsx”; then echo “ERROR: Found hard-coded pure black (#000). Please use var(--foreground) instead.” exit 1 fi将其集成到 CI/CD 的pre-commit钩子中能自动守住一些基本的质量底线。6.3 扩展引擎添加你自己的设计规则styleseed的DESIGN-LANGUAGE.md是开放的。你可以根据自己产品的特性添加新的规则。例如如果你的产品有很多数据表格可以添加## 数据表格规则 - 表头背景色使用 --muted文字使用 --muted-foreground。 - 行间使用斑马条纹zebra striping偶数行背景为 transparent奇数行背景为 rgba(0,0,0,0.02)。 - 数值列默认右对齐文本列左对齐。 - 当行数超过10行时必须显示分页器。将这些规则追加到DESIGN-LANGUAGE.md末尾。下次 AI 生成表格时你就可以提示它“请遵循数据表格规则部分”从而获得更符合你产品规范的代码。6.4 处理深色模式styleseed的皮肤系统天然支持深色模式。在theme.css中你可以使用media (prefers-color-scheme: dark)媒体查询来定义深色主题的变量。:root { /* 浅色主题变量 */ --background: #fafafa; --foreground: #2a2a2a; --card: #ffffff; /* ... */ } media (prefers-color-scheme: dark) { :root { /* 深色主题变量 */ --background: #0a0a0a; --foreground: #ededed; --card: #1a1a1a; /* ... 调整所有颜色变量确保对比度 */ } }更优雅的做法是使用 CSS 的:root[data-theme“dark”]选择器并通过 JavaScript 切换>