企业官网建设流程全解析

• CLI
• AI 技能

高保真设计（Hi-Fi Design）是 Lark CLI 内置创意设计技能（Creative Design）中的媒介专属子技能之一，用于创建高保真 UI mockup、精细打磨的设计稿，以及带多种变体的视觉原型。本文以 hi-fi-design.md 为骨架，结合 creative-design.md 主技能、design-canvas.jsx 等 starter components 源码与 harness 工具映射表，完整讲解设计流程、设计上下文获取、多方案呈现布局、提问原则与变体策略，帮助读者掌握在 Lark CLI 生态中交付高质量高保真设计稿的完整实战能力。

一、技能定位：什么时候触发高保真设计

高保真设计子技能在以下场景被加载：用户需要高保真 UI mockup、界面设计或带多种方案的视觉探索时。其元信息中声明了明确的触发词：mockup, hi-fi, prototype, UI design, 高保真, 设计稿, 原型, 界面设计, 视觉设计, 设计方案，并指定由CreativeDesignAgent 执行。

在 creative-design.md 的「如何开展设计工作」一节中，明确了技能加载的优先级规则：动手前先读取references/frontend-design.md确立视觉方向；当用户提出高保真 mockup、界面设计或多方案视觉探索时，开始之前先读取references/hi-fi-design.md——它涵盖设计流程、获取设计上下文、提问以及呈现多个方案。当媒介专属技能内的指令与通用设计规则冲突时，以媒介技能内的指令为准。

技能家族还包括 wireframe.md（低保真线框图与故事板，探索设计空间）、interactive-prototype.md（可交互原型）等兄弟技能，高保真设计介于两者之间：比线框图更精细，但默认不要求可点击交互。

二、五步设计流程：用 todo list 记住

高保真设计子技能规定了一条通用设计流程，要求用 todo list 跟踪执行：

1. 澄清关键信息：能从需求、附件、截图或常见模式合理推断的，直接继续；只在关键信息缺失且会影响设计方向时才向用户提问。
2. 查找现有 UI kit 并收集设计上下文：复制所有相关组件，阅读所有相关示例；如果找不到且会影响核心设计方向，再向用户询问。
3. 在文件开头写下假设、上下文和设计推理：放好设计占位，并尽早展示给用户。
4. 尽快把设计做出来：再次展示给用户，并附上下一步建议。
5. 使用工具检查、验证并迭代设计。

这条流程与主技能的工作流（理解需求 → 解析输入资料 → 列 todo → 创建任务目录 → 自检 React + Babel 路径 → 提交改动 → 发布到妙搭 → 简短总结）衔接：高保真设计子技能负责其中的「设计」环节，而任务目录创建、发布链路由 creative-design.md 统一管理。

三、设计上下文：好的高保真设计不会从零开始

子技能明确强调：好的高保真设计不会从零开始——它们扎根于已有的设计上下文。具体做法包括：

• 找到合适的 UI kit / 设计资源；
• 或从截图、代码和品牌资产中提取设计规则；
• 必须花时间去获取设计上下文，包括组件；
• 如果缺少素材但不影响核心方向，先用合理假设继续推进；只有缺失信息会改变设计方向时才向用户索要；
• 从零 mock 一个完整产品是最后手段，会导致低质量的设计；
• 使用 starter components（设备框架等）可以免费获得高质量的脚手架。

这一点在 creative-design.md 的「默认美学指令」中得到呼应：如果用户没给参考或艺术方向，能从主题、材料或场景推断出有把握、不会返工的视觉方向就主动确定；推不出又是从零起的项目，先用ask_user_question问清偏好——不要在推不出方向时硬选，AI slop 就是这么来的。

3.1 直接可用的 Starter Components 脚手架

子技能提到的「starter components」位于 starter-components/ 目录，主技能提供了完整清单：

