Design — Agentaily 官网 (official-website)
这个产品长什么样、怎么设计的的真相源(视觉/交互维度)。和 SPEC.md(架构真相)、features/(行为真相)三足鼎立 —— 它是视觉契约。
[UI] 仅消费设计系统的 UI 项目需要本文件;纯逻辑 / 后端 / CLI 项目没有。 本产品的视觉系统(palette / type / 组件)在上游
@agentaily/design-system(^0.15.0) —— 本文件不重复那些,只记本产品自己的设计指针 + 决策。实现 UI 时读本文件当视觉真相源(就像读 features 当行为真相源)。
设计怎么落地
2026-06-19:Claude Design 工作流已退役。 不再去 claude.ai/design 设计、不再拿 handoff、不再用
design-sync。
- UI 直接基于上游组件库
@agentaily/design-system在代码里实现 —— 一律消费 DS 组件 / token,不手搓底层、不 re-vendor。 - 本文件 +
features/是落地依据:本文件给视觉 / 版式决策,features/给行为契约。 - 缺组件 / 缺 seam → 往上游组件库 (
@agentaily/design-system) 反馈补齐(下游定契约、上游照做;这步叫人)。
设计原则 / 交互
- 落地页(单页滚动):Nav(含常驻「进入应用」→ 平台)→ Hero(含聊天 demo + 主 CTA「开始造」→ 平台
chat.agentaily.com)→ 市场抢先看 (Works) → FAQ → 页脚,自上而下叙事(去掉了 About / 主理人区块)。定位 = 通用平台 / 框架,不是某个单独产品(详见 SPEC「定位」)。 - 深色主题默认(
data-theme="dark"):品牌随上游 DS —— 极客风、简约、大气、科技感。 - 双语 (en/zh):文案走 i18n catalog,默认中文,可切换;切换不丢滚动位置。
- 响应式:移动优先;断点 / 栅格随设计稿定,优先用 DS 布局原语。
- 视觉系统不自造:palette / type / 组件全部来自
@agentaily/design-system,本仓只记官网自己的版式 / 区块 / 文案决策。
—— 本产品特定的视觉语言、交互模式、信息架构、响应式约定。
消费的设计系统
@agentaily/design-system(^0.15.0):UI 一律消费,不手搓;升级随上游流过来。- 关键组件 / token:
BrandMark(品牌标)·Button·Card(含 ticks 边角motif)·Badge—— 落地页区块按设计从 DS 取(Hero/功能卡/CTA);视觉系统(palette/type)全部来自 DS,本仓不重定义。 - 缺组件 / 缺 seam → 往上游组件库反馈补齐(下游定契约、上游照做;这步叫人)。
页面 / 界面清单(+ 设计状态)
落地页是单页滚动。活动渲染树:Nav → Hero → 市场抢先看(Works)→ FAQ → 页脚(锚点仍 #works、组件仍名 Works;叙事去掉了 About / 主理人区块)。布局走 src/styles/landing.css(aw- 前缀,组合 DS token),组件一律消费 @agentaily/design-system。
| 区块 | 设计状态 | 对应代码 |
|---|---|---|
| Nav(BrandMark + 锚点 + 常驻「进入应用」+ 语言 / 主题切换) | ✅ 已实现 | src/components/Nav.tsx |
| Hero(价值主张 + 主 CTA + 聊天 demo) | ✅ 已实现 | src/sections/Hero.tsx + src/sections/heroDemo.tsx |
| 市场抢先看 (Works)(三张应用卡) | ✅ 已实现 | src/sections/Works.tsx |
| FAQ(平台向 Accordion) | ✅ 已实现 | src/sections/Faq.tsx |
| 页脚 (Footer)(品牌 / 链接 / 版权 / ICP) | ✅ 已实现 | src/components/SiteFooter.tsx |
| 语言切换 (en/zh) + 深/浅主题 | ✅ 已实现 | src/i18n/(createI18n 工厂)+ @agentaily/design-system ThemeProvider(Nav 触发);跨子域持久化 + themeInitScript 防闪 |
滚动入场动画(.aw-rise → .is-in) | ✅ 已实现 | src/lib/useReveal.ts(基态可见、入视口才播) |
设计 ↔ 代码映射
- 改设计 → 同一次更新本文件(文档与代码同步纪律:页面清单 / 设计状态别漂移)。