mcpField
Q
quiet-editorial-ui

quiet-editorial-ui

github.com/audrey-560设计与 UI936 次安装9 周前更新
代码仓库

关于 quiet-editorial-ui

quiet-editorial-ui 是用于 HyperFrames 合成内容的视觉设计技能，在保留项目叙事和获批素材的同时应用编辑式视觉风格。

主要功能

  1. 01按可用画面空间选择布局
  2. 02应用字体、间距、层级与动效
  3. 03提供字幕和安全区域组件
  4. 04渲染前检查字体
  5. 05通过 lint、检查和快照验证合成内容

适用场景

  1. 01为现有 HyperFrames 合成内容设计风格
  2. 02在素材和人脸周围安排图形
  3. 03添加按转录时间同步的字幕
  4. 04以手机尺寸和全分辨率检查布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/audrey-560/quiet-editorial-ui --skill quiet-editorial-ui

安装后在 Claude Code 中输入/quiet-editorial-ui确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
agents/
openai.yaml
assets/
frame.md
assets/components/
quiet-editorial-safe-zones.html
quiet-editorial-caption.html
assets/examples/
golden-frames.html
assets/fonts/
OFL-Inter.txt
references/
font-setup.md
captions.md
layout-modes.md
style-system.md
motion-language.md
safe-zones.md
scripts/
validate-package.mjs
preflight.mjs

详细介绍

Quiet Editorial UI

在确定所属 HyperFrames 工作流后，将此技能作为视觉层应用。除非用户另行要求进行编辑性更改，否则请保留项目的故事、时长、素材、音频、文案和已批准的品牌资产。

加载规范

  1. 首先阅读 /hyperframes。
  2. 编辑合成 HTML 前，阅读 /hyperframes-core。
  3. 阅读 /hyperframes-creative，了解项目设计规范的优先级。
  4. 编写动效前，阅读 /hyperframes-animation。
  5. 用户要求字幕或项目中已有字幕时，阅读 /media-use 中的字幕指南。

将此技能所在目录解析为 <skill-dir>。根据需要阅读以下参考资料：

  • 视觉令牌与组件语法：references/style-system.md
  • 布局选择与项目集成：references/layout-modes.md
  • 字幕构建：references/captions.md
  • 平台安全区域与碰撞规则：references/safe-zones.md
  • 动效词汇：references/motion-language.md
  • Georgia 授权字体设置：references/font-setup.md

应用样式

  1. 确定 HyperFrames 合成目录。阅读其中的简介、分镜或动态分镜、设计规范、转录文本、合成文件和代表性帧。

  2. 盘点人脸、徽标、源界面、承载重要信息的源文本和可用的负空间。不要根据此样式推断应采用出镜讲解者布局。

  3. 选择第一个符合条件的模式：

    • available-area：有稳定的未使用区域可容纳完整的图形构想。
    • direct-overlay：画面以素材为主，图形必须叠加其上。
    • full-frame：没有素材，或某个节拍有意让图形占据整个画面。

  4. 将现有且冲突的 frame.md 保留为 frame.pre-quiet-editorial-ui.md，除非该备份文件已存在。然后将 assets/frame.md 复制到项目中，作为生效的 frame.md，并且只将已批准的徽标、文案规则和语义品牌颜色合并到其 Approved Entities 部分。Quiet Editorial UI 负责字体、表面、间距、层级、字幕和动效。

  5. 将 assets/fonts/ 中附带的 Inter 字体文件复制到合成目录的 public/fonts/。不要复制或分发 Georgia。按 references/font-setup.md 中的说明要求用户提供文件。

  6. 在任何会影响渲染的命令前运行字体预检：

    node <skill-dir>/scripts/preflight.mjs <composition-dir>

    如果预检报告 Georgia 文件缺失或无效，请停止。不要悄悄换用其他衬线字体。

  7. 使用所选布局模式构建视觉呈现。每个节拍只保留一个主导构想，严格使用令牌值，并确保源内容清晰可辨。

  8. 如需字幕，将 assets/components/quiet-editorial-caption.html 复制到项目中，并遵循 references/captions.md。如果字幕位置不确定，可暂时将 assets/components/quiet-editorial-safe-zones.html 添加为顶层轨道子合成；交付前移除或隐藏它。

  9. 使用 npx hyperframes lint、npx hyperframes check 和代表性节拍的快照进行验证。既要检查完整分辨率，也要检查手机屏幕尺寸下的效果。

限制

  • 不要选择或替换所属的叙事工作流。
  • 不要仅为适配样式而更改剪辑、时长、音频、旁白、主张或文案。
  • 不要假设存在素材、出镜者、固定的出镜者尺寸或固定的分屏布局。
  • 不要引入任何参考来源中的特定产品名称、徽标、切换开关、提示词、界面仿制图、示例文件或品牌图标。
  • 不要将成功绿色用作通用品牌强调色。
  • 不要为了避免碰撞而将字幕缩小到文档规定的下限以下；请改用其他安全区域。
  • 授权的 Georgia 不可用时，不要使用备用显示字体渲染。

捆绑资源

  • assets/frame.md：项目的有效设计规范。
  • assets/components/quiet-editorial-caption.html：与转录内容同步的字幕子构图。
  • assets/components/quiet-editorial-safe-zones.html：可移除的安全区域叠加层。
  • assets/examples/golden-frames.html：涵盖三种宽高比的中性视觉基准。
  • assets/fonts/Inter-400-latin.woff2 和 Inter-700-latin.woff2：可再分发的 UI 字体。

更改技能后运行软件包验证：

node <skill-dir>/scripts/validate-package.mjs <skill-dir>

评论

支持 Markdown