跳到正文
Trivosite / 使用指南

从发现灵感,到完成建站

从浏览作品开始,了解素材、准备项目,再将灵感做成自己的网站。

整理建站需求优化已有网站

如何使用

  1. 发现作品

    按名称、分类或标签搜索,并结合展示形式、提示词可用性及排序筛选。Featured 按编辑精选顺序排列,Recent 按收录时间排列。

    浏览作品
  2. 预览作品效果

    进入视野的卡片会在准备好后播放短预览,电脑和手机最多同时播放六个可见预览。打开作品可查看完整录屏。录屏不能直接交互;只有提供了实际演示链接的作品才会显示该入口。关闭详情会恢复原来的浏览位置。

    查看交互示例
  3. 复制完整提示词

    登录且会员有效时,可阅读、复制已提供的提示词。每个作品使用一个完整的选定版本。复制不会自动开始生成;剪贴板不可用时可以手动复制。“已审阅”不代表已经生成并实测通过。

    查看提示词示例

整理建站需求

把目标和参考材料整理成说明,交给你的建站工具。

输入内容只保留在当前页面。请复制或下载说明以便留存。

说明面向谁、需要哪些页面,以及访客应完成的主要操作。
描述希望保留的氛围、字体、配色和关键细节。
每行一个 http(s) 链接,最多五个。参考图片或录屏请另行交给建站工具。

目标设备

此工具只整理需求,不会生成、测试或发布网站。

优化你已有的网站

免费任务说明,可交给你的建站工具。请补充项目和需要解决的问题。

加快网站加载

找出首屏、图片和视频首帧等待的具体原因。

查看任务说明
请在我的现有项目中工作。先检查项目结构和相关页面,保留已经确定的视觉风格、正常交互和内容。只有复现问题确实需要时,再询问页面地址、截图或设备信息。先用证据说明问题,再做范围明确的修改。最后报告改了什么、如何验证、还有什么未经验证。

任务:诊断加载速度。分别检查页面响应、JavaScript、字体、首屏背景、卡片图片和视频首帧。用实际目标尺寸比较首次访问与再次访问,核对请求大小、缓存响应头、重复请求和资源优先级。优先保留首屏背景,避免布局跳动;使用与显示尺寸相符的图片,延后屏幕外媒体请求,并在离屏或后台暂停视频。如果要降低画质或删除交互,先说明取舍。修改前后使用相同条件比较,区分本地观察与真实手机网络测量。

修复手机适配

从实际设备出发,检查文字换行、控件遮挡和页面溢出。

查看任务说明
请在我的现有项目中工作。先检查项目结构和相关页面,保留已经确定的视觉风格、正常交互和内容。只有复现问题确实需要时,再询问页面地址、截图或设备信息。先用证据说明问题,再做范围明确的修改。最后报告改了什么、如何验证、还有什么未经验证。

任务:复现响应式问题。从用户提供的设备、浏览器和截图入手,检查 viewport、浏览器文字缩放、字体加载、固定宽度、flex/grid 最小尺寸、安全区域和长文本。在 320、390、430、768 像素及桌面宽度验证;相关时补查大字号和横屏。确保重要操作看得清、点得到,媒体画面完整,页面不会横向溢出。不要靠隐藏内容或整体缩小字号来凑截图。明确哪些检查使用了浏览器改尺寸,哪些使用了真实设备。

让每个操作都可用

检查键盘完整流程、清晰焦点和减少动态效果的体验。

查看任务说明
请在我的现有项目中工作。先检查项目结构和相关页面,保留已经确定的视觉风格、正常交互和内容。只有复现问题确实需要时,再询问页面地址、截图或设备信息。先用证据说明问题,再做范围明确的修改。最后报告改了什么、如何验证、还有什么未经验证。

任务:核查键盘和无障碍交互。使用 Tab、Shift+Tab、Enter、空格和 Escape 完成主要流程,检查控件名称、可见焦点、弹窗焦点限制与关闭后恢复、表单标签、错误提示和状态通知。确保每个操作目的明确,触屏用户也能完成依赖悬停的操作。检查减少动态效果偏好,同时保留必要反馈。修复实际发现的问题,记录复现与验收步骤;不要把检查 ARIA 属性说成已经做过读屏软件实测。

上线前检查

核对真实效果、关键流程和能够恢复的发布方案。

查看任务说明
请在我的现有项目中工作。先检查项目结构和相关页面,保留已经确定的视觉风格、正常交互和内容。只有复现问题确实需要时,再询问页面地址、截图或设备信息。先用证据说明问题,再做范围明确的修改。最后报告改了什么、如何验证、还有什么未经验证。

任务:检查上线准备。在相同尺寸下对照实现结果与参考图,实际操作控件、空状态、错误状态、直接链接和浏览器返回。检查手机布局、缺失媒体、控制台错误、公开构建产物和内容交付。运行项目真实的构建命令,报告相关行为测试结果,确保凭证和受保护内容没有进入公开产物。未连接的外部服务要如实标明。准备只包含本次修改的发布与恢复方案,保留现有用户数据,并只在已经获得的授权范围内发布。

这些是开始任务的说明,不会自动执行检查,也不代表结果已经实测。请在自己的项目中验收修改。

开始前,了解这些

了解素材、收藏与验收方式,减少建站时的反复。

收藏保存在本地

收藏保存在当前浏览器。可在收藏页下载 JSON 备份,再导入其他浏览器。备份只包含收藏引用,不包含图片或视频。清除网站数据会移除本地收藏;浏览器无法持久保存时,收藏仅在当前会话内保留。

打开收藏与备份

访问条件与服务状态

提示词需要已验证的账号和有效会员。未提供的提示词会标记为待补充。账号验证依赖已接通的邮件服务,购买依赖已接通的支付服务。开始前请查看当前可用状态。

查看会员与服务状态

交互示例

以下是平台交互示例,并非客户项目:Mask Reveal 和 Text Switch。原有示例链接和收藏仍可使用。

创作者与素材

作品库使用已提供的项目素材;设计图片用于视觉参考。只有已提供创作者信息时才会展示姓名。作品详情会说明可用预览及验证范围。

准备建站材料

把完整提示词、参考图片或录屏交给建站工具;已有项目时一并提供项目。说明使用的技术框架、目标设备及需要实现的交互。确认图片、字体和模型的使用许可;预览不包含这些源素材。让工具先列出缺失材料,再决定如何替代。

上线前验收实际效果

在相同屏幕尺寸下对照参考检查效果。测试窄屏手机布局、键盘操作及减少动态效果模式;确认图片能加载、视频离开视野会暂停、按钮能完成所标注的操作。发现差异时,向工具提供截图、设备和复现步骤。构建成功并不代表设计和交互已验收通过。