---

name: ui-setup description: "交互式 StyleSeed 设置向导，用于选择应用类型、品牌颜色、视觉风格、排版以及首屏脚手架。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ui, design-system, setup, frontend, styleseed] tools: [claude, cursor, codex, gemini]

UI 设置

概述

作为 StyleSeed 的一部分，此设置向导将原始项目转变为设计系统引导的工作空间。它收集配置令牌、选择视觉方向和生成初始页面所需的最少品牌和产品上下文，避免陷入通用 UI。

何时使用

• 当你使用 StyleSeed Toss 种子启动新应用时
• 当你将种子复制到现有项目中并需要个性化时
• 当你希望 AI 逐个询问设计决策而不是猜测时
• 当你在选择颜色、字体和应用类型后需要首页脚手架时

工作原理

步骤 1：逐个提问

不要一次性展示完整问卷。每次问一个问题，等待回答，存储结果，然后继续。

步骤 2：确定应用类型

在触及令牌或布局方案之前，先确定产品形态。

建议的分类：

• SaaS 仪表盘
• 电子商务
• 金融科技
• 社交或内容
• 生产力或内部工具
• 其他（附简短自由描述）

使用答案来选择页面组合模式和首屏脚手架类型。

步骤 3：选择品牌颜色

提供几个安全的默认选项加上自定义十六进制颜色选项。选定后：

• 更新浅色主题品牌令牌
• 使用更浅的无障碍变体更新深色主题品牌令牌
• 保持所有其他颜色为语义化，而非到处硬编码品牌色

如果项目使用 StyleSeed Toss 种子，主要目标文件是 css/theme.css。

步骤 4：提供可选的视觉参考

询问用户是否想借鉴某个成熟品牌或设计语言的感觉。好的示例包括 Stripe、Linear、Vercel、Notion、Spotify、Supabase 和 Airbnb。

使用参考来影响密度、调性和构图，而非克隆资产或商标。

步骤 5：选择排版

确认字体方向：

• 保持默认字体栈
• 如果已安装或可用，切换到首选字体
• 保留展示、标题、正文和说明文字的层级规则

如果种子存在，更新字体相关文件而非在组件中分散覆盖。

步骤 6：生成首屏

询问：

• 应用名称
• 首页或首屏名称
• 该页面的一句话用途描述

然后使用种子的页面外壳、顶栏、导航、间距比例和卡片结构来搭建页面。

输出

返回：

1. 收集到的设置决策
2. 更新的文件或令牌
3. 创建的首页或脚手架
4. 关于组件、模式、无障碍或文案的后续建议

最佳实践

• 保持交互对话式但确定性
• 通过令牌进行品牌颜色更改，而非逐组件编辑
• 将灵感品牌作为参考，而非复制的许可
• 优先使用语义令牌和可复用模式，而非页面特定的 CSS

附加资源

• StyleSeed 仓库
• StyleSeed Toss 种子
• 源技能

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停下来寻求澄清。