AI设计副驾styleseed：让AI代码生成器产出专业级UI的69条设计规则

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）的卡片容器内。

这样做有几个关键好处：

1. 视觉聚焦：卡片在浅背景上形成了明确的视觉边界，将用户的注意力集中在内容区块内。
2. 减少视觉噪音：避免了使用大量边框（border）来分隔元素，界面更干净、现代。分隔感通过微妙的背景色差实现，这是一种更高级的设计手法。
3. 统一性：所有内容区块都有了统一的容器，布局看起来更规整、有秩序。
4. 易于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-app@latest 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

这个技能会启动一个交互式向导，引导你完成整个配置过程。它会问你一系列问题：

1. 项目类型：SaaS、电子商务、金融科技、内部工具等。这会影响初始页面模板和组件选择。
2. 品牌皮肤：
   • 从内置皮肤中选择（Toss, Stripe, Linear, Vercel, Notion）。
   • 输入一个 HEX 颜色值，让它生成一个基于该颜色的新皮肤。
   • 连接到awesome-design-md仓库，从 58+ 个流行品牌中挑选一个。
3. 字体偏好：选择系统字体栈（如Inter、SF Pro）或指定一个 Google Font。
4. 生成首屏：是否立即生成一个示例主页（如 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.css：

@import “../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 └── ...

现在，AI（Claude Code/Cursor）已经“认识”了你的项目。当你后续提出需求时，它会自动参考CLAUDE.md和DESIGN-LANGUAGE.md中的规则。

3.4 使用 AI 技能进行高效开发

这是styleseed工作流的核心。你不再需要向 AI 描述冗长的设计细节，只需发出高级指令。

场景一：快速搭建一个“用户管理”页面

/ss-page UserManagement

AI 会理解这是一个页面脚手架请求。它会：

1. 在src/app/user-management/page.tsx创建一个新文件。
2. 遵循“卡片容器”原则，使用<Card>组件包裹内容。
3. 遵循“视觉节奏”原则，合理布局页面区块（例如，顶部搜索栏和筛选卡，中间用户数据表格，底部分页和统计）。
4. 使用皮肤中的 CSS 变量（如bg-card,text-foreground）来应用颜色。
5. 生成符合styleseed间距系统（基于rem的节奏）的代码。

场景二：为仪表盘添加一个“月度收入图表”组件

/ss-pattern ChartCard

或者更具体：

在 src/components/dashboard/MonthlyRevenueChart.tsx 创建一个折线图组件，展示过去12个月的收入趋势。使用 recharts 库。遵循 DESIGN-LANGUAGE.md 中关于图表容器的规则。

AI 会：

1. 使用components/patterns/ChartCard作为模板。
2. 创建一个包含标题、图例、自定义工具提示的卡片。
3. 确保图表有清晰的轴标签、适当的颜色（使用--brand及其衍生色）。
4. 在卡片底部添加一个简洁的洞察文本（如“同比增长 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 自定义与扩展：创建自己的皮肤

内置皮肤很好，但你的品牌有自己的身份。创建自定义皮肤非常简单。

1. 复制模板：在src/styles/下创建一个新文件，比如my-brand-theme.css。
2. 修改变量：打开任意一个内置的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); /* 核心阴影 */ }

3. 应用皮肤：在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的价值在于统一设计输出和降低设计-开发摩擦。

1. 作为设计验收清单：设计师可以将DESIGN-LANGUAGE.md中的 69 条规则作为设计稿的自检清单。开发者在实现时，也可以对照此清单进行代码审查。
2. 作为新人 onboarding 工具：新加入的开发者或实习生，在接触项目时，可以通过/ss-setup快速理解项目的设计语言和组件规范，并通过 AI 技能快速产出符合规范的代码，大幅缩短上手时间。
3. 保证设计一致性：当产品需要扩展新功能或新页面时，即使没有设计师全程跟进，开发者利用styleseed和 AI 也能产出在视觉和体验上与现有产品高度一致的前端代码，避免了“一个页面一个样”的尴尬。

5. 常见问题与故障排查

在实际使用中，你可能会遇到一些典型问题。以下是我在多个项目中实践后总结的经验。

5.1 AI 不遵循规则怎么办？

