第 6 课：从网站结构到可实现的 UI 规格

1. 这一节解决什么问题

“做得高级一点”会让 AI 随机选择渐变、动画和卡片，常牺牲 B2B 信息密度与可信度。本节把买家任务转为页面层级、内容优先级、设计令牌和可复用组件，形成 TRAE 能执行、你能验收的 UI 规格。

2. 学完要拿到什么结果

• 中英文页面结构与导航。
• 外贸网站内容收集表。
• 一页 UI 风格对标表。
• 颜色、字体、间距、圆角、阴影和状态令牌。
• 导航、按钮、卡片、规格表、FAQ、表单的组件清单。
• 桌面与手机的低保真文字线框图。

3. 对应的开源对标及链接

• shadcn/ui：MIT；参考组件可组合与主题变量，未复制组件代码。
• 21st.dev：MIT；参考组件/演示分离和真实内容演示。
• easy-vibe Design to Code：参考设计到代码的路径比较，按课程许可证署名。
• Web Dev For Beginners accessibility：参考把可访问性纳入基础实现。

4. 完整图文课程正文

4.1 先信息，后装饰

海外 B2B 首页首屏应在几秒内回答：供应什么、来自哪里、为什么继续看、下一步是什么。首屏不能用巨幅图片遮住关键信息，也不能把“值得信赖”当证据。可信度来自明确规格、质量流程、内容状态和可联系路径。

桌面首屏文字线框：

[品牌/示例标记] [产品 公司 质量 市场 FAQ] [中文/EN] [获取报价]
----------------------------------------------------------------
[产地小标签]  云南大蒜，面向国际批发采购的清晰供应信息
               说明品类、拟议规格、包装与合作步骤
               [查看产品] [提交 RFQ]
                                     [供应信息摘要卡]
----------------------------------------------------------------
[三类产品] [质量流程] [合作步骤] [FAQ] [RFQ]

手机上导航折叠，标题、CTA、卡片和表单单列，关键联系按钮可触达但不遮挡内容。

4.2 设计令牌让 AI 保持一致

本项目建议：深蒜叶绿 #164B36 为品牌色，蒜皮米白 #F6F1E7 为背景，出口橙 #D8672A 只用于主要动作，墨色 #17211B 为正文。中文使用系统无衬线字体栈；英文标题可用 Georgia 作为稳重强调，正文仍用无衬线以保证阅读。

间距用 4/8/12/16/24/32/48/64；圆角 10/16/24；按钮高度至少 44px；正文行高约 1.6。绿色不能同时表达品牌与成功状态时，要为成功增加图标/文字，不能只靠颜色。

4.3 组件必须有状态

• 导航：桌面、手机展开、当前页、键盘焦点。
• 产品卡：名称、简述、拟议规格标签、详情链接；整卡不强行可点击，链接有明确文本。
• 规格表：有表头，手机可横向滚动或转为定义列表，不能挤成不可读小字。
• RFQ：默认、焦点、必填错误、发送中、成功、服务未配置、网络失败。
• FAQ：按钮控制展开，带 aria-expanded，键盘可用。
• 证书：只显示企业实际提供并确认可公开的文件；示范站显示“未附真实证书”的说明，而不是造徽章。

4.4 双语不是机器翻译开关

中英文路由一一对应，切换语言时留在同类页面；英文产品名、贸易术语和单位需人工复核。每种语言有自己的标题和描述。电话号码、邮箱、产品代码等数据共享，叙述内容分开维护。

4.5 Design to Code 的安全用法

可把合法对标的链接、自己的线框和设计令牌给 TRAE，让它先实现组件标本页，再拼页面。不要上传无授权截图要求像素级克隆。每次只让 AI 实现一种组件和全部状态，确认后再复用。

5. 零基础用户能够执行的操作步骤

