音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载Stitch Design Taste 是一套面向 Google Stitch 屏幕生成的语义化设计系统技能它把经过实战验证的反 AI 模板化前端工程准则翻译成 Stitch 原生可理解的视觉描述 精确数值语言最终产出一份可作为单一事实来源Single Source of Truth的DESIGN.md文件。本文将以该技能文档为核心完整还原其九步分析流程、四维调节旋钮、七大设计维度与完整输出模板并对照本仓库中该技能的实际产物与相关 UI 代码帮助你掌握用自然语言规则 精确色值/字号/物理参数驱动 AI 生成高端、非模板化界面的完整方法。一、技能定位把设计规范编码成 Stitch 可读的语义语言Stitch Design Taste见 .agents/skills/stitch-design-taste/SKILL.md的目标是生成专门为 Google Stitch 屏幕生成优化的DESIGN.md文件。它不会直接输出前端代码而是把一整套经受过实战检验的反 AI 劣质界面anti-slop工程准则转化为 Stitch 的原生语义设计语言即用描述性的自然语言规则配合精确到位的数值让 Stitch 的 AI Agent 能够据此产出高端、去模板化的界面。生成的DESIGN.md在整个工作流中扮演单一事实来源的角色它是提示 Stitch 生成新屏幕的唯一权威依据。Stitch 通过视觉描述Visual Descriptions来理解设计这些描述由具体的色值、排版规格和组件行为构成因此文档必须同时具备可被 AI 解释的自然语言与可被精确执行的量化参数两个层面。前置条件可访问 Google Stitch通过 labs.google/stitch 使用可选Stitch MCP Server用于与 Cursor、Antigravity 或 Gemini CLI 进行程序化集成。一份合格的 DESIGN.md 需要编码 7 大维度视觉氛围Visual atmosphere— 情绪、密度与设计哲学色彩校准Color calibration— 中性色、强调色、禁用模式全部给出十六进制色值排版架构Typographic architecture— 字体栈、字号层级与反模式组件行为Component behaviors— 按钮、卡片、输入框及各交互状态布局原则Layout principles— 栅格系统、间距哲学与响应式策略动效哲学Motion philosophy— 动画引擎规格、弹簧物理、常驻微交互反模式Anti-patterns— 明确列出被禁用的 AI 设计陈词滥调。二、四个调节旋钮动手前先定义项目的品味档位技能要求在生成规范之前先通过四个旋钮Dial为项目定调。它们共同控制输出的创造力、密度与动效强度是后续所有规则自适应的前提旋钮档位说明Creativity创造力81 极致简约、瑞士风格、安静、单色5 平衡、干净但有性格10 表现主义、编辑式、大胆字体实验、标题内嵌图片、强不对称。默认8Density密度41 画廊式空灵、大量留白5 均衡分区10 驾驶舱式密集、数据沉重。默认4Variance方差/变化度81 可预测、对称网格5 微妙错位10 艺术式混乱、没有两个分区雷同。默认8Motion Intent动效意图61 静态、不记录动画5 微妙的悬停/入场提示10 每个组件都注明电影级编排。默认6使用方式将上表数字调整为与项目气质匹配。当Creativity 处于 1–3时系统产出干净、安静、类似 Notion 的界面当Creativity 处于 7–10时预期会出现标题内嵌图片排版inline image typography、戏剧性的尺度对比和强编辑式布局。后续所有规则都会随你选定的档位自动适配。这套先定基调再生成规则的思路与本仓库中同族的 design-taste-frontend 技能 一致后者同样以DESIGN_VARIANCE: 8、MOTION_INTENSITY: 6、VISUAL_DENSITY: 4为基准三旋钮并强调从简报推断设计方向Design Read再决定旋钮值绝不静默使用基线。两者互补Stitch Design Taste 面向 Google Stitch 的屏幕生成描述文件design-taste-frontend 则面向真实前端代码落地。三、分析与合成九步流程核心方法论技能将如何把项目意图翻译成 DESIGN.md拆解为九个可执行步骤。每一步都同时包含强制性约束与可选建议下面完整展开。1. 定义氛围Define the Atmosphere先评估目标项目的意图用品味光谱taste spectrum中的形容词定位密度DensityArt Gallery Airy 画廊式空灵1–3→ Daily App Balanced 日常应用均衡4–7→ Cockpit Dense 驾驶舱密集8–10变化度VariancePredictable Symmetric 可预测对称1–3→ Offset Asymmetric 错位不对称4–7→ Artsy Chaotic 艺术式混乱8–10动效MotionStatic Restrained 静态克制1–3→ Fluid CSS 流畅 CSS4–7→ Cinematic Choreography 电影级编排8–10。默认基线为Variance 8、Motion 6、Density 4再根据用户描述的气质动态调整。2. 映射色彩面板Map the Color Palette每个颜色必须提供三项信息描述性名称 十六进制色值 功能角色Functional Role。例如Canvas White #F9FAFB — 主背景表面而不是笼统的浅色背景。强制性约束强调色accent最多 1 个饱和度低于 80%严格禁止AI 紫/蓝霓虹美学— 不得出现紫色按钮辉光、霓虹渐变使用绝对中性基底Zinc/Slate搭配高对比度的单一强调色整个输出只使用一套面板不允许冷暖灰波动混用永远不要使用纯黑#000000— 使用 Off-Black、Zinc-950 或 Charcoal炭黑。3. 建立排版规则Establish Typography Rules展示/标题Display/Headlines字距收紧track-tight、受控的尺度缩放、不喊叫。层级靠字重与颜色建立而非单纯靠巨大字号正文Body宽松行高relaxed leading每行最多 65 字符字体选择在高端/创意场景下Inter被禁止。强制使用有独特气质的字体Geist、Outfit、Cabinet Grotesk或Satoshi衬线禁令通用衬线字体Times New Roman、Georgia、Garamond、Palatino一律禁止。确需衬线编辑/创意场景时只用有辨识度的现代衬线Fraunces、Gambarino、Editorial New或Instrument Serif。仪表盘或软件 UI 中衬线字体永远禁止仪表盘约束只用无衬线配对GeistGeist Mono或SatoshiJetBrains Mono高密度覆盖当密度超过 7 时所有数字必须使用等宽字体Monospace。4. 定义 Hero 区块Define the Hero SectionHero 是第一印象必须富有创意、醒目、绝不平庸行内图片排版Inline Image Typography将小巧、贴合上下文的小图直接嵌入标题的文字之间或字母之间图片以行高type-height为基准、带圆角作为视觉标点。这是本技能标志性的创意手法禁止重叠文字绝不能与图片或其他文字重叠每个元素都必须占据自己干净的空间区域禁止填充文案Scroll to explore向下滚动探索、Swipe down下滑、滚动箭头图标、弹跳 chevron 一律禁止。内容应自然吸引用户不对称结构当 Variance 超过 4 时居中的 Hero 布局被禁止CTA 克制最多一个主 CTA不得出现次要的了解更多Learn more链接。5. 描述组件风格Describe Component Stylings对每种组件都要描述形状、颜色、阴影深度与交互行为按钮Buttonsactive 状态有触觉按压反馈无霓虹外发光无自定义鼠标光标卡片Cards仅在高度差传达层级时才使用阴影向背景色相靠拢tint shadows to background hue高密度布局中用 border-top 分隔线或负空间替代卡片输入框/表单Inputs/Forms标签在输入框上方帮助文本可选错误文本在下方使用标准间距加载态Loading States使用与布局尺寸匹配的骨架屏skeletal loaders禁止通用圆形 spinner空状态Empty States提供指示如何填充数据的构成式组合composed compositions错误状态Error States清晰、行内的错误提示。6. 定义布局原则Define Layout Principles元素不得重叠 — 每个元素都有自己的清晰空间区域禁止绝对定位堆叠内容当 Variance 超过 4 时禁止居中 Hero — 强制使用分屏Split Screen、左对齐或不对称留白禁止三张等宽卡片横排的功能区— 改用两列之字形2-column Zig-Zag、不对称网格或横向滚动CSS Grid 优先于 Flexbox 数学— 禁止calc()百分比 hack用 max-width 约束布局如 1400px 居中全高区块必须使用min-h-[100dvh]绝不用h-screeniOS Safari 地址栏会导致灾难性跳动。7. 定义响应式规则Define Responsive Rules每个设计都必须在所有视口下可用移动优先折叠 768px所有多列布局一律折叠为单列无例外禁止横向滚动移动端横向溢出是严重失败排版缩放标题用clamp()缩放正文最小1rem/14px触控目标所有可交互元素最小44px点击目标图片行为移动端行内排版图片标题中的照片折叠到标题下方不再行内导航桌面横向导航折叠为干净的移动端菜单间距垂直区块间距按比例缩小clamp(3rem, 8vw, 6rem)。8. 编码动效哲学Encode Motion Philosophy弹簧物理默认值stiffness: 100, damping: 20— 高端、有重量感禁止线性缓动常驻微交互Perpetual Micro-Interactions每个活跃组件都应有无限循环状态Pulse 脉冲、Typewriter 打字机、Float 浮动、Shimmer 微光错峰编排Staggered Orchestration列表绝不瞬时挂载用级联延迟cascade delays实现瀑布式揭示性能动画只通过transform和opacity实现绝不动画化top、left、width、height。颗粒/噪点滤镜只用在固定的伪元素fixed pseudo-elements上。9. 列出反模式AI Tells这些条目必须以显式的NEVER DO 绝不允许规则写进 DESIGN.md任何地方都不使用 emoji不使用Inter字体不使用通用衬线字体Times New Roman、Georgia、Garamond— 仅在需要时使用有辨识度的现代衬线不使用纯黑#000000不使用霓虹/外发光阴影不使用过饱和的强调色不在大标题上使用过度渐变文字不使用自定义鼠标光标元素不重叠 — 始终干净的空间分隔不出现三列等宽卡片布局不使用通用名称John Doe、Acme、Nexus不使用虚假整数99.99%、50%不使用 AI 文案陈词滥调Elevate、Seamless、Unleash、Next-Gen不出现填充性 UI 文案Scroll to explore、Swipe down、滚动箭头、弹跳 chevron不出现失效的 Unsplash 链接 — 用picsum.photos或 SVG 头像高方差项目中不出现居中 Hero。四、DESIGN.md 输出格式模板技能规定生成的DESIGN.md必须遵循如下七节结构。以下为完整模板可直接套用# Design System: [项目标题] ## 1. Visual Theme Atmosphere视觉主题与氛围 对情绪、密度、方差与动效强度的描述性文字。 示例A restrained, gallery-airy interface with confident asymmetric layouts and fluid spring-physics motion. The atmosphere is clinical yet warm — like a well-lit architecture studio. 克制、画廊式空灵、自信的不对称布局、 流畅弹簧物理动效临床却又温暖如同采光良好的建筑工作室。 ## 2. Color Palette Roles色彩面板与角色 - **Canvas White**#F9FAFB— 主背景表面 - **Pure Surface**#FFFFFF— 卡片与容器填充 - **Charcoal Ink**#18181B— 主文字Zinc-950 深度 - **Muted Steel**#71717A— 次级文字、描述、元数据 - **Whisper Border**rgba(226,232,240,0.5)— 卡片边框1px 结构线 - **[强调色名称]**#XXXXXX— 用于 CTA、激活态、焦点环的唯一强调色 强调色最多 1 个。饱和度 80%。禁止紫色/霓虹。 ## 3. Typography Rules排版规则 - **Display:** [字体名] — 字距收紧、受控缩放、字重驱动层级 - **Body:** [字体名] — 宽松行高、65ch 最大宽度、中性次级色 - **Mono:** [字体名] — 代码、元数据、时间戳、高密度数字 - **Banned:** Inter、高端场景下的通用系统字体。仪表盘禁止衬线字体。 ## 4. Component Stylings组件风格 * **Buttons:** 扁平、无外发光。active 时 -1px 位移的触觉反馈。主按钮强调色填充次按钮 ghost/outline。 * **Cards:** 大圆角2.5rem。漫射轻阴影。仅当高度差传达层级时使用。高密度用 border-top 分隔线替代。 * **Inputs:** 标签在上错误在下。焦点环用强调色。无浮动标签。 * **Loaders:** 与精确布局尺寸匹配的骨架微光。无圆形 spinner。 * **Empty States:** 构成式插画组合而不是仅显示No data文字。 ## 5. Layout Principles布局原则 Grid-first 响应式架构。Hero 用不对称分割。 768px 以下严格单列折叠。max-width 约束。 无 flexbox 百分比数学。慷慨的内边距。 ## 6. Motion Interaction动效与交互 所有交互元素使用弹簧物理。错峰级联揭示。 活跃仪表盘组件上的常驻微循环。仅硬件加速的 transforms。 CPU 密集动画隔离在 Client Components 中。 ## 7. Anti-Patterns (Banned)反模式/禁用清单 明确的禁用模式列表无 emoji、无 Inter、无纯黑、 无霓虹辉光、无三列等宽网格、无 AI 文案陈词滥调、 无通用占位名称、无失效图片链接。五、实战产物对照仓库内该技能生成的 DESIGN.md 实例本仓库中已有一份由该技能产出的完整样例.agents/skills/stitch-design-taste/DESIGN.md。它示范了模板如何在真实项目中落地值得逐节对照学习配置表先行文件开头即给出 Creativity8、Density4、Variance8、Motion Intent6的旋钮表并附如何使用的说明Creativity 1–3 产出 Notion 式安静界面7–10 预期行内图片排版与强编辑式布局完整色彩角色清单如 Canvas White#F9FAFB主背景暖中性而非临床蓝白、Charcoal Ink#18181B主文字Zinc-950 深度、Steel Secondary#71717A正文、Whisper Borderrgba(226,232,240,0.5)半透明结构线、Diffused Shadowrgba(0,0,0,0.05)40px 模糊、-15px 偏移的宽幅漫射阴影强调色提供四个候选每项目只选一个Emerald Signal#10B981增长/成功类面板、Electric Blue#3B82F6效率工具/SaaS/开发者工具、Deep Rose#E11D48创意/编辑/时尚类、Amber Warmth#F59E0B社区/社交/暖色产品并列出禁用色AI 紫渐变、纯黑、超 80% 饱和、冷暖灰混用排版数值落地Display 用Geist/Satoshi/Cabinet Grotesk/Outfit字距-0.025em、行高1.1、字重 700–900Body 同族 400 字重、行高1.65、65chMono 用Geist Mono/JetBrains Mono字号缩放clamp(2.25rem, 5vw, 3.75rem)正文1rem/1.125rem元数据0.8125rem组件与 Hero 细则按钮 active 态-1px translateY或scale(0.98)卡片圆角2.5rem、阴影0 20px 40px -15px rgba(0,0,0,0.05)、内边距2rem–2.5remHero 采用分屏/左对齐/不对称留白禁居中限一个主 CTA运动规则锁定transform/opacity级联延迟animation-delay: calc(var(--index) * 100ms)。这份样例本身就是用语义化自然语言 精确数值驱动 AI的最佳教学素材每个规则都可直接复制进 Stitch 的提示中复用。六、最佳实践、成功要点与常见陷阱最佳实践Best PracticesBe Descriptive描述性写 Deep Charcoal Ink#18181B而不是 dark textBe Functional功能性说明每个元素被用于什么Be Consistent一致性全文使用同一套术语Be Precise精确性在括号中给出精确的十六进制色值、rem 值与像素值Be Opinionated有主张这不是中性模板它强制执行一种特定的高端美学。成功要点Tips for Success从氛围开始 — 在细化 token 前先理解 vibe寻找模式 — 识别一致的间距、尺寸与样式语义化命名 — 按用途而非外观命名颜色考虑层级 — 记录视觉重量如何传达重要性编码禁令 — 反模式与规则本身同等重要。常见陷阱Common Pitfalls to Avoid使用未翻译的技术行话写 generously rounded corners 而非 rounded-xl省略色值或只写描述性名称忘记设计元素的功能角色氛围描述过于含糊忽视反模式清单 — 它们正是产出高端质感的关键默认落入通用安全设计而不强制执行精心策划的美学。七、技能族谱与仓库真实 UI 代码的印证Stitch Design Taste 并非孤例。仓库中还存在一整套同源的反 AI 模板化设计技能可以互为参照、加深理解design-taste-frontend 技能面向落地页/作品集/改版的前端技能主张先做 Design Read 再设旋钮并给出 GSAP 粘性堆叠Sticky-Stack、横向平移Horizontal-Pan的完整规范骨架、Spring Physicstype: spring, stiffness: 100, damping: 20与prefers-reduced-motion强制要求gpt-taste 技能强调 Awwwards 级设计工程用确定性伪随机打破布局循环、AIDA 页面结构、无空隙 Bento 网格、GSAP ScrollTrigger 固定与擦除动画同样禁用Inter与 emoji。更有价值的是本仓库的真实 UI 代码已经实际遵循了这套规则的若干关键条目。查看 apps/ui/src/globals.css 可以看到根元素使用height: 100dvh第 8–12 行正是技能中全高区块必须用min-h-[100dvh]/100dvh绝不用h-screen的工程落地全量采用语义化 CSS 变量 token--canvas、--surface、--surface-raised、--accent、--brand等第 30–60 行与技能中为颜色提供描述性名称 精确值 功能角色的原则一一对应通过custom-variant dark (:is(.dark *))第 4 行实现主题切换对应技能族谱中设计并测试双主题的规范。也就是说这套技能并非纸面理论 — 仓库既用它生成了规范文档DESIGN.md又在真实前端代码apps/ui/src/globals.css中实践了其核心工程约束。阅读本技能后你既能直接复用其生成流程与模板产出自己的DESIGN.md也能回到仓库的真实代码中看到这些规则的具体样貌。赞分享音视频桌面应用后端【免费下载链接】mediago跨平台视频提取工具支持流媒体下载、视频下载、m3u8 下载及 B站视频下载提供 Windows 和 Mac 桌面客户端。Cross-platform video extraction tool: Supports streaming download, video download, m3u8 download, and Bilibili video download, with desktop clients for Windows and Mac.项目地址https://gitcode.com/caorushizi/mediago点击查看免费下载相关推荐Open Design Modern 设计系统实战指南从 DESIGN.md 到语义 Token 的落地实现Open Design Modern 设计系统实战指南从 DESIGN.md 到语义 Token 的落地实现 导读 本文以 Open Design 仓库中 dAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中 Expo 设计系统包的使用指南从 DESIGN.md 到 tokens.css 的完整落地实践OpenDesign 中 Expo 设计系统包的使用指南从 DESIGN.md 到 tokens.css 的完整落地实践 在 OpenDesign 的 desAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统实战基于 Duolingo 设计语言DESIGN-ar.md构建游戏化界面的完整指南OpenDesign 设计系统实战基于 Duolingo 设计语言DESIGN ar.md构建游戏化界面的完整指南 本文以仓库内阿拉伯语版设计系统文档 dAI 应用人工智能AI 技能设计系统媒体生成上一篇RT-Thread Raspberry Pi 3-64 BSP 移植指南环境搭建、镜像烧写与驱动支持详解下一篇如何在Windows上一键安装苹果设备驱动解决USB网络共享难题的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