症状：输入/ss-page或相关指令后，AI 生成的代码仍然使用了硬编码的颜色（如text-black）、不符合间距规则，或者组件排列单调。

排查步骤：

1. 检查技能是否加载：确认.claude/目录及其下的CLAUDE.md、DESIGN-LANGUAGE.md和skills/文件夹已正确存在于项目根目录。AI 需要这些文件作为上下文。
2. 检查对话上下文：在 Claude Code 或 Cursor 中，确保你是在一个“新对话”或上下文清晰的对话中执行指令。如果之前的对话历史很长且杂乱，AI 可能会忽略部分上下文。尝试开启一个新聊天窗口，并首先发送指令“请参考本项目中的.claude/CLAUDE.md和DESIGN-LANGUAGE.md文件”。
3. 明确引用规则：在指令中更具体地提及规则。例如，不要只说“建一个仪表盘”，而是说“请参考DESIGN-LANGUAGE.md中的规则 #12（卡片容器原则）和规则 #45（KPI 卡片变体原则），构建一个 SaaS 仪表盘首页”。
4. 使用/ss-review进行修正：先让 AI 生成一个初版，然后立即对生成的文件运行/ss-review。将审查报告反馈给 AI，并要求它根据报告进行修正。这个过程本身也是对 AI 的“再训练”。

5.2 自定义皮肤不生效或样式冲突

症状：更换了theme.css文件，但界面颜色没有变化，或者出现了意外的样式覆盖。

排查步骤：

1. 检查 CSS 引入顺序：在globals.css或主样式文件中，确保你的自定义theme.css在@tailwind指令之前被引入。因为 Tailwind 的某些工具类（如bg-primary）可能依赖于这些变量，需要先定义。

   /* globals.css */ @import “../styles/my-brand-theme.css”; /* 自定义皮肤 */ @tailwind base; @tailwind components; @tailwind utilities;

2. 检查变量作用域：CSS 变量定义在:root下是全局的。确保你的theme.css中没有局部作用域（如某个类名下）的重复定义覆盖了全局变量。
3. 清除缓存：Next.js 或 Vite 的开发服务器有时会缓存旧的样式。尝试重启开发服务器（npm run dev）。
4. 使用浏览器开发者工具：检查出问题的元素，看计算后的样式里--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 性能与包大小考虑

症状：担心引入几十个组件会增加最终打包体积。

实际情况与优化建议：

1. Tree Shaking 友好：styleseed的组件是基于 ES Modules 导出的，并且每个组件都是独立的文件。像 Vite、Webpack 这样的现代打包工具可以很好地实现 Tree Shaking。只要你没有在项目中导入src/components/ui/index.ts这样的整体导出文件，而是按需导入（如import { Button } from ‘@/components/ui/button’），那么最终打包时只会包含你实际用到的组件代码。
2. 依赖分析：核心依赖（Radix UI, CVA, clsx, tailwind-merge）本身都是轻量级且被广泛使用的库。styleseed并没有引入重型运行时。
3. 图标优化：styleseed使用了lucide-react图标，它也支持按需导入。确保你的图标导入方式是import { ArrowUp } from ‘lucide-react’，而不是import * as Icons from ‘lucide-react’。
4. 自定义构建：如果你非常关心包大小，可以只复制你需要的组件和规则。styleseed是 MIT 协议，你可以将其视为一个设计模式和规则的“知识库”，只提取对你有用的部分，而不是全盘照搬。

6. 进阶技巧与最佳实践

经过几个项目的磨合，我总结出一些能让styleseed发挥更大效能的技巧。

6.1 编写更有效的 AI 提示词

虽然有了/ss-*技能，但有时你需要更定制化的输出。结合styleseed的上下文，你的提示词可以更精准：

• 差提示：“创建一个用户个人资料页面。”
• 好提示：“参考DESIGN-LANGUAGE.md，创建一个用户个人资料页面。要求：
  1. 使用‘卡片容器’原则（规则#12），将头像、基本信息、账户设置分别放在不同的卡片中。
  2. 遵循‘信息密度递增’原则（规则#61），顶部展示大头像和姓名（低密度），底部展示详细的偏好设置列表（高密度）。
  3. 使用皮肤中的--primary和--muted颜色变量。
  4. 为‘保存更改’按钮添加加载状态（参考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 切换>