找方向

第 3 课：搜索、拆解与合法使用对标

AI 能快速生成界面，却容易混合无来源代码、过时功能和虚构商业文案。本节建立五轨对标法：产品、内容、UI、技术和许可证同时拆解；先确认“为什么借鉴、是否允许”，再让 TRAE 实现。

2026-09-08当前状态：更新中

产品

1. 这一节解决什么问题

2. 学完要拿到什么结果

3 个产品对标、2 个开源代码对标和 2 个 UI 组件对标。
一份逐项许可证审查表。
一张页面/功能差距图。
一份“可用、仅研究、禁止使用”清单。
云南大蒜网站页面结构的第一版依据。

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

export-website-template：研究外贸站导航、集中内容配置、询盘和部署；因审计提交缺少独立 LICENSE 文件，本项目不复制代码。
Startup Next.js：MIT，多页面与共享组件候选。
shadcn/ui 与 21st.dev：MIT，研究组件组合、主题变量和演示分离。
本项目许可证审计：本课实际使用的法律边界。

4. 完整图文课程正文

4.1 五轨对标

flowchart TD
  Q[同一个买家问题] --> P[产品：页面和动作]
  Q --> C[内容：需要什么证据]
  Q --> U[UI：层级和组件]
  Q --> T[技术：路由、表单、SEO、部署]
  Q --> L[许可：可否复制与署名]

举例：买家问“能否按规格供货”。产品轨看规格从哪里进入；内容轨看尺寸、包装和容差怎样表达；UI 轨看表格在手机上是否可读；技术轨看详情页是否有独立 URL 和 RFQ 预填；许可轨决定能否复制组件或只能学习结构。

4.2 搜索不是收集链接

先用任务词而不是风格词：garlic supplier product specification RFQ、agricultural exporter quality control website。打开结果后记录访问日期、页面 URL、买家动作、可信证据和缺口。页面看起来高级但没有规格、真实联系路径或隐私说明，不是好对标。

4.3 许可证快速判断

MIT/BSD/Apache-2.0 通常允许修改和发布代码，但必须按许可证保留声明；Apache 还涉及 NOTICE/专利条款。
CC BY-NC-SA 4.0 适合本免费课程文字：署名、注明修改、非商业、相同方式共享。
“公开在 GitHub”不等于开源；没有明确许可证时只能阅读，不能复制代码、图片和正文。
图片可能拥有与代码不同的版权；没有明确来源和授权就换成企业自有照片或无图布局。

4.4 对标不是像素级克隆

允许学习“首页先说明产品和询价”“规格表在详情页”“移动端有固定联系入口”等问题解决方式。不要照搬品牌色、文案、摄影、图标组合和完整布局。把观察转成自己的设计原则，再用新的内容与组件实现。

4.5 本项目的模板选择结论

export-website-template 业务结构最接近，但许可证证据不完整，且代码含硬编码表单访问密钥与未经核验的商业声明，所以仅研究。Startup Next.js 有完整 MIT，但 SaaS 页面与本项目差异大。最终采用现代 React/Vite 成熟工具链，依据经审查的信息架构重写页面；这比直接复制风险代码更适合公开教学。

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

用产品对标拆解表记录 3 个站；每个站至少检查首页、产品、详情、公司、质量、FAQ、联系。
在 GitHub 仓库根目录找 LICENSE、LICENSE.md、COPYING、README License 段和 package.json license 字段。
把提交号记入审计，保证未来能解释当时审查的是哪个版本。
用开源项目许可证审查表写明能否修改、发布、需要的声明及实际使用范围。
给每个观察标注：A 可直接复用、R 仅研究重写、X 不使用。
画页面差距表：买家问题、对标做法、我们的决定、验收方式。
把引用链接和审计一起提交 Git。

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

你是开源对标研究员。请只基于我提供的仓库文件与网页内容做分析，不猜许可证，不生成缺失的版权声明。
对每个项目输出：
1. 页面/组件/内容/技术结构；
2. 对零基础教学有价值的路径；
3. 根目录许可证证据和提交号；
4. 可直接复用、只能研究重写、禁止使用的边界；
5. 对云南大蒜 B2B 站的可执行启发；
6. 风险：硬编码密钥、虚构资质、失效链接、未授权图片、过时依赖。
如果没有明确许可证，结论必须是“只研究，不复制”。
材料如下：
[粘贴 README、LICENSE、目录树和相关文件]

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

买家问题	对标观察	我们的决定	验收
供应什么	外贸模板有产品卡和独立产品页	三类大蒜卡片，详情页用示例规格并标需确认	每张卡进入正确详情 URL
是否可信	常见模板堆砌认证徽章	不写未核验证书；展示质量控制流程和证书占位说明	页面无虚构证书编号
怎么询价	Web3Forms 可无后端收信	环境变量配置密钥，产品页可把产品带入 RFQ	测试邮箱收到完整字段
手机联系	常见浮动 WhatsApp 按钮	有明确标签和可替换号码，示例号码不发起真实联系	触控区域和链接格式通过检查
能否被搜索	模板含元信息、robots、sitemap	为中英文路由写独立标题、描述和 canonical	构建产物存在 SEO 文件

8. 可填写模板

最小许可证判断卡：

字段	填写
项目与提交号
许可证证据文件
允许修改/发布
必须保留
图片是否同许可
实际借鉴
实际复制文件
最终结论 A/R/X

完整表见许可证审查模板。

9. 常见错误

看到 GitHub 仓库就认为可复制。
只记录仓库首页，不记录提交号和许可证原文位置。
把组件库的演示照片、logo 或第三方图标一起复制。
用真实网站的公司故事和客户评价替换自己的证据工作。
把访问密钥、表单 Key 或分析 ID 当作模板默认值提交。

10. 排错方法

找不到许可证：在根目录和 README 搜索 license；仍无明确声明就标 R，只研究。README 和 LICENSE 冲突：以明确的根许可证和具体文件范围为先，无法判断就不复制。依赖许可证过多：仅安装必要包，读取 npm 元数据和上游 LICENSE，并生成第三方清单。图片来源不明：删除，使用企业自有且书面授权图片，或采用无图设计。

11. 完成标准

至少拆解 3 个产品站、2 个代码项目、2 个 UI 来源。
每个开源项目有提交号和许可证证据。
所有借鉴项标为 A、R 或 X。
没有未授权正文、图片、评价、资质或密钥进入项目。
页面差距表能追溯到第 2 课的需求证据。

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

下一节把页面差距表转为产品定位、功能优先级与 PRD。只有“需求证据支持 + 对标证明可行 + 许可证允许或已重写”的内容才能进入第一版功能范围。

上一节：第 2 课：从个人资源到可验证需求
下一节：第 4 课：定位、功能优先级与可验收 PRD