# ByTaste 网站设计规范

公开版，包含当前网站的设计规则。[Token 来源](design.tokens.css) · [交互约定](interaction.md)

## 内容与空间

- **WEB-HIERARCHY-01**：先通过位置、面积比例、字号字重、明暗和留白建立主次，再增加颜色提示。去掉彩色后，主信息与辅助信息仍应清楚。先展示布局与排版样本，再展开色彩；辅助参数弱于主要样本。依据 WEB-D03、WEB-D05。
- **WEB-LAYOUT-01**：同一内容区域共用对齐线；章节通过足够的组间空间分隔。采用宽度上限及弹性页边距，避免把所有信息平均分配到等权卡片。布局演示用中性表面呈现主次区域关系，辅助区不因蓝色填充而获得更强视觉重量。依据 WEB-D03、WEB-D05、P02。
- **WEB-DENSITY-01**：页面整体有呼吸感，具体参数与控件局部紧凑。组内距离小于章节距离；不靠减少必要标签取得简洁。具体间距引用 Token。

## 视觉与组合

- **WEB-COLOR-01**：白色是主要背景；黑色用于正文、重点文字和局部深色表面；蓝色辅助主要操作、选中与焦点。普通内容的层级不依赖染蓝，辅助表面以中性色为主；落地页按 WEB-D19 / D20 使用局部浅绿、浅紫内容面与多色规范类别。颜色辅助内容分组，不替代层级。依据 WEB-D01 / D02 / D05；具体色值为建议。
- **WEB-TYPE-01**：西文与数字暂用 Inter 4.1，中文使用系统字体回退。展示、章节、正文、说明形成四种角色；长标题允许换行。数字参数使用等宽字体，避免混入主文本的视觉节奏。依据 WEB-D03 / P01。
- **WEB-SURFACE-01**：白色和轻灰表面主要依靠边界与间距分组，黑色覆盖层形成明确局部对比。阴影用于浮层与主导产品画面中的前后层次，不给每段内容加投影。依据 WEB-D02 / P02。
- **WEB-COMPONENT-01**：蓝色填充用于主要操作，白色描边用于次要操作；低强调操作保持文字形式。焦点、选中、禁用、展开状态均有明确表达。图标只承担已有动作或状态含义。
- **WEB-ASSET-01**：本轮使用自绘几何标记及功能图标，不需要摄影或插画。Inter 与 Motion 许可证在 assets 中保留；品牌名称仅使用 ByTaste。

## 动态与适配

- **WEB-MOTION-01**：按压短促，状态变化利落，布局变化和进入退出平滑衔接；实际使用本地 Motion 14.6.0。时长来自 Token，行为见 interaction.md。依据 P02 与 Skill 默认质量要求。
- **WEB-ADAPT-01**：空间不足时两栏组合改为纵向，导航可横向滚动，参数仍能找到。保留内容顺序、黑蓝角色和主次；不缩小所有文字来强行塞入。
- **WEB-ADAPT-02**：减少动态时即时显示最终状态，按钮、布局和反馈仍可操作。系统偏好优先，手动选项只能进一步减少动态。

## 落地页的内容与局部规则

