CLIAI 技能【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址https://gitcode.com/gh_mirrors/cli414/cli点击查看免费下载高保真设计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 跟踪执行澄清关键信息能从需求、附件、截图或常见模式合理推断的直接继续只在关键信息缺失且会影响设计方向时才向用户提问。查找现有 UI kit 并收集设计上下文复制所有相关组件阅读所有相关示例如果找不到且会影响核心设计方向再向用户询问。在文件开头写下假设、上下文和设计推理放好设计占位并尽早展示给用户。尽快把设计做出来再次展示给用户并附上下一步建议。使用工具检查、验证并迭代设计。这条流程与主技能的工作流理解需求 → 解析输入资料 → 列 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 idonboarding titleOnboarding subtitleFirst-run variants DCArtboard ida labelA · Dusk width{260} height{480}…/DCArtboard DCArtboard idb labelB · Minimal width{260} height{480}…/DCArtboard /DCSection /DesignCanvas该组件导出DesignCanvas、DCSection、DCArtboard、DCPostItartboard 支持拖拽重排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 局部」的典型划分类型举例处理方式承重、推不出就必须先问交付媒介 / 格式报告 vs deck vs 看板从零起项目的视觉 / 美学方向大体量交付的受众 / 目的与核心范围一轮聚焦提问把承重的未知一次问齐局部、给默认直接做变体数量与探索维度、界面文案、占位与示例内容、单屏 / 单组件的处理与密度给合理默认变体默认摆 2-3 个有清晰差异的方案让用户在产出上重定向提问工具在具体 harness 中的映射见 claude.mdask_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 的间距是显式的能干净地经受直接操作类编辑拖拽重排、删除、复制高级 CSStext-wrap: pretty、CSS grid 等高级效果都是好帮手图标使用手写内联 SVGsvg viewBox0 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 点击目标不小于 44pxemoji 规则不要在生成的代码中使用 emoji 字符除非品牌资产明确包含规范性写显式闭合标签、双引号属性、不自行闭合非空元素方便编辑器直接编辑绝不使用scrollIntoView。7.1 React Babel 运行环境高保真设计产物基于浏览器内 JSX无构建步骤Babel 运行时转译必须使用锁定版本的确切 script 标签见 creative-design.md「React Babel」一节或直接从 assets/index.html 拷贝起步模板——它已带好三个 script 标签和#root挂载点script srchttps://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/react18.3.1/umd/react.development.js crossoriginanonymous/script script srchttps://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/react-dom18.3.1/umd/react-dom.development.js crossoriginanonymous/script script srchttps://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/babel/standalone7.29.0/babel.min.js crossoriginanonymous/script配套的工程约束还包括.jsx文件必须用script typetext/babel srcxxx.jsx/script导入省略 type 属性会让浏览器把 JSX 当作纯 JS 解析而报语法错误外部脚本放在依赖它们的内联脚本之前跨文件共享组件时在组件文件末尾导出到windowObject.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_idapp_ 开头 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 为例的部分映射Web 工具Claude Code 对应项ask_user_questionAskUserQuestion答案内联返回每次最多 4 个问题copy_starter_componentBash cp skill 目录/starter-components/file .invoke_skill(X)Read对应的references/file.mdgenerate_image无内置对应接入了图像生成 MCP/工具则使用否则用内联 SVG / CSS 兜底web_fetch/web_searchWebFetch/WebSearch展示文件SendUserFile9.2 协作锚点主技能还规定了两个与评审评论相关的协作细节源元素上的data-comment-anchor…属性把用户评审评论钉在元素上编辑时应保留在语义等价元素上在代表幻灯片和高层级屏幕的元素上加[data-screen-label]属性以便分辨评论针对哪一屏——当用户说「slide 5」时指的是第 5 张幻灯片标签「05」绝非数组下标[4]因为人类不按 0 起始计数。十、小结高保真设计的核心要点维度要点触发场景UI mockup、设计探索、带多方案的视觉原型触发词mockup, hi-fi, prototype, UI design, 高保真, 设计稿, 原型…设计流程澄清信息 → 收集设计上下文 → 记录假设并占位 → 快速出稿 → 工具验证迭代上下文优先好的设计扎根于既有 UI kit / 品牌资产 / 截图代码从零 mock 是最后手段多方案呈现中性灰背景 独立带标签白卡片 分组静态探索用 design-canvas 画布提问原则只问承重且推不出的问题一轮问齐避免频繁打断变体策略默认 2-3 个清晰差异的方案稳妥与新颖混搭产出可混搭的原子级变体技术手段CSS/HTML/JS/SVG 全栈可用React Babel 浏览器内 JSXstarter components 免手搓脚手架发布闭环任务目录独立初始化commit push 到 sprint/defaultrelease-create / release-get 轮询拿 online_url对希望深入实践的读者建议按以下路径继续阅读仓库hi-fi-design.md 掌握本技能全貌creative-design.md 查看完整工作流、默认美学指令与发布链路frontend-design.md 学习有主张的视觉方向确立方法wireframe.md 了解低保真阶段的探索方式再对照 design-canvas.jsx 与 assets/index.html 直接上手搭建。赞分享CLIAI 技能【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址https://gitcode.com/gh_mirrors/cli414/cli点击查看免费下载相关推荐Claude Design 高保真设计实战基于 Hi-fi Design Skill 的完整工作流与多方案呈现规范Claude Design 高保真设计实战基于 Hi fi Design Skill 的完整工作流与多方案呈现规范 本篇指南深入解读 Anthropic Cl文档知识库yuzu模拟器在PC上流畅运行Switch游戏的完整指南yuzu模拟器在PC上流畅运行Switch游戏的完整指南 yuzu是什么定位与项目速览 yuzu模拟器是目前较成熟的开源任天堂Switch模拟器之一虚拟化桌面应用图形学CesiumJS三维地下可视化:3个核心机制CesiumJS三维地下可视化:3个核心机制 让管线埋深在同一个三维场景里可见 管线巡检时,现场工程师需要同时知道哪一段管道服役超过二十年、埋深多少、上方是否还CLIAI 技能上一篇突破语言壁垒Open-Sora多语言视频生成与本地化实践终极指南下一篇MOSS-VL-Instruct-0408视觉编码器深度解析从ViT到跨注意力融合创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Lark CLI 创意设计技能之高保真设计（Hi-Fi Design）：UI Mockup 与多方案视觉探索的完整实践指南
CLIAI 技能【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址https://gitcode.com/gh_mirrors/cli414/cli点击查看免费下载高保真设计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 跟踪执行澄清关键信息能从需求、附件、截图或常见模式合理推断的直接继续只在关键信息缺失且会影响设计方向时才向用户提问。查找现有 UI kit 并收集设计上下文复制所有相关组件阅读所有相关示例如果找不到且会影响核心设计方向再向用户询问。在文件开头写下假设、上下文和设计推理放好设计占位并尽早展示给用户。尽快把设计做出来再次展示给用户并附上下一步建议。使用工具检查、验证并迭代设计。这条流程与主技能的工作流理解需求 → 解析输入资料 → 列 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 idonboarding titleOnboarding subtitleFirst-run variants DCArtboard ida labelA · Dusk width{260} height{480}…/DCArtboard DCArtboard idb labelB · Minimal width{260} height{480}…/DCArtboard /DCSection /DesignCanvas该组件导出DesignCanvas、DCSection、DCArtboard、DCPostItartboard 支持拖拽重排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 局部」的典型划分类型举例处理方式承重、推不出就必须先问交付媒介 / 格式报告 vs deck vs 看板从零起项目的视觉 / 美学方向大体量交付的受众 / 目的与核心范围一轮聚焦提问把承重的未知一次问齐局部、给默认直接做变体数量与探索维度、界面文案、占位与示例内容、单屏 / 单组件的处理与密度给合理默认变体默认摆 2-3 个有清晰差异的方案让用户在产出上重定向提问工具在具体 harness 中的映射见 claude.mdask_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 的间距是显式的能干净地经受直接操作类编辑拖拽重排、删除、复制高级 CSStext-wrap: pretty、CSS grid 等高级效果都是好帮手图标使用手写内联 SVGsvg viewBox0 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 点击目标不小于 44pxemoji 规则不要在生成的代码中使用 emoji 字符除非品牌资产明确包含规范性写显式闭合标签、双引号属性、不自行闭合非空元素方便编辑器直接编辑绝不使用scrollIntoView。7.1 React Babel 运行环境高保真设计产物基于浏览器内 JSX无构建步骤Babel 运行时转译必须使用锁定版本的确切 script 标签见 creative-design.md「React Babel」一节或直接从 assets/index.html 拷贝起步模板——它已带好三个 script 标签和#root挂载点script srchttps://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/react18.3.1/umd/react.development.js crossoriginanonymous/script script srchttps://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/react-dom18.3.1/umd/react-dom.development.js crossoriginanonymous/script script srchttps://sf3-scmcdn-cn.feishucdn.com/obj/feishu-static/miaoda/coding-unpkg-sdk/babel/standalone7.29.0/babel.min.js crossoriginanonymous/script配套的工程约束还包括.jsx文件必须用script typetext/babel srcxxx.jsx/script导入省略 type 属性会让浏览器把 JSX 当作纯 JS 解析而报语法错误外部脚本放在依赖它们的内联脚本之前跨文件共享组件时在组件文件末尾导出到windowObject.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_idapp_ 开头 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 为例的部分映射Web 工具Claude Code 对应项ask_user_questionAskUserQuestion答案内联返回每次最多 4 个问题copy_starter_componentBash cp skill 目录/starter-components/file .invoke_skill(X)Read对应的references/file.mdgenerate_image无内置对应接入了图像生成 MCP/工具则使用否则用内联 SVG / CSS 兜底web_fetch/web_searchWebFetch/WebSearch展示文件SendUserFile9.2 协作锚点主技能还规定了两个与评审评论相关的协作细节源元素上的data-comment-anchor…属性把用户评审评论钉在元素上编辑时应保留在语义等价元素上在代表幻灯片和高层级屏幕的元素上加[data-screen-label]属性以便分辨评论针对哪一屏——当用户说「slide 5」时指的是第 5 张幻灯片标签「05」绝非数组下标[4]因为人类不按 0 起始计数。十、小结高保真设计的核心要点维度要点触发场景UI mockup、设计探索、带多方案的视觉原型触发词mockup, hi-fi, prototype, UI design, 高保真, 设计稿, 原型…设计流程澄清信息 → 收集设计上下文 → 记录假设并占位 → 快速出稿 → 工具验证迭代上下文优先好的设计扎根于既有 UI kit / 品牌资产 / 截图代码从零 mock 是最后手段多方案呈现中性灰背景 独立带标签白卡片 分组静态探索用 design-canvas 画布提问原则只问承重且推不出的问题一轮问齐避免频繁打断变体策略默认 2-3 个清晰差异的方案稳妥与新颖混搭产出可混搭的原子级变体技术手段CSS/HTML/JS/SVG 全栈可用React Babel 浏览器内 JSXstarter components 免手搓脚手架发布闭环任务目录独立初始化commit push 到 sprint/defaultrelease-create / release-get 轮询拿 online_url对希望深入实践的读者建议按以下路径继续阅读仓库hi-fi-design.md 掌握本技能全貌creative-design.md 查看完整工作流、默认美学指令与发布链路frontend-design.md 学习有主张的视觉方向确立方法wireframe.md 了解低保真阶段的探索方式再对照 design-canvas.jsx 与 assets/index.html 直接上手搭建。赞分享CLIAI 技能【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址https://gitcode.com/gh_mirrors/cli414/cli点击查看免费下载相关推荐Claude Design 高保真设计实战基于 Hi-fi Design Skill 的完整工作流与多方案呈现规范Claude Design 高保真设计实战基于 Hi fi Design Skill 的完整工作流与多方案呈现规范 本篇指南深入解读 Anthropic Cl文档知识库yuzu模拟器在PC上流畅运行Switch游戏的完整指南yuzu模拟器在PC上流畅运行Switch游戏的完整指南 yuzu是什么定位与项目速览 yuzu模拟器是目前较成熟的开源任天堂Switch模拟器之一虚拟化桌面应用图形学CesiumJS三维地下可视化:3个核心机制CesiumJS三维地下可视化:3个核心机制 让管线埋深在同一个三维场景里可见 管线巡检时,现场工程师需要同时知道哪一段管道服役超过二十年、埋深多少、上方是否还CLIAI 技能上一篇突破语言壁垒Open-Sora多语言视频生成与本地化实践终极指南下一篇MOSS-VL-Instruct-0408视觉编码器深度解析从ViT到跨注意力融合创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考