Back to Details

ui-setup

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Setup

UI 设置

Overview

概述

Part of StyleSeed, this setup wizard turns a raw project into a design-system-guided workspace. It collects the minimum brand and product context needed to configure tokens, pick a visual direction, and generate an initial page without drifting into generic UI.
作为StyleSeed的一部分，此设置向导可将原始项目转换为受设计系统指导的工作区。它收集配置tokens、选定视觉方向并生成初始页面所需的最少品牌和产品上下文，避免陷入通用UI的误区。

When to Use

使用场景

  • Use when you are starting a new app with the StyleSeed Toss seed
  • Use when you copied the seed into an existing project and need to personalize it
  • Use when you want the AI to ask one design decision at a time instead of guessing
  • Use when you need a first page scaffold after selecting colors, font, and app type
  • 当你使用StyleSeed Toss种子启动新应用时使用
  • 当你将种子复制到现有项目中并需要个性化配置时使用
  • 当你希望AI逐个询问设计决策而非自行猜测时使用
  • 当你在选择颜色、字体和应用类型后需要首屏脚手架时使用

How It Works

工作流程

Step 1: Ask One Question at a Time

步骤1：逐个提问

Do not front-load the full questionnaire. Ask a single question, wait for the answer, store it, then continue.
不要一次性展示完整问卷。每次只提一个问题，等待回答后保存，再继续下一步。

Step 2: Capture the App Type

步骤2：确定应用类型

Identify the product shape before touching tokens or layout recipes.
Suggested buckets:
  • SaaS dashboard
  • E-commerce
  • Fintech
  • Social or content
  • Productivity or internal tool
  • Other with a short freeform description
Use the answer to choose the page composition pattern and the type of first screen to scaffold.
在处理tokens或布局方案之前，先明确产品形态。
建议分类：
  • SaaS仪表盘
  • 电商平台
  • 金融科技应用
  • 社交或内容平台
  • 生产力或内部工具
  • 其他（需简短自由描述）
根据回答选择页面组合模式以及要搭建的首屏类型。

Step 3: Choose the Brand Color

步骤3：选择品牌颜色

Offer a few safe defaults plus a custom hex option. Once selected:
  • update the light theme brand token
  • update the dark theme brand token with a lighter accessible variant
  • keep all other colors semantic rather than hardcoding the brand everywhere
If the project uses the StyleSeed Toss seed, the main target is 
css/theme.css
.
提供几个安全默认选项以及自定义十六进制颜色选项。选定后：
  • 更新浅色主题的品牌token
  • 使用更易访问的浅色变体更新深色主题的品牌token
  • 保持所有其他颜色为语义化颜色，而非在各处硬编码品牌色
如果项目使用StyleSeed Toss种子，主要修改目标为
css/theme.css
。

Step 4: Offer an Optional Visual Reference

步骤4：可选视觉参考

Ask whether the user wants to borrow the feel of an established brand or design language. Good examples include Stripe, Linear, Vercel, Notion, Spotify, Supabase, and Airbnb.
Use the reference to influence density, tone, and composition, not to clone assets or trademarks.
询问用户是否希望借鉴知名品牌或设计语言的风格。推荐参考包括Stripe、Linear、Vercel、Notion、Spotify、Supabase和Airbnb。
仅将参考用于影响密度、色调和布局，而非克隆资产或商标。

Step 5: Pick Typography

步骤5：选择排版

Confirm the font direction:
  • keep the default stack
  • swap to a preferred font if already installed or available
  • preserve hierarchy rules for display, heading, body, and caption text
If the seed is present, update the font-related files rather than scattering overrides across components.
确认字体方向：
  • 保留默认字体栈
  • 替换为已安装或可用的偏好字体
  • 保留标题、正文、说明文字等的层级规则
如果项目包含种子文件，请更新字体相关文件，而非在组件中分散设置覆盖样式。

Step 6: Generate the First Screen

步骤6：生成首屏

Ask for:
  • app name
  • first page or screen name
  • a one-sentence purpose for that page
Then scaffold the page using the seed's page shell, top bar, navigation, spacing scale, and card structure.
询问以下信息：
  • 应用名称
  • 首屏页面名称
  • 该页面的一句话用途说明
然后使用种子的页面框架、顶部导航栏、侧边导航、间距规范和卡片结构搭建页面。

Output

输出内容

Return:
  1. The captured setup decisions
  2. The files or tokens updated
  3. The first page or scaffold created
  4. Any follow-up recommendations for components, patterns, accessibility, or copy
返回：
  1. 已捕获的设置决策
  2. 已更新的文件或tokens
  3. 已创建的首屏或脚手架
  4. 关于组件、模式、可访问性或文案的后续建议

Best Practices

最佳实践

  • Keep the interaction conversational, but deterministic
  • Make brand color changes through tokens, not component-by-component edits
  • Use an inspiration brand as a reference, not as a permission slip to copy
  • Prefer semantic tokens and reusable patterns over page-specific CSS
  • 保持交互对话式，但逻辑确定
  • 通过tokens修改品牌颜色，而非逐个组件编辑
  • 将灵感品牌作为参考，而非抄袭的许可
  • 优先使用语义化tokens和可复用模式，而非页面专属CSS

Additional Resources

额外资源

Limitations

局限性

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
  • 仅当任务明确符合上述范围时使用此技能。
  • 不要将输出内容替代为环境特定的验证、测试或专家评审。
  • 如果缺少必要输入、权限、安全边界或成功标准，请暂停并请求澄清。