- **LAND-CONTENT-01**（WEB-D12、D32、BASE-CONTENT）：首屏采用“把你的审美，变成 AI 的设计标准”；正文按核心主张、描述偏好、结构化规范、风格持续沿用展开，简要说明内置结构化规则是能力依据，24 个简短标签展示覆盖维度。首版不展示图库、CLI、个人版或团队版服务。
- **LAND-THESIS-01**（WEB-D32）：首屏之后、偏好说明之前，居中表达“AI 设计缺的，不是能力，而是明确的标准。”黑字承载主张，仅“明确的标准”使用主题蓝；一段短说明连接模糊要求与可执行、可持续遵循的规范。采用内容自然高度，复用正文进入动效，不添加按钮、卡片或额外装饰。这是 ByTaste 的产品主张，不包装为研究结论。
- **LAND-HEADER-01**（WEB-D13、D25、D33、D34、D36）：顶部栏保留左侧品牌，右侧依次为圆形地球按钮、GitHub 链接；语言入口在 GitHub 左侧，对应用户截图红框。地球按钮采用 Formlore 的 44px 触摸目标与 18px 图标，点击直接展开语言列表。GitHub 指向真实仓库并新标签打开，不显示虚构 star 数。不恢复章节导航。
- **LAND-LAYOUT-01**（WEB-D05、D08、D16、D21、LAY-01～07）：首屏居中大字和行动明确分层，保留扣除页头的视口高度。正文使用内容自然高度，不设最小一视口高度；保留局部面板内留白及桌面 88px、平板 66px、手机 38px 的章节上下内距。通过清楚的分组保持舒展，不裁剪、不强制滚动吸附。
- **LAND-COMPONENT-01**（BASE-SEMANTICS、BASE-STATE）：安装命令按 WEB-D27 使用内容宽度的浅灰细边框条，提供蓝色独立复制图标；页尾浅蓝面板内用白底命令条，次行动为安装说明链接；蓝色用于关键词、光线及状态。描述偏好区按 WEB-D28 只保留标题与说明，不放重复行动按钮，也不用引语、连线和模拟结果构成演示。
- **LAND-DEMO-01**（WEB-D23、D24、BASE-CONTENT、BASE-CRAFT）：规范区按相关领域展示 24 个已有概念标签。对应来源保留在 landing-reference-notes.md；首版不展示外部网站案例或模拟图库。
- **LAND-ADAPT-01**（LAY-06～08）：规范标签桌面四列、手机三列，较窄平板将标题和分类上下排列。保留阅读顺序，不产生横向溢出。
- **LAND-CRAFT-01**（WEB-D19、D20、D24）：白底连续，黑字与留白建立主次，蓝色强调关键词；描述区浅绿，规范标签用浅色按领域分组。首屏光场与透视字形保留。
- **LAND-MOTION-01**（WEB-D24、BASE-MOTION）：保留首屏与正文一次进入；精细指针只影响首屏背景，减少动态时呈现最终状态。案例轮播及其计时器、事件和控制全部移除。
- **LAND-CONTINUITY-01**（WEB-D29）：规范展示之后、安装行动之前，用居中标题和短说明表达同一项目的新页面可沿用已确认的设计语言，减少重复找参考与解释。仅作价值说明，不添加虚构页面演示或重复按钮；不同页面仍使用符合自身内容的布局。
- **LAND-ACTION-01**（WEB-D25、BASE-STATE、LAY-08）：首屏与页尾显示同一真实安装命令；复制后提供成功或失败反馈。页尾用浅蓝面板、简短标题和安装代码引导开始使用。下载使用真实 v0.5.2 ZIP，规范入口打开现有预览，说明关闭后恢复焦点和滚动。安装说明注明 Node.js 要求；按 WEB-D37 使用公开 Skill 仓库 `xmili233/bytaste-skill`，不再提示私有仓库访问限制。
- **LAND-I18N-01**（WEB-D33、BASE-READABILITY、BASE-STATE）：官网提供与 Formlore 相同的 en、zh-CN、de、fr、es、it、pt、nl 八种语言。正文、标题、页面描述、规范分类、安装说明、示例提示、状态及无障碍标签共同切换；品牌、安装命令和文件夹名保持原样。自动检测与手动选择按 interaction.md 执行。长译文自然换行；西文手机端的规范标签使用两列，避免将长词压入中文三列。页脚中文设计规范预览注明内容语言；本次不翻译开发文档与 Skill 包，也不改变发布状态。
- **LAND-LANGUAGE-MENU-01**（WEB-D36）：地球图标下方直接出现白底、细边框、8px 圆角、约 224px 宽的语言菜单，当前项带勾。选择即更新整页并关闭菜单，不遮罩页面、不锁滚动，也不打开中间设置弹窗。菜单参数由 Formlore 迁移，使用本站字体和共享颜色。