尧图网站建设 
HyperFrames Design Picker 实战指南面向 Agent 的两阶段可视化视觉方向选择器【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文讲解 HyperFrames 创意技能hyperframes-creative中的 Design Picker——一个先看情绪板mood board选整体方向、再逐类别微调的两阶段可视化选择器。文章覆盖从选项生成规范、五类 JSON 数据格式、占位符注入到本地 HTTP 服务与design.md交接的完整闭环并深入到 design-picker.html 模板源码的运行机制读者可以据此为任意品牌产出真正个性化的视觉方向并交付一份符合 design-spec 规范的design.md。一、Design Picker 是什么两阶段可视化选择器Design Picker 是 HyperFrames 创意技能中交互式视觉方向选择的落地工具核心交互模型为两阶段Phase 1Direction先展示 48 张情绪板mood board让用户一次性选定一个完整的视觉方向而不是面对一堆零散选项Phase 2Fine-tune基于所选情绪板预填的选择在结构、色彩、字体、圆角、密度、深度、动效等类别上逐项微调。它在整个技能路由中的定位可见 SKILL.md 的工作流当项目没有现成设计规范、且用户要求交互式选择时走references/design-picker.md这条路由对应Interactive selection分支。最终产出是一份design.md——即 design-spec.md 所定义、与frame.md同格式的YAML frontmatter Markdown 正文设计规范文件。二、前置条件生成选项前必读的规则文档在生成任何选项之前必须先阅读以下规则文档——它们定义了每个选项必须遵守的约束跳过它们正是产出通用化、网页感设计的最大原因SKILL.md 中明确要求组合类任务先读 house-style 与 video-composition文档作用references/typography.md字体选择与搭配铁律含 18 个预打包字体清单、禁用字体清单、字体发现脚本references/house-style.md无设计规范时的创意默认值解释提示词、生成真实内容、懒默认项清单、背景层配方references/video-composition.md视频媒介的尺度、深度与前景细节避免空荡的网页式布局references/visual-styles.md具名风格预设、mood 到风格的映射references/beat-direction.md多场景作品的节拍与节奏规划其中与 Design Picker 最直接相关的是 typography.md它奠定了字体选项的硬约束18 个渲染器预打包字体如 Inter、Montserrat、Oswald、League Gothic、Archivo Black、Playfair Display、EB Garamond、Space Mono、JetBrains Mono、Noto Sans JP 等可离线、确定性渲染其中 League Gothic 与 Archivo Black 仅提供 400 字重不得请求 700/900。禁用字体清单Inter、Roboto、Lato、Nunito、Poppins、Playfair Display、EB Garamond、Syne 等属于训练数据默认值会导致设计同质化Syne 被称为最过度的 AI 设计暴露特征。搭配铁律严禁两种无衬线对搭必须跨分类serif sans 或 sans mono每场景仅一款表现型字体字重对比必须极端视频需要 300 vs 900 级别的差距。三、构建 Picker选项生成规范3.1 上下文深度原则生成的所有选项必须与用户提示词深度上下文相关——每个类别不止是架构都要反映具体产品、品牌、受众与情绪基调。能出现在任何选择器里的通用选项即视为失败。3.2 Mood boards每个都是不同的品牌故事按创意空间的承载量生成48 张情绪板。每张板必须讲述关于品牌的不同故事而不是把同样元素重新洗牌。评判标准是这个产品真正有哪些不同的定位方式例如一个猫粮品牌可能是俏皮混乱、高端定位、舒适温馨、社交原生、口味展示、幽默主导、感官/开胃——每个都是一条独立叙事而不是同一布局换一种字体。3.3 Architectures每个情绪板至少一个每个情绪板至少对应一种架构architectures且彼此视觉上截然不同。架构预览中应使用{{prompt_headline}}和{{prompt_sub}}令牌嵌入真实文案。若用户提供了媒体素材应将其用作背景图——使用url(path)且不加引号原因见下文图片 URL 规则。3.4 Palettes以品牌的世界命名生成56 个调色板命名要贴合品牌语境而非通用情绪词。必须始终混合深色 浅色 淡彩三种背景。每个调色板在色板尺寸下必须视觉可区分——若两个调色板背景明度相同且强调色色相相近则删掉其中一个。自测标准用户能否在 14px 的色块上看出区别看不出就是重复。3.5 Type pairings先跑字体发现脚本生成56 组字体搭配前必须先运行typography.md 中的字体发现脚本下载 Google Fonts 元数据后用 Python 脚本过滤、随机化输出。这是硬性要求不是可选项——否则你会反复落回同一批 8 个字体Bricolage Grotesque、Instrument Serif、Fraunces、Archivo Black、DM Serif Display、Space Grotesk、Fredoka那是训练数据默认值而非情境化选择。搭配必须匹配品牌的能量与受众且跨字体分类绝不两种无衬线对搭。四、落地步骤模板复制与占位符替换mkdir -p .hyperframes然后复制模板到目标位置cp skills/hyperframes-creative/templates/design-picker.html .hyperframes/pick-design.html接下来用Python替换以下五个占位符不要用 sed 手写转义引号容易出错占位符内容__ARCHITECTURES_JSON__架构对象数组__PALETTES_JSON__调色板对象数组__TYPEPAIRS_JSON__字体搭配对象数组__MOODBOARDS_JSON__情绪板对象数组格式见下__PROMPT_JSON__提示上下文对象格式见下这五个占位符在模板中对应五个全局变量声明见 design-picker.html 第 764-768 行ARCHITECTURES、PALETTES、TYPEPAIRS、MOODBOARDS、PROMPT注入后由模板前端逻辑直接消费。五、数据格式详解5.1 Architecture 对象preview_html 与设计令牌每个架构对象必须包含preview_html字段——即预览面板中渲染的 HTML。其中使用模板在运行时替换的令牌占位符完整令牌表如下含模板源码中可见的补充令牌{{sf}}令牌含义{{bg}}/{{fg}}背景色 / 前景文字色{{ac}}强调色accent{{mt}}次级文字色muted{{hf}}/{{hw}}标题字体族 / 字重{{bf}}/{{bw}}正文字体族 / 字重{{cr}}圆角半径corner radius{{pad}}/{{gap}}内边距 / 间距{{shadow}}阴影{{g}}网格线颜色{{fg3}}/{{fg6}}/{{fg8}}/{{fg15}}前景色 3% / 6% / 8% / 15% 透明度{{ac3}}/{{ac5}}/{{ac25}}强调色 3% / 5% / 25% 透明度{{sf}}表面色模板源码中定义为前景色 6% 透明度每个令牌都必须被用到{{cr}}应用于所有卡片、按钮与容器{{shadow}}应用于抬升元素卡片、按钮、代码块{{pad}}与{{gap}}控制间距。若某个令牌未被用于preview_html该选项就看不到对应效果。密度要求每个架构预览必须包含15 个以上不同元素让用户真实感受布局包括标题、副标题、正文段落、标签/眉题overline、带数字的主统计、次要统计、引言/证言、署名、带标题正文的卡片、第二张卡片不同处理、代码/命令块、主按钮、次按钮、列表或标签、强调分隔线/规则以及一个数据元素表格行、进度条或图表。布局约束所有预览 HTML 必须使用百分比宽度或max-width: 100%所有 flex 行使用flex-wrap: wrap绝对定位的装饰元素必须位于overflow: hidden的父容器内。安全约束preview_html不得包含script标签、事件处理器onclick、onerror等或javascript:URL——因为它通过innerHTML注入。图片 URL 规则在preview_html中使用背景图时路径不带引号url(path/to/image.jpg)。单引号形式url(path.jpg)会破坏属性因为preview_html位于style...属性内部内层单引号会提前终止外层属性。调色板多样性6 个调色板必须混合浅色、深色与淡彩背景——即使是平静/养生类提示词也不例外。可选字段components组件样式规则字符串与dos注意事项字符串二者会出现在最终生成的design.md中。5.2 Architecture 完整示例{ name: Editorial Stack, description: Vertical rhythm with large type, pull quotes, and data callouts, tag: editorial / longform / narrative, mood: Confident, unhurried, typographically driven, preview_html: div stylebackground:{{bg}};color:{{fg}};padding:{{pad}};min-height:100vh;font-family:\{{bf}}\,sans-serif;font-weight:{{bw}};div stylemax-width:100%;display:flex;flex-direction:column;gap:{{gap}};div stylefont-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:{{mt}};Overline Label/divdiv stylefont-family:\{{hf}}\,serif;font-weight:{{hw}};font-size:48px;line-height:1.1;letter-spacing:-0.02em;The Headline Goes Here/divdiv stylefont-size:20px;color:{{mt}};max-width:70%;line-height:1.5;Subheading text that introduces the narrative arc of this composition with enough words to fill two lines./divdiv stylefont-size:15px;line-height:1.7;color:{{fg}};max-width:65%;Body paragraph with real sentences. The quick brown fox jumps over the lazy dog. This gives a sense of text density and reading rhythm at the chosen type size./divdiv styledisplay:flex;gap:{{gap}};flex-wrap:wrap;div stylebackground:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};div stylefont-size:36px;font-family:\{{hf}}\,serif;font-weight:{{hw}};color:{{ac}};2.4M/divdiv stylefont-size:12px;color:{{mt}};margin-top:4px;Primary Stat/div/divdiv stylebackground:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};div stylefont-size:36px;font-family:\{{hf}}\,serif;font-weight:{{hw}};color:{{fg}};87%/divdiv stylefont-size:12px;color:{{mt}};margin-top:4px;Secondary Stat/div/div/divdiv styleborder-left:3px solid {{ac}};padding:12px {{pad}};background:{{ac3}};border-radius:0 {{cr}} {{cr}} 0;div stylefont-size:18px;font-style:italic;color:{{fg}};line-height:1.5;\A pull quote that captures the key insight of the piece.\/divdiv stylefont-size:12px;color:{{mt}};margin-top:8px;— Attribution Name/div/divdiv stylebackground:{{fg3}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};div stylefont-size:14px;font-weight:{{hw}};margin-bottom:8px;Card Title/divdiv stylefont-size:13px;color:{{mt}};line-height:1.5;Card body text with a different treatment than the main content area./div/divdiv stylebackground:{{ac5}};border:1px solid {{ac25}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};div stylefont-size:14px;font-weight:{{hw}};color:{{ac}};margin-bottom:8px;Accent Card/divdiv stylefont-size:13px;color:{{fg}};line-height:1.5;Second card with a tinted accent treatment for variety./div/divdiv stylefont-family:monospace;font-size:13px;background:{{fg8}};border-radius:{{cr}};padding:{{pad}};color:{{fg15}};box-shadow:{{shadow}};$ hyperframes render --output video.mp4/divdiv styledisplay:flex;gap:12px;flex-wrap:wrap;button stylebackground:{{ac}};color:{{bg}};border:none;padding:10px 24px;border-radius:{{cr}};font-size:14px;font-weight:600;box-shadow:{{shadow}};cursor:pointer;Primary Action/buttonbutton stylebackground:transparent;color:{{fg}};border:1px solid {{fg15}};padding:10px 24px;border-radius:{{cr}};font-size:14px;cursor:pointer;Secondary/button/divdiv styledisplay:flex;gap:8px;flex-wrap:wrap;span stylebackground:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};Tag One/spanspan stylebackground:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};Tag Two/spanspan stylebackground:{{ac5}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{ac}};Accent Tag/span/divdiv styleheight:1px;background:linear-gradient(to right,{{ac25}},{{fg6}},{{ac25}});/divdiv styledisplay:flex;justify-content:space-between;font-size:12px;color:{{mt}};border-bottom:1px solid {{g}};padding:8px 0;spanData row label/spanspan stylecolor:{{fg}};font-weight:600;1,234/span/div/div/div }5.3 Mood board 数据格式每张情绪板为每个类别预选一个选项用户在 Phase 1 选择情绪板Phase 2 中以这些预选项为基础微调{ name: Terminal Precision, description: Code-forward,>{ title: AI Coding Assistant, headline: Your Code, Understood., subline: An AI coding assistant that reads your entire codebase., section_desc: Layout options for your product launch }title显示在 Phase 1 的页头模板中会拼成 Pick a direction for:headline与subline分别替换架构preview_html中的{{prompt_headline}}与{{prompt_sub}}让预览展示真实内容而非通用占位文字。5.5 preview_html 中的内容令牌除标准设计令牌{{bg}}、{{fg}}、{{ac}}等外架构preview_html还可以使用{{prompt_headline}}—— 用户实际的主标题文案{{prompt_sub}}—— 用户实际的副标题文案这使预览具备情境性——用户看到的是自己的内容被样式化而不是通用占位。六、模板运行机制从源码看两阶段交互design-picker.html 是一个约 1432 行的单文件应用通过 CDN 引入 GSAP 3.14.2用于动效缓动演示与入场动画核心逻辑如下五个全局数据数组第 764-768 行即注入的 JSONpicks对象第 769-778 行记录 8 个维度的当前选择theme、arch、palette、type、corners、density、depth、easing。Phase 1DirectionrenderMoodBoards()遍历MOODBOARDS取每张板对应的架构、字体搭配、调色板可在顶部的 palette 条覆盖调色板把preview_html中的令牌全部替换后以 0.38 缩放渲染进 500px 高的预览区选中卡片后激活Customize this direction →按钮进入 Phase 2。Phase 2Fine-tune左侧 400px 面板列出 8 个分类区块Theme、Structure、Color、Typography、Corners、Density、Depth、Motion右侧实时预览。内置选项模板第 780-808 行包括类别选项Theme主题Dark深底浅字、Light浅底深字、Palette用调色板色Corners圆角Sharp0px、Slight4px、Rounded12pxDensity密度Tightpadding 8-12px、gap 8-12px、Normal16-24px / 16-20px、Generous32-48px / 28-40pxDepth深度Flat无阴影、Subtle淡阴影、Layered辉光层次Easing缓动Confidentpower3.out、Snappyexpo.out、Gentlesine.inOut、Bouncyback.out(1.4)、Elasticelastic.out(1, 0.5)、Sharppower4.out字体搭配渲染时模板会动态收集所有搭配的 headline/body 字族并注入 Google Fonts 样式表链接al()工具函数第 822-832 行把 hex 颜色转换为带透明度的 rgba支撑{{fg3}}、{{ac25}}这类透明度令牌。右侧预览的renderPreview()第 1230-1305 行与 Phase 1 一样执行令牌替换且根据密度/深度选项动态计算padding、gap与阴影阴影颜色随主题明暗取强调色或前景色。输出生成showOutput()第 1308-1420 行在 8 个维度全部选定后将当前选择拼装成design.md文本写入弹层中的可编辑textarea用户可编辑后一键复制navigator.clipboard。七、服务与用户选择本地 HTTP 服务与交接7.1 启动服务并校验cd project-dir python3 -m http.server 8723 使用 8723 端口或任何 8000 以上的空闲端口若 curl 检查失败换下一个端口重试。启动后必须校验文件可访问curl -s -o /dev/null -w %{http_code} http://localhost:8723/.hyperframes/pick-design.html只有返回200才能把链接分享给用户。不要使用npx hyperframes preview来服务选择器——它会阻塞。并且只应在主对话线程中启动 HTTP 服务如果你是以派发任务或子 Agent 身份运行应返回文件路径由调用方负责服务。7.2 交接与收尾用户选定后告知对方Copy the design.md from the picker and paste it here.从选择器复制 design.md 并粘贴回对话。将粘贴内容原样保存为项目根目录下的design.md——它已经是规范格式YAML frontmatter 正文小节。用户粘贴完成后关闭后台服务kill %1 # 或 kill $(lsof -ti:8723)然后进入视频构建阶段。八、输出规格design.md 的结构与后续消费选择器输出的design.md兼容 google-labs-code/design.md 规范结构为YAML frontmatter Markdown 正文由showOutput()按以下模板生成frontmatter 部分--- name: PROMPT.title colors: primary: bg on-primary: fg accent: ac muted: mt typography: headline: fontFamily: headline.family fontSize: 3.5rem fontWeight: headline.weight letterSpacing: -0.03em body: fontFamily: body.family fontSize: 1rem fontWeight: body.weight lineHeight: 1.5 rounded: md: corners.value spacing: md: density padding lg: density gap ---正文包含以下小节## Overview由架构的mooddescription与调色板description拼装、## ColorsPrimary / On-Primary / Accent / Muted 四项说明、## TypographyHeadline / Body 字族与字重、## Layout架构名与 tag、密度、圆角、## Elevation深度选项、## Motion入口缓动曲线与能量描述未选缓动时省略、## Components当架构提供了components字符串时、## Dos and Donts架构提供了dos字符串时使用否则用默认注意事项。这份design.md的后续消费遵循 design-spec.md 的约定frontmatter 是规范性层颜色、字体、间距的精确值必须逐字引用不得发明或取整正文是上下文层承载意图与使用时机。当项目同时存在多个规范文件时读取优先级为frame.md → design.md → DESIGN.md而 house-style.md 中定义了无规范时的兜底规则design-adherence.md 则用于事后验证颜色、字体、圆角、间距、深度是否真正落实。九、常见失败模式与设计自检清单综合 design-picker.md 与配套规则文档生成选项时应主动规避以下失败模式通用化选项任何放到别的选择器上也能成立的选项都是失败——每个选项必须源于具体产品、品牌、受众与情绪。情绪板只是换皮同一布局换字体不算新方向每张板必须是一条不同的品牌叙事。跳过字体发现脚本不跑脚本必然回落到训练数据默认字体集直接违反 typography 的反单一文化约束。重复调色板在 14px 色块尺寸下无法区分的两个调色板应删其一。令牌未用尽{{cr}}、{{shadow}}、{{pad}}、{{gap}}等令牌若不应用该选项在预览中毫无效果。密度不足少于 15 个元素、或只有卡片网格的预览无法传达真实布局节奏容易产出空网页观感。安全性违规preview_html中出现script、事件处理器或javascript:URL会因 innerHTML 注入造成隐患。背景图引号错误url(path.jpg)的单引号会截断外层style...属性必须写成url(path.jpg)。将上述清单作为生成阶段的质检门再进入服务与交接环节即可保证 Design Picker 产出的不是随机风格而是有品牌依据、可交付、可直接进入构建流程的视觉方向。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames Design Picker 实战指南：面向 Agent 的两阶段可视化视觉方向选择器
HyperFrames Design Picker 实战指南面向 Agent 的两阶段可视化视觉方向选择器【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文讲解 HyperFrames 创意技能hyperframes-creative中的 Design Picker——一个先看情绪板mood board选整体方向、再逐类别微调的两阶段可视化选择器。文章覆盖从选项生成规范、五类 JSON 数据格式、占位符注入到本地 HTTP 服务与design.md交接的完整闭环并深入到 design-picker.html 模板源码的运行机制读者可以据此为任意品牌产出真正个性化的视觉方向并交付一份符合 design-spec 规范的design.md。一、Design Picker 是什么两阶段可视化选择器Design Picker 是 HyperFrames 创意技能中交互式视觉方向选择的落地工具核心交互模型为两阶段Phase 1Direction先展示 48 张情绪板mood board让用户一次性选定一个完整的视觉方向而不是面对一堆零散选项Phase 2Fine-tune基于所选情绪板预填的选择在结构、色彩、字体、圆角、密度、深度、动效等类别上逐项微调。它在整个技能路由中的定位可见 SKILL.md 的工作流当项目没有现成设计规范、且用户要求交互式选择时走references/design-picker.md这条路由对应Interactive selection分支。最终产出是一份design.md——即 design-spec.md 所定义、与frame.md同格式的YAML frontmatter Markdown 正文设计规范文件。二、前置条件生成选项前必读的规则文档在生成任何选项之前必须先阅读以下规则文档——它们定义了每个选项必须遵守的约束跳过它们正是产出通用化、网页感设计的最大原因SKILL.md 中明确要求组合类任务先读 house-style 与 video-composition文档作用references/typography.md字体选择与搭配铁律含 18 个预打包字体清单、禁用字体清单、字体发现脚本references/house-style.md无设计规范时的创意默认值解释提示词、生成真实内容、懒默认项清单、背景层配方references/video-composition.md视频媒介的尺度、深度与前景细节避免空荡的网页式布局references/visual-styles.md具名风格预设、mood 到风格的映射references/beat-direction.md多场景作品的节拍与节奏规划其中与 Design Picker 最直接相关的是 typography.md它奠定了字体选项的硬约束18 个渲染器预打包字体如 Inter、Montserrat、Oswald、League Gothic、Archivo Black、Playfair Display、EB Garamond、Space Mono、JetBrains Mono、Noto Sans JP 等可离线、确定性渲染其中 League Gothic 与 Archivo Black 仅提供 400 字重不得请求 700/900。禁用字体清单Inter、Roboto、Lato、Nunito、Poppins、Playfair Display、EB Garamond、Syne 等属于训练数据默认值会导致设计同质化Syne 被称为最过度的 AI 设计暴露特征。搭配铁律严禁两种无衬线对搭必须跨分类serif sans 或 sans mono每场景仅一款表现型字体字重对比必须极端视频需要 300 vs 900 级别的差距。三、构建 Picker选项生成规范3.1 上下文深度原则生成的所有选项必须与用户提示词深度上下文相关——每个类别不止是架构都要反映具体产品、品牌、受众与情绪基调。能出现在任何选择器里的通用选项即视为失败。3.2 Mood boards每个都是不同的品牌故事按创意空间的承载量生成48 张情绪板。每张板必须讲述关于品牌的不同故事而不是把同样元素重新洗牌。评判标准是这个产品真正有哪些不同的定位方式例如一个猫粮品牌可能是俏皮混乱、高端定位、舒适温馨、社交原生、口味展示、幽默主导、感官/开胃——每个都是一条独立叙事而不是同一布局换一种字体。3.3 Architectures每个情绪板至少一个每个情绪板至少对应一种架构architectures且彼此视觉上截然不同。架构预览中应使用{{prompt_headline}}和{{prompt_sub}}令牌嵌入真实文案。若用户提供了媒体素材应将其用作背景图——使用url(path)且不加引号原因见下文图片 URL 规则。3.4 Palettes以品牌的世界命名生成56 个调色板命名要贴合品牌语境而非通用情绪词。必须始终混合深色 浅色 淡彩三种背景。每个调色板在色板尺寸下必须视觉可区分——若两个调色板背景明度相同且强调色色相相近则删掉其中一个。自测标准用户能否在 14px 的色块上看出区别看不出就是重复。3.5 Type pairings先跑字体发现脚本生成56 组字体搭配前必须先运行typography.md 中的字体发现脚本下载 Google Fonts 元数据后用 Python 脚本过滤、随机化输出。这是硬性要求不是可选项——否则你会反复落回同一批 8 个字体Bricolage Grotesque、Instrument Serif、Fraunces、Archivo Black、DM Serif Display、Space Grotesk、Fredoka那是训练数据默认值而非情境化选择。搭配必须匹配品牌的能量与受众且跨字体分类绝不两种无衬线对搭。四、落地步骤模板复制与占位符替换mkdir -p .hyperframes然后复制模板到目标位置cp skills/hyperframes-creative/templates/design-picker.html .hyperframes/pick-design.html接下来用Python替换以下五个占位符不要用 sed 手写转义引号容易出错占位符内容__ARCHITECTURES_JSON__架构对象数组__PALETTES_JSON__调色板对象数组__TYPEPAIRS_JSON__字体搭配对象数组__MOODBOARDS_JSON__情绪板对象数组格式见下__PROMPT_JSON__提示上下文对象格式见下这五个占位符在模板中对应五个全局变量声明见 design-picker.html 第 764-768 行ARCHITECTURES、PALETTES、TYPEPAIRS、MOODBOARDS、PROMPT注入后由模板前端逻辑直接消费。五、数据格式详解5.1 Architecture 对象preview_html 与设计令牌每个架构对象必须包含preview_html字段——即预览面板中渲染的 HTML。其中使用模板在运行时替换的令牌占位符完整令牌表如下含模板源码中可见的补充令牌{{sf}}令牌含义{{bg}}/{{fg}}背景色 / 前景文字色{{ac}}强调色accent{{mt}}次级文字色muted{{hf}}/{{hw}}标题字体族 / 字重{{bf}}/{{bw}}正文字体族 / 字重{{cr}}圆角半径corner radius{{pad}}/{{gap}}内边距 / 间距{{shadow}}阴影{{g}}网格线颜色{{fg3}}/{{fg6}}/{{fg8}}/{{fg15}}前景色 3% / 6% / 8% / 15% 透明度{{ac3}}/{{ac5}}/{{ac25}}强调色 3% / 5% / 25% 透明度{{sf}}表面色模板源码中定义为前景色 6% 透明度每个令牌都必须被用到{{cr}}应用于所有卡片、按钮与容器{{shadow}}应用于抬升元素卡片、按钮、代码块{{pad}}与{{gap}}控制间距。若某个令牌未被用于preview_html该选项就看不到对应效果。密度要求每个架构预览必须包含15 个以上不同元素让用户真实感受布局包括标题、副标题、正文段落、标签/眉题overline、带数字的主统计、次要统计、引言/证言、署名、带标题正文的卡片、第二张卡片不同处理、代码/命令块、主按钮、次按钮、列表或标签、强调分隔线/规则以及一个数据元素表格行、进度条或图表。布局约束所有预览 HTML 必须使用百分比宽度或max-width: 100%所有 flex 行使用flex-wrap: wrap绝对定位的装饰元素必须位于overflow: hidden的父容器内。安全约束preview_html不得包含script标签、事件处理器onclick、onerror等或javascript:URL——因为它通过innerHTML注入。图片 URL 规则在preview_html中使用背景图时路径不带引号url(path/to/image.jpg)。单引号形式url(path.jpg)会破坏属性因为preview_html位于style...属性内部内层单引号会提前终止外层属性。调色板多样性6 个调色板必须混合浅色、深色与淡彩背景——即使是平静/养生类提示词也不例外。可选字段components组件样式规则字符串与dos注意事项字符串二者会出现在最终生成的design.md中。5.2 Architecture 完整示例{ name: Editorial Stack, description: Vertical rhythm with large type, pull quotes, and data callouts, tag: editorial / longform / narrative, mood: Confident, unhurried, typographically driven, preview_html: div stylebackground:{{bg}};color:{{fg}};padding:{{pad}};min-height:100vh;font-family:\{{bf}}\,sans-serif;font-weight:{{bw}};div stylemax-width:100%;display:flex;flex-direction:column;gap:{{gap}};div stylefont-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:{{mt}};Overline Label/divdiv stylefont-family:\{{hf}}\,serif;font-weight:{{hw}};font-size:48px;line-height:1.1;letter-spacing:-0.02em;The Headline Goes Here/divdiv stylefont-size:20px;color:{{mt}};max-width:70%;line-height:1.5;Subheading text that introduces the narrative arc of this composition with enough words to fill two lines./divdiv stylefont-size:15px;line-height:1.7;color:{{fg}};max-width:65%;Body paragraph with real sentences. The quick brown fox jumps over the lazy dog. This gives a sense of text density and reading rhythm at the chosen type size./divdiv styledisplay:flex;gap:{{gap}};flex-wrap:wrap;div stylebackground:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};div stylefont-size:36px;font-family:\{{hf}}\,serif;font-weight:{{hw}};color:{{ac}};2.4M/divdiv stylefont-size:12px;color:{{mt}};margin-top:4px;Primary Stat/div/divdiv stylebackground:{{fg6}};border-radius:{{cr}};padding:{{pad}};flex:1;min-width:200px;box-shadow:{{shadow}};div stylefont-size:36px;font-family:\{{hf}}\,serif;font-weight:{{hw}};color:{{fg}};87%/divdiv stylefont-size:12px;color:{{mt}};margin-top:4px;Secondary Stat/div/div/divdiv styleborder-left:3px solid {{ac}};padding:12px {{pad}};background:{{ac3}};border-radius:0 {{cr}} {{cr}} 0;div stylefont-size:18px;font-style:italic;color:{{fg}};line-height:1.5;\A pull quote that captures the key insight of the piece.\/divdiv stylefont-size:12px;color:{{mt}};margin-top:8px;— Attribution Name/div/divdiv stylebackground:{{fg3}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};div stylefont-size:14px;font-weight:{{hw}};margin-bottom:8px;Card Title/divdiv stylefont-size:13px;color:{{mt}};line-height:1.5;Card body text with a different treatment than the main content area./div/divdiv stylebackground:{{ac5}};border:1px solid {{ac25}};border-radius:{{cr}};padding:{{pad}};box-shadow:{{shadow}};div stylefont-size:14px;font-weight:{{hw}};color:{{ac}};margin-bottom:8px;Accent Card/divdiv stylefont-size:13px;color:{{fg}};line-height:1.5;Second card with a tinted accent treatment for variety./div/divdiv stylefont-family:monospace;font-size:13px;background:{{fg8}};border-radius:{{cr}};padding:{{pad}};color:{{fg15}};box-shadow:{{shadow}};$ hyperframes render --output video.mp4/divdiv styledisplay:flex;gap:12px;flex-wrap:wrap;button stylebackground:{{ac}};color:{{bg}};border:none;padding:10px 24px;border-radius:{{cr}};font-size:14px;font-weight:600;box-shadow:{{shadow}};cursor:pointer;Primary Action/buttonbutton stylebackground:transparent;color:{{fg}};border:1px solid {{fg15}};padding:10px 24px;border-radius:{{cr}};font-size:14px;cursor:pointer;Secondary/button/divdiv styledisplay:flex;gap:8px;flex-wrap:wrap;span stylebackground:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};Tag One/spanspan stylebackground:{{fg6}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{mt}};Tag Two/spanspan stylebackground:{{ac5}};border-radius:100px;padding:4px 12px;font-size:11px;color:{{ac}};Accent Tag/span/divdiv styleheight:1px;background:linear-gradient(to right,{{ac25}},{{fg6}},{{ac25}});/divdiv styledisplay:flex;justify-content:space-between;font-size:12px;color:{{mt}};border-bottom:1px solid {{g}};padding:8px 0;spanData row label/spanspan stylecolor:{{fg}};font-weight:600;1,234/span/div/div/div }5.3 Mood board 数据格式每张情绪板为每个类别预选一个选项用户在 Phase 1 选择情绪板Phase 2 中以这些预选项为基础微调{ name: Terminal Precision, description: Code-forward,>{ title: AI Coding Assistant, headline: Your Code, Understood., subline: An AI coding assistant that reads your entire codebase., section_desc: Layout options for your product launch }title显示在 Phase 1 的页头模板中会拼成 Pick a direction for:headline与subline分别替换架构preview_html中的{{prompt_headline}}与{{prompt_sub}}让预览展示真实内容而非通用占位文字。5.5 preview_html 中的内容令牌除标准设计令牌{{bg}}、{{fg}}、{{ac}}等外架构preview_html还可以使用{{prompt_headline}}—— 用户实际的主标题文案{{prompt_sub}}—— 用户实际的副标题文案这使预览具备情境性——用户看到的是自己的内容被样式化而不是通用占位。六、模板运行机制从源码看两阶段交互design-picker.html 是一个约 1432 行的单文件应用通过 CDN 引入 GSAP 3.14.2用于动效缓动演示与入场动画核心逻辑如下五个全局数据数组第 764-768 行即注入的 JSONpicks对象第 769-778 行记录 8 个维度的当前选择theme、arch、palette、type、corners、density、depth、easing。Phase 1DirectionrenderMoodBoards()遍历MOODBOARDS取每张板对应的架构、字体搭配、调色板可在顶部的 palette 条覆盖调色板把preview_html中的令牌全部替换后以 0.38 缩放渲染进 500px 高的预览区选中卡片后激活Customize this direction →按钮进入 Phase 2。Phase 2Fine-tune左侧 400px 面板列出 8 个分类区块Theme、Structure、Color、Typography、Corners、Density、Depth、Motion右侧实时预览。内置选项模板第 780-808 行包括类别选项Theme主题Dark深底浅字、Light浅底深字、Palette用调色板色Corners圆角Sharp0px、Slight4px、Rounded12pxDensity密度Tightpadding 8-12px、gap 8-12px、Normal16-24px / 16-20px、Generous32-48px / 28-40pxDepth深度Flat无阴影、Subtle淡阴影、Layered辉光层次Easing缓动Confidentpower3.out、Snappyexpo.out、Gentlesine.inOut、Bouncyback.out(1.4)、Elasticelastic.out(1, 0.5)、Sharppower4.out字体搭配渲染时模板会动态收集所有搭配的 headline/body 字族并注入 Google Fonts 样式表链接al()工具函数第 822-832 行把 hex 颜色转换为带透明度的 rgba支撑{{fg3}}、{{ac25}}这类透明度令牌。右侧预览的renderPreview()第 1230-1305 行与 Phase 1 一样执行令牌替换且根据密度/深度选项动态计算padding、gap与阴影阴影颜色随主题明暗取强调色或前景色。输出生成showOutput()第 1308-1420 行在 8 个维度全部选定后将当前选择拼装成design.md文本写入弹层中的可编辑textarea用户可编辑后一键复制navigator.clipboard。七、服务与用户选择本地 HTTP 服务与交接7.1 启动服务并校验cd project-dir python3 -m http.server 8723 使用 8723 端口或任何 8000 以上的空闲端口若 curl 检查失败换下一个端口重试。启动后必须校验文件可访问curl -s -o /dev/null -w %{http_code} http://localhost:8723/.hyperframes/pick-design.html只有返回200才能把链接分享给用户。不要使用npx hyperframes preview来服务选择器——它会阻塞。并且只应在主对话线程中启动 HTTP 服务如果你是以派发任务或子 Agent 身份运行应返回文件路径由调用方负责服务。7.2 交接与收尾用户选定后告知对方Copy the design.md from the picker and paste it here.从选择器复制 design.md 并粘贴回对话。将粘贴内容原样保存为项目根目录下的design.md——它已经是规范格式YAML frontmatter 正文小节。用户粘贴完成后关闭后台服务kill %1 # 或 kill $(lsof -ti:8723)然后进入视频构建阶段。八、输出规格design.md 的结构与后续消费选择器输出的design.md兼容 google-labs-code/design.md 规范结构为YAML frontmatter Markdown 正文由showOutput()按以下模板生成frontmatter 部分--- name: PROMPT.title colors: primary: bg on-primary: fg accent: ac muted: mt typography: headline: fontFamily: headline.family fontSize: 3.5rem fontWeight: headline.weight letterSpacing: -0.03em body: fontFamily: body.family fontSize: 1rem fontWeight: body.weight lineHeight: 1.5 rounded: md: corners.value spacing: md: density padding lg: density gap ---正文包含以下小节## Overview由架构的mooddescription与调色板description拼装、## ColorsPrimary / On-Primary / Accent / Muted 四项说明、## TypographyHeadline / Body 字族与字重、## Layout架构名与 tag、密度、圆角、## Elevation深度选项、## Motion入口缓动曲线与能量描述未选缓动时省略、## Components当架构提供了components字符串时、## Dos and Donts架构提供了dos字符串时使用否则用默认注意事项。这份design.md的后续消费遵循 design-spec.md 的约定frontmatter 是规范性层颜色、字体、间距的精确值必须逐字引用不得发明或取整正文是上下文层承载意图与使用时机。当项目同时存在多个规范文件时读取优先级为frame.md → design.md → DESIGN.md而 house-style.md 中定义了无规范时的兜底规则design-adherence.md 则用于事后验证颜色、字体、圆角、间距、深度是否真正落实。九、常见失败模式与设计自检清单综合 design-picker.md 与配套规则文档生成选项时应主动规避以下失败模式通用化选项任何放到别的选择器上也能成立的选项都是失败——每个选项必须源于具体产品、品牌、受众与情绪。情绪板只是换皮同一布局换字体不算新方向每张板必须是一条不同的品牌叙事。跳过字体发现脚本不跑脚本必然回落到训练数据默认字体集直接违反 typography 的反单一文化约束。重复调色板在 14px 色块尺寸下无法区分的两个调色板应删其一。令牌未用尽{{cr}}、{{shadow}}、{{pad}}、{{gap}}等令牌若不应用该选项在预览中毫无效果。密度不足少于 15 个元素、或只有卡片网格的预览无法传达真实布局节奏容易产出空网页观感。安全性违规preview_html中出现script、事件处理器或javascript:URL会因 innerHTML 注入造成隐患。背景图引号错误url(path.jpg)的单引号会截断外层style...属性必须写成url(path.jpg)。将上述清单作为生成阶段的质检门再进入服务与交接环节即可保证 Design Picker 产出的不是随机风格而是有品牌依据、可交付、可直接进入构建流程的视觉方向。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考