1. 填写网站页面结构表，为每页写主任务、主 CTA 和证据来源。
2. 用内容收集表整理双语标题、段落、规格、图片授权和确认人。
3. 填写UI 风格对标表，只记录可解释的设计原则，不复制页面。
4. 在 design/ui-spec.md 写颜色、字体、间距、圆角、阴影、断点、焦点和减少动画规则。
5. 用文本方框画桌面与手机首页、产品详情、RFQ 三个线框。
6. 列出组件及其状态；优先导航、按钮、产品卡、规格表、FAQ、表单。
7. 把 UI 规格交给 TRAE，要求先描述它如何满足可访问性与双语，再实现组件。
8. 在 375px、768px、1440px 三个宽度检查，不只看自己的电脑。

6. 可直接复制给 TRAE 或其他 AI 的提示词

请根据 #File:design/ui-spec.md、#File:product/site-architecture.md 和 #File:product/content-status.md 设计组件系统。先输出组件、props、状态与响应式行为，不修改代码。
视觉：云南农业但不做乡村旅游风；深绿、米白、少量橙；稳重、清晰、B2B；不使用未授权图片，不用大面积渐变或无意义动画。
必须：语义 HTML、可见键盘焦点、44px 触控目标、375px 无横向页面滚动、prefers-reduced-motion、表单完整标签与错误文本、中英文长度变化可容纳。
组件：Header、LanguageSwitcher、Hero、ProductCard、SpecTable、ProcessSteps、QualityNotice、Accordion、RFQForm、Footer、WhatsAppLink。
所有资质与业务数字未知时保留示例标记，不生成认证徽章和客户头像。

7. 云南大蒜项目中的具体示范

首页内容优先级：

1. H1：云南大蒜供应信息与国际批发询价入口。
2. 辅助：三类品种、拟议规格/包装需确认。
3. 主 CTA：提交 RFQ；次 CTA：查看产品。
4. 信任信息：内容透明、质检步骤、资料确认规则，不展示虚构资质。
5. 合作流程：需求—规格确认—样品/报价—合同—质检—装运；明确是示范流程。
6. FAQ：MOQ、样品、证书、包装、贸易术语、回复方式均写“以书面报价确认”。

产品卡示例文案：Fresh White Garlic / 鲜白蒜；说明“可按采购需求讨论尺寸分级与包装。示例数据，供应能力以书面确认为准。” 标签只写 Fresh / Whole Bulb / RFQ Required，不写未经证实的销量或认证。

8. 可填写模板

组件规格卡：

完整示例见UI 风格对标表。

9. 常见错误

• 用“国际化、高端、科技感”替代可执行的颜色、层级和状态。
• 从对标站复制品牌图片、logo、完整文案或像素级布局。
• 只设计默认状态，不设计错误、加载和服务未配置状态。
• 中文页面塞英文，切换语言总跳回首页。
• 手机把规格表压成极小字体，浮动按钮遮住提交键。

10. 排错方法

视觉不一致时先查令牌是否被绕过，不逐页补随机颜色。移动端溢出时让 TRAE 找出具体元素的计算宽度，检查固定宽、长 URL、表格和绝对定位。中英文布局差异大时使用内容驱动高度，不固定卡片文字区域；限制段落最大宽度而不是截断关键说明。

11. 完成标准

• 页面结构覆盖需求证据支持的所有 Must 页面。

• 双语内容、来源、确认人与图片授权状态已记录。

• 设计令牌和 3 个宽度的布局规则明确。

• 关键组件包含交互、错误、加载、成功与无障碍状态。

• 没有未授权图片、虚构证书、评价或装饰性数据。

12. 本节成果如何进入下一节

下一节按组件和路由里程碑开发示范站。页面结构决定路由，内容表进入集中数据文件，设计令牌进入 CSS 变量，组件状态直接成为开发与测试清单。

---

上一节：第 5 课：TRAE IDE 安装、规则、上下文与小步开发
下一节：第 7 课：用 TRAE 分里程碑开发云南大蒜 B2B 网站