• design-canvas.jsx — 可平移／缩放的画布，artboard 可重排、可全屏聚焦；
• deck-stage.js — 幻灯片 deck 外壳；
• ios-frame.jsx / android-frame.jsx — 带状态栏和键盘的设备边框；
• tweaks-panel.jsx — 浮动的 Tweaks 面板＋表单控件；
• macos-window.jsx / browser-window.jsx — 桌面窗口外壳；
• animations.jsx — 基于时间轴的动画引擎。

使用方式是把文件拷进当前任务目录（cp <本 skill 所在目录>/starter-components/<file> .）或读过之后照着改；每个文件顶部都带有自己的用法说明。以 design-canvas.jsx 为例，其BEGIN USAGE注释块给出了典型调用方式：

<DesignCanvas> <DCSection id="onboarding" title="Onboarding" subtitle="First-run variants"> <DCArtboard id="a" label="A · Dusk" width={260} height={480}>…</DCArtboard> <DCArtboard id="b" label="B · Minimal" width={260} height={480}>…</DCArtboard> </DCSection> </DesignCanvas>

该组件导出DesignCanvas、DCSection、DCArtboard、DCPostIt，artboard 支持拖拽重排（grip-drag）、删除、内联改标签/标题，并可进入全屏聚焦浮层（←/→/Esc 导航）；画布状态通过宿主桥持久化到.design-canvas.state.json侧车文件。交互映射为 Figma 风格：触控板捏合或 Ctrl/⌘+滚轮缩放、双指/滚轮平移、中键或背景拖拽平移，画布右下角提供 20%–200% 的缩放控件。

四、多方案并排呈现的标准布局

子技能对「并排展示多个方案或探索方向」给出了明确的布局规范：

给页面一个中性灰背景，把每个方案放进独立且带标签的框中（小标题 + 尺寸随内容变化的白色圆角卡片），并把相关方案分组。

这与design-canvas.jsx的DCSection/DCArtboard结构一一对应：DCSection提供分组的标题与副标题，DCArtboard是带标签的独立卡片。关于 artboard 尺寸，组件注释给出了两条关键行为规则：

• 省略height→ 卡片随内容自动生长（不会垂直裁剪），这是整页/长屏设计的正确默认；
• height={N}→ 固定 N 像素的裁剪框架（overflow:hidden），只用于刻意裁切的缩略图（如 A/B 对比块）；
• width始终是固定框架宽度（默认 260），内容超出会被裁剪，所以整页设计应把 width 设为真实设计宽度；
• 当把设备框架放进 artboard 时，传chromeless属性抑制卡片外壳，让 artboard 随内容自适应尺寸。

五、提问原则：只在影响设计方向时提问

子技能对提问的要求很克制：设计时，提出好问题很重要——但只在问题会实质性影响设计方向时才提问，避免频繁打断用户。

这一原则与主技能 creative-design.md「提问」一节的判定条件完全一致：只有当决策同时满足两条时才提问——① 用户没说、且从 prompt / PRD / 截图 / 代码库 / 品牌资料也推不出；② 猜错要推倒重来（承重决策，下游都建在它上面）。两条只要有一条不成立就直接做。

主技能还给出了「承重 vs 局部」的典型划分：

提问工具在具体 harness 中的映射见 claude.md：ask_user_question→ Claude Code 的AskUserQuestion（答案内联返回，每次最多 4 个问题，大型新项目先问一轮聚焦的问题，不够再补一次调用）。

六、变体策略：默认 2-3 个，从稳妥走向大胆

6.1 数量与维度的默认值

子技能规定：默认提供 2-3 个有清晰差异的方案（与主技能「提问」一节的默认一致）；用户明确要求广度探索时，再围绕多个维度扩展更多变体。

6.2 混搭策略：稳妥方案 × 新颖交互

变体的组织方式是「把符合既有模式的稳妥方案，与新颖的交互方式混合搭配」，包括有趣的布局、隐喻和视觉风格。具体要求：

