实操：用右侧面板微调页面

这篇教程接着生成入门介绍页往下做。第一篇的目标是「生成出来」；这一篇的目标是「看清楚、标出来、轻微调整、再交付」。

请先用同一个项目练习，不要重新创建。这样你能看到 Open Design 的完整使用方式：先生成，再在右侧面板里检查和微调。

本次要完成什么

你要在刚生成的「Open Design 入门介绍页」上完成 6 件事：

从「设计文件」重新打开 HTML 页面
把预览切到「桌面端」和 100%
分别看一次「平板端」和「移动端」
如果当前版本出现主题或调整面板，尝试一次不同配色；没有则跳过
用「绘制」或「评论」标出一个需要修改的位置
了解「编辑」「注释/点选检查模式」「分享」「演示」「继续到本地开发工具」分别什么时候用

1. 打开刚才生成的页面

进入刚才的项目
查看右侧面板，点击「设计文件」
找到类型为「HTML 页面」的文件
点击文件右侧的「打开」
打开后点击顶部的「预览」

看到入门介绍页后，这一步完成。

如果右侧已经打开了页面标签，可以直接点击这个文件标签，不需要重复从「设计文件」打开。

下图是真实项目页里的「设计文件」区域。练习时找到自己的 HTML 页面文件，点击文件右侧的「打开」即可。

项目页设计文件区域中的 HTML 页面文件

2. 认识右侧面板的几个区域

右侧面板可以分成 5 个区域：

区域	你会看到什么	主要用途
顶部标签区	`+`、搜索图标、项目标签、文件标签、`×`	在多个项目或文件之间切换
项目操作区	演示、分享、继续到本地开发工具、齿轮设置	展示、导出、交付或调整设置
设计文件区	设计文件、HTML 页面、打开、刷新、搜索文件	找到和管理项目里的文件
预览工具条	重新加载、预览、代码、桌面端、100%、调整	控制当前文件怎么查看
右侧工具区	绘制、评论、编辑，以及可能出现的主题或点选检查入口	对页面做标注、评论、局部编辑或辅助检查

第一次练习时，重点记住这几个：设计文件、预览、桌面端、100%、重新加载、绘制、评论。

下面这张图是真实预览界面：顶部能看到「预览」「桌面端」「100%」等查看控制，右侧能看到 Themes、绘制、评论等工具入口。不同版本的入口名称和顺序可能略有变化，以你当前界面为准。

项目页右侧预览工具条和工具入口

3. 设置预览方式

先把当前页面调到最容易检查的状态。

点击顶部的「预览」
如果当前显示的是「代码」，点击下拉菜单切回「预览」
点击设备选择，选择「桌面端」
点击缩放比例，选择 100%
如果页面看起来不是最新结果，点击「重新加载」

完成后，你看到的是电脑端正常大小的页面预览。

4. 检查不同设备效果

同一个页面在电脑、平板、手机上可能会不一样。检查时按这个顺序：

先选择「桌面端」，看整体结构和视觉是否适合电脑展示
再选择「平板端」，看模块是否拥挤
再选择「移动端」，看文字是否太长、按钮是否挤在一起
检查完后切回「桌面端」

本次入门介绍页主要面向电脑端，以「桌面端」效果为准。

如果移动端效果不好但你只需要电脑端页面，可以在左侧对话区发送：

当前页面主要用于电脑端展示，请优先保证桌面端效果。移动端只需要不明显错乱即可，不需要专门做成手机页面。

如果这个页面以后也要发到手机上看，可以发送：

请优化移动端展示效果。手机上标题不要太长，模块上下间距更紧凑，按钮不要挤在一起，保证从上到下阅读顺畅。

5. 需要时尝试主题或调整面板

有些版本会在右侧工具区或调整面板里提供主题、配色或视觉调整能力。它适合页面结构已满意，但颜色想换一换的时候。

查看右侧工具区或预览工具条里是否有主题、配色或调整面板
如果有，在面板里选一个看起来更合适的配色
观察页面整体感觉有没有变化
如果不合适，切回原始主题

如果当前版本没有看到这类入口，可以直接跳过本练习。配色调整也可以通过左侧对话区提出。

本次入门介绍页建议选择清爽、可信、适合培训的颜色，不要选过于夸张的视觉方向。

试完主题后有明确偏好，可以在左侧对话区发送：

保留当前页面结构，把整体配色调整得更清爽、可信，适合培训。避免过于鲜艳和营销感强的颜色。

6. 用「绘制」标出要改的位置

「绘制」适合表达「这里要改」。比如你想指出某个标题太大、某个模块太挤、某段文字要删掉，就可以直接在预览上圈出来。

点击右侧工具区的「绘制」
页面底部会出现一条绘制工具栏
用框选或画笔在页面上标出需要修改的位置
在输入框里写一句说明，例如「这里文字太多，压缩成 3 个要点」
点击发送，把标注和说明一起发送给 Open Design

如果只是先把标注放进待发送列表，可以加入队列后继续标其他位置。如果画错了，可以用撤销；也可以关闭绘制后重新打开，再重新标注。

推荐练习这一句：

这里文字太多，请压缩成 3 个要点，并让标题更短。

标注就是在页面上圈出、画线或写说明。它的作用是让 Open Design 知道你说的「这里」到底是哪一块。只写「这里不好看」通常不够清楚；圈出位置并补一句原因，修改会更准确。

7. 用「评论」留下修改意见

「评论」适合更正式地记录意见，尤其是你要和用户一起看页面，或者想对某个具体位置留下说明。

点击右侧工具区的「评论」
点击页面上需要评论的位置
在弹出的输入框里写评论
如果只是记录意见，点击「评论」保存
如果希望 Open Design 立刻按评论去修改，点击「发送到聊天」

推荐练习这一句：

这一块要更像给新用户看的说明，不要像对外宣传。

「绘制」和「评论」的区别：

工具	更适合做什么	举例
绘制	快速圈出位置并让 Open Design 修改	圈出一段文字，说「压缩成 3 点」
评论	留下更清楚的意见或协作记录	点选一个模块，说「这个模块改成给运营人员看的例子」

8. 用「编辑」直接改小内容

「编辑」适合非常小的改动，例如改一个标题、替换一段短文案、调整某个元素的样式。

点击右侧工具区的「编辑」
在预览里直接点击想修改的可编辑文字
直接改文字内容
如果要调整颜色、字号、间距等样式，在浮动面板中选择对应设置
完成后点击「保存」，或退出编辑状态

第一次使用时，只建议改一处短文字。比如把页面主标题改成：

Open Design 入门培训入门

如果你点不到想改的位置，或者要改的内容超过一两句话，不要硬改。回到左侧对话区发送修改要求更稳。

9. 用注释/点选检查模式做细节检查

注释/点选检查模式更偏精确检查。适合你想点选某个具体元素，看看它能不能单独说明、评论或调整。

打开右侧工具区里的评论、注释或点选检查相关入口
点击页面里你关心的元素，例如标题、按钮、卡片
查看是否出现评论、说明或可调整项
如果只是想让 Open Design 修改这个元素，可以直接写下意见并发送，或回到左侧对话区描述

非技术用户不需要优先学习点选检查。多数情况下，「绘制」或「评论」已经足够表达修改意见。

点选检查可以理解成「先点中页面里的某个具体元素，再围绕这个元素查看、评论或微调」。它适合处理很具体的问题，例如某个标题太大、某个按钮颜色不合适、某张图位置不对。第一次使用时不需要先学会点选检查；多数修改直接在左侧对话区说清楚，或者用绘制和评论标出来即可。

10. 用「演示」查看展示效果

页面基本满意后，可以用「演示」看看它在展示状态下是否顺眼。

点击右上方「演示」
如果只是自己查看，选择「在当前标签页」
如果要放大给别人看，选择「全屏」
如果想单独打开一个新页面，选择「新标签页」

演示适合会议、培训、现场讲解。编辑和继续修改仍然回到项目页完成。

11. 用「分享」导出结果

「分享」不只是生成链接，它还包含下载、导出、保存模板和部署等操作。

点击右上方「分享」
按用途选择导出方式

选项	适合什么时候用
导出 PDF	要发给用户评审、存档或放到群里
下载 ZIP	要把完整项目文件交给别人
导出 HTML	要得到一个可以单独打开的网页文件
导出图片	想把当前页面效果作为图片发出去
保存为模板	以后还要反复做类似结构的页面
部署到外部平台	页面需要生成可访问的网址

菜单可能还包括 PPTX、Markdown、Vercel、Cloudflare 等选项，具体以当前菜单为准。

12. 什么时候继续到本地开发工具

「Continue in CLI」或「继续到本地开发工具」适合页面已经比较满意，但需要技术人员继续接入真实项目。部分场景也可以先选择「Finalize design package」或「完成设计包」，把设计结果整理成更适合交付的文件包。

普通用户可以这样理解：

Open Design 负责快速生成和调整页面草稿
本地开发工具是技术人员继续开发、调试和接入代码项目的地方
当页面要进入真实产品、官网或代码项目时，可以继续到本地开发工具处理

本次入门介绍页只是练习，不需要继续到本地开发工具。

本地开发工具是技术人员在自己电脑上继续处理项目的工具环境，常用于接入真实代码、调试页面、连接数据或发布到正式系统。非技术用户通常不需要自己操作这些工具；只要知道「继续到本地开发工具」表示页面已经从设计和草稿阶段，进入开发人员继续落地的阶段即可。交付前可以先确认页面是否已经评审通过、是否需要导出设计包，以及是否有真实项目地址或技术负责人接收。

13. 完成标准

下面 7 项全部做到，就算完成本次微调练习：

从「设计文件」打开了 HTML 页面
把预览设置为「桌面端」和 100%
看过「平板端」和「移动端」效果
知道主题或调整面板如果出现可以尝试，没出现可以跳过
用「绘制」或「评论」标出过一个修改位置
知道「编辑」和点选检查更适合小范围细节调整
知道「演示」「分享」「继续到本地开发工具」分别用于展示、导出和交付

完成后，你就可以按实际需要选择两种方式：大改动回到左侧对话区发送修改要求，小改动用右侧面板直接标注、评论或编辑。