• 部分方案使用色彩或高级 CSS，部分带图标，部分不带；
• 变体从基础开始，逐步走向更高级、更有创意的方向；
• 尝试以有趣的方式重混品牌资产和视觉 DNA——玩转尺度（scale）、填充（fill）、纹理（texture）、视觉节奏（visual rhythm）、层次（hierarchy）、新颖布局（novel layouts）、字体处理（typography treatment）。

6.3 目标是可混搭的原子级变体

子技能给出了一个容易被忽略的核心认知：目标不是找到完美方案，而是探索用户可以混搭组合的原子级变体（atomic-level variants）。这意味着每个变体应当是独立可取的「设计原子」——某一种配色、某一种卡片布局、某一种字体处理——用户可以从中自由挑选拼装，而不是只能二选一的整体方案。

6.4 主技能的补充约束

主技能「如何开展设计工作」补充了重要边界：静态视觉 / 设计稿 / 多方案探索通过design-canvas.jsx铺陈在画布上，除非用户明确要求可点击 / 可交互，否则不要把设计稿升级成点击原型；用户明确要求可交互的流程或产品 demo则要做成真实应用界面直接运行，禁止用画布外壳包裹。两者可以组合，但只限静态设计探索——交互原型的多方向探索要用页内开关、路由、Tabs、Tweak 或模式切换承载，不能放进 design-canvas 画布。当用户要求新版本或改动时，把它们作为 TWEAKS 加到原件上，拥有一个可切换不同版本开关的主文件，优于拥有多个文件。

七、善用 CSS、HTML、JS 与 SVG：给用户惊喜

子技能最后强调：CSS、HTML、JS 和 SVG 能力强大，用户往往不知道它们能做到什么，给用户惊喜。这正是高保真设计与纯静态图片 mockup 的本质区别——产物是自包含 HTML，可以做真实渲染的排版、动效与交互。

主技能为此提供了大量可直接落地的技术指引（见 creative-design.md 的「输出创建准则」「内容准则」）：

• 布局：强烈倾向用带gap的 flex/grid 而非 inline 流——flex/grid 的间距是显式的，能干净地经受直接操作类编辑（拖拽重排、删除、复制）；
• 高级 CSS：text-wrap: pretty、CSS grid 等高级效果都是好帮手；
• 图标：使用手写内联 SVG（<svg viewBox="0 0 24 24">）建立语义贴切、风格连贯的图标语言；
• 字体加载：需要 web 字体时一律从自托管镜像https://miaoda.feishu.cn/fonts/css2加载（Google Fonts css2 端点的直接替代，查询语法一致），不要直连 Google CDN；
• 避免 AI slop 套路：包括滥用渐变背景、emoji、圆角＋左边框强调色的容器、被用滥的字体族（Inter、Roboto、Arial、Fraunces）；
• 尺度硬性规格：1920×1080 的幻灯片文字不小于 24px、打印文档最小 12pt、移动端 mockup 点击目标不小于 44px；
• emoji 规则：不要在生成的代码中使用 emoji 字符（除非品牌资产明确包含）；
• 规范性：写显式闭合标签、双引号属性、不自行闭合非空元素，方便编辑器直接编辑；绝不使用scrollIntoView。

7.1 React + Babel 运行环境

高保真设计产物基于浏览器内 JSX（无构建步骤，Babel 运行时转译），必须使用锁定版本的确切 script 标签（见 creative-design.md「React + Babel」一节），或直接从 assets/index.html 拷贝起步模板——它已带好三个 script 标签和#root挂载点：

<script src="https://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/react@18.3.1/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/react-dom@18.3.1/umd/react-dom.development.js" crossorigin="anonymous"></script> <script src="https://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/@babel/standalone@7.29.0/babel.min.js" crossorigin="anonymous"></script>

配套的工程约束还包括：.jsx文件必须用<script type="text/babel" src="xxx.jsx"></script>导入（省略 type 属性会让浏览器把 JSX 当作纯 JS 解析而报语法错误）；外部脚本放在依赖它们的内联脚本之前；跨文件共享组件时在组件文件末尾导出到window（Object.assign(window, {...})）；全局样式对象必须基于组件名唯一命名（const terminalStyles = {...}），绝不写const styles = {...}。

八、从设计到交付：任务目录、Tweaks 与发布链路

8.1 任务目录与文件组织

每个任务创建独立的语义化命名目录（如sales-dashboard/），它就是独立的妙搭应用仓库；所有交付物写进本任务目录，主 HTML 入口是该目录下的index.html。对文件做重大修订时先复制再编辑（如index.html、index v2.html），并始终避免写大文件（>1000 行），把代码拆成若干更小的 JSX 文件最后在主文件 import 进来。

8.2 Tweaks：把关键选项暴露给用户

高保真设计探索中，需要变体切换时使用 Tweaks 面板（tweaks-panel.jsx），它接好了宿主协议并提供useTweaks()与现成控件，不要自己实现。关键规则是闭环：每个 tweak 都需要一个生产者（面板控件）和一个消费者（对该值作出反应的内容）——只存在于<TweaksPanel>和TWEAK_DEFAULTS里的值不会改变设计中的任何东西。

8.3 发布到妙搭获取可访问链接

设计产物写完并提交后，需要发布到妙搭（lark-apps）才能拿到可访问链接。完整命令序列见 creative-design.md「发布」一节，核心步骤如下（均在任务目录内执行）：

# 1. 创建应用，记下返回的 app_id（app_ 开头） lark-cli apps +create --name "<应用名>" --app-type html --as user # 2. 初始化到任务目录：自动 clone 远端仓库并 checkout 工作分支 sprint/default lark-cli apps +init --app-id <app_id> --dir <任务目录> --as user # 3. 提交并推到工作分支 sprint/default git add . && git commit -m "feat: ..." && git push origin sprint/default # 4. 发起部署（记下返回的 release_id），然后轮询状态直到 finished / failed lark-cli apps +release-create --app-id <app_id> --as user lark-cli apps +release-get --app-id <app_id> --release-id <release_id> --as user

需要特别注意的是：推送和部署的分支必须是sprint/default（推到其他分支+release-create会失败）；+release-create部署的是远端sprint/default上已 push 的代码，未 commit / 未 push 的改动不会进入这次发布；完成 ≠ 发布——必须拿到本轮+release-get返回的finished才算发布成功，其输出的online_url即最终可分享链接。创意模式（html）应用开发态与发布态是同一个链接。

九、跨 harness 的工具映射与团队协作细节

9.1 工具映射表

子技能正文使用 harness 无关的 web 工具名（ask_user_question、copy_starter_component、invoke_skill("X")、generate_image、search_images等），动手前必须读取当前运行环境对应的references/<harness>.md完成映射。以 claude.md 为例的部分映射：

9.2 协作锚点

主技能还规定了两个与评审评论相关的协作细节：源元素上的data-comment-anchor="…"属性把用户评审评论钉在元素上，编辑时应保留在语义等价元素上；在代表幻灯片和高层级屏幕的元素上加[data-screen-label]属性，以便分辨评论针对哪一屏——当用户说「slide 5」时指的是第 5 张幻灯片（标签「05」），绝非数组下标[4]，因为人类不按 0 起始计数。

十、小结：高保真设计的核心要点

对希望深入实践的读者，建议按以下路径继续阅读仓库：hi-fi-design.md 掌握本技能全貌；creative-design.md 查看完整工作流、默认美学指令与发布链路；frontend-design.md 学习有主张的视觉方向确立方法；wireframe.md 了解低保真阶段的探索方式；再对照 design-canvas.jsx 与 assets/index.html 直接上手搭建。

• CLI
• AI 技能