设计系统品味标准技能stitch-design-taste配置 — 设置你的风格使用此设计系统前先调整这些旋钮。它们控制输出的创意性、密度和动效程度。选择适合你项目的级别。旋钮级别描述创意性81 极简、瑞士风、安静、单色。5 平衡、干净但有性格。10 表现力、编辑风格、大胆的排版实验、标题中内联图片、强烈的非对称。默认8密度41 画廊般通透、大量留白。5 平衡的章节。10 驾驶舱般密集、数据密集。默认4变化度81 可预测、对称网格。5 微妙的偏移。10 艺术性混乱、没有两个章节相似。默认8动效意图61 静态、无动效说明。5 微妙的悬停/入场提示。10 每个组件都注明电影式编排。默认6使用方法更改上面的数字以匹配你项目的氛围。在创意性 1–3时系统产生干净、安静、Notion 式界面。在创意性 7–10时期待内联图像排版、戏剧性的尺度对比和强烈的编辑式布局。下面的其余规则会适应你选择的级别。1. 视觉主题与氛围一个克制、画廊般通透的界面搭配自信的非对称布局和流畅的弹簧物理动效。氛围是冷静而又温暖的——像一个光线充足的建筑工作室每个元素都通过其功能赢得自己的位置。密度平衡级别 4变化度高级别 8以防止对称的乏味动效流畅但从不戏剧化级别 6。整体印象昂贵、有意、有生命力。2. 调色板与角色画布白#F9FAFB— 主要背景表面。暖中性色绝不是临床感的蓝白纯表面#FFFFFF— 卡片和容器填充。与耳语阴影一起用于提升层次炭黑墨水#18181B— 主要文本。Zinc-950 深度——绝不是纯黑钢灰次要#71717A— 正文、描述、元数据。Zinc-500 暖度哑光蓝灰#94A3B8— 三级文本、时间戳、禁用状态耳语边框rgba(226,232,240,0.5)— 卡片边框、结构性 1px 线条。半透明以营造深度扩散阴影rgba(0,0,0,0.05)— 卡片提升。大范围扩散、40px 模糊、-15px 偏移。绝不生硬强调色选择每个项目选一个翡翠信号#10B981— 用于增长、成功、正向数据仪表盘电光蓝#3B82F6— 用于生产力、SaaS、开发者工具深玫瑰#E11D48— 用于创意、编辑、时尚相关项目琥珀暖#F59E0B— 用于社区、社交、暖色调产品禁用颜色紫/紫罗兰霓虹渐变 — AI 紫美学纯黑#000000— 始终使用 Off-Black 或 Zinc-950超过 80% 饱和度的过度饱和强调色单个项目中混用暖/冷灰体系3. 排版规则展示字体Geist、Satoshi、Cabinet Grotesk或Outfit— 紧凑字距-0.025em、受控的流式字号、由字重驱动的层级700–900。不张扬。紧凑行高1.1。强制替代方案 — 在高级语境中Inter被禁止正文同一字体的字重 400 — 宽松行高1.65、最大 65ch 宽度、钢灰次要色#71717A等宽Geist Mono或JetBrains Mono— 用于代码块、元数据、时间戳。当密度超过级别 7 时所有数字切换为等宽字号展示字体clamp(2.25rem, 5vw, 3.75rem)。正文1rem/1.125rem。等宽元数据0.8125rem禁用字体Inter— 在高级/创意语境中任何地方都被禁止通用衬线字体Times New Roman、Georgia、Garamond、Palatino— 被禁止。如果编辑/创意内容需要衬线只使用独特的现代衬线如Fraunces、Gambarino、Editorial New或Instrument Serif。绝不使用默认浏览器衬线字体栈。在仪表盘或软件 UI 中衬线始终被禁止4. 组件样式按钮扁平表面无外发光。主要强调色填充 白色文本。次要幽灵/描边。活动状态-1px translateY或scale(0.98)以获得触觉按压感。悬停微妙的背景变化绝不发光卡片/容器大方圆角2.5rem。纯白填充。耳语边框1px半透明。扩散阴影0 20px 40px -15px rgba(0,0,0,0.05)。内边距2rem–2.5rem。仅在提升层次传达层级时使用 — 高密度布局用border-top分隔线或负空间替代卡片输入/表单标签在输入框上方。帮助文本可选。错误文本在下方用深玫瑰色。聚焦环用强调色2px偏移。无浮动标签。标签-输入-错误堆栈之间标准0.5rem间距导航流畅、吸顶。图标悬停时缩放可选 Dock 放大效果。桌面端无汉堡菜单。干净的水平布局间距宽松加载器与确切布局尺寸和圆角匹配的骨架闪烁。跨占位形状移动的光反射。绝不使用圆形旋转器空状态组合插图或图标构成 指导文本。绝不只显示无数据错误状态内联、上下文化。红色强调下划线或边框。清晰的恢复操作5. 英雄区英雄区是第一印象——它必须引人注目、有创意绝不千篇一律。内联图像排版直接在标题的词或字母之间嵌入小而上下文化的照片或视觉元素。示例“We build [打字的双手照片] digital [屏幕照片] products” — 图像以行高内联放置、圆角充当词与词之间的视觉标点。这是标志性的创意技法无重叠元素文本绝不能与图像或其他文本重叠。每个元素都有自己清晰的空间区域。无内容层 z-index 堆叠、无绝对定位的标题压在图像上。始终干净分离无填充文本“Scroll to explore”、“Swipe down”、滚动箭头图标、弹跳 chevron 以及任何指令性 UI 装饰都被禁止。用户知道如何滚动。让内容自然吸引他们非对称结构在此变化度级别下居中英雄区布局被禁止。使用分屏50/50、左对齐文本/右侧视觉或带大空白区域的非对称留白CTA 克制最多一个主要 CTA 按钮。无次要Learn more链接。标题下方无冗余的微型文案6. 布局原则网格优先所有结构布局使用 CSS Grid。绝不使用 flexbox 百分比计算calc(33% - 1rem)被禁止无重叠元素绝不能相互重叠。无绝对定位层在内容上堆叠内容。每个元素占据自己的网格单元或流式位置。干净、分离的空间区域功能章节一行三个等宽卡片模式被禁止。使用两列之字形、非对称 Bento 网格2fr 1fr 1fr或水平滚动画廊包含所有内容在max-width: 1400px内居中。宽松的水平内边距移动端1rem、平板2rem、桌面4rem全高使用min-height: 100dvh— 绝不使用height: 100vhiOS Safari 地址栏跳动Bento 架构对于功能网格使用第 1 行3 列 | 第 2 行2 列70/30 拆分。每个瓦片包含持续的微动效7. 响应式规则每个屏幕必须在所有视口中完美工作。响应式不是可选的——它是硬性要求。每个元素必须在 375px、768px 和 1440px 下测试。移动优先折叠 768px所有多列布局折叠为严格的单列。width: 100%、padding: 1rem、gap: 1.5rem。无例外无水平滚动移动端的水平溢出是严重失败。所有元素必须适应视口宽度。如果任何元素引起水平滚动设计就是坏的排版缩放标题通过clamp()优雅缩放。正文保持最少1rem。正文绝不缩小到14px以下。标题在 375px 屏幕上必须保持可读触控目标所有交互元素最少44px点按目标。可点击项目之间宽松间距。移动端按钮必须全宽图像行为英雄区和内联图像按比例缩放。内联排版图像词间照片在移动端堆叠在标题下方而不是内联导航桌面水平导航折叠为干净的移动菜单滑入或全屏覆盖。无带标签的微型汉堡图标卡片与网格Bento 网格和非对称布局还原为全宽堆叠单列卡片。保持内边距1rem间距一致性垂直章节间距在移动端按比例缩小clamp(3rem, 8vw, 6rem)。绝不拥挤绝不过度通透测试视口设计必须在以下尺寸验证375pxiPhone SE、390pxiPhone 14、768pxiPad、1024px小型笔记本、1440px桌面8. 动效与交互编码阶段意图注意Stitch 生成静态屏幕——它不动画。本节记录预期的动效行为以便编码代理Antigravity、Cursor 等在将导出的设计构建成真实产品时确切知道如何实现动画。物理引擎仅弹簧。stiffness: 100, damping: 20。任何地方都不用线性缓动。所有交互元素上的高级、有重量感持续微循环每个活动仪表盘组件都有一个无限循环状态 — 状态点上的 Pulse、搜索栏上的 Typewriter、功能图标上的 Float、加载状态上的 Shimmer交错编排列表和网格以级联延迟挂载animation-delay: calc(var(--index) * 100ms)。瀑布式显现绝不瞬间挂载布局过渡通过共享元素 ID 平滑重排。项目用物理交换位置模拟实时智能硬件规则仅动画transform和opacity。绝不动画top、left、width、height。颗粒/噪点滤镜仅在固定的、pointer-events-none 的伪元素上性能高 CPU 消耗的持续动画隔离在微小的叶级组件中。绝不触发父级重渲染。目标最低 60fps9. 反模式禁止无 emoji — 在 UI、代码或 alt 文本中任何地方无Inter字体 — 使用Geist、Outfit、Cabinet Grotesk、Satoshi无通用衬线字体Times New Roman、Georgia、Garamond— 如果需要衬线只使用独特的现代衬线Fraunces、Instrument Serif无纯黑#000000— 仅 Off-Black 或 Zinc-950无霓虹外发光或默认 box-shadow 发光无超过 80% 的过度饱和强调色无大标题上的过度渐变文本无自定义鼠标光标无重叠元素 — 文本绝不与图像或其他内容重叠。始终干净的空间分离无功能区的 3 列等宽卡片布局无居中英雄区在此变化度级别无填充 UI 文本“Scroll to explore”、“Swipe down”、“Discover more below”、滚动箭头、弹跳 chevron — 全部被禁止无通用名称“John Doe”、“Sarah Chan”、“Acme”、“Nexus”、“SmartFlow”无假整圆数字99.99%、50%、1234567— 使用有机数据47.2%、1 (312) 847-1928无 AI 文案陈词滥调“Elevate”、“Seamless”、“Unleash”、“Next-Gen”、“Revolutionize”无损坏的 Unsplash 链接 — 使用picsum.photos/seed/{id}/800/600或 SVG UI 头像无通用shadcn/ui默认值 — 自定义圆角、颜色、阴影以匹配此系统无z-index滥用 — 仅用于导航栏、模态框、覆盖层的层上下文无h-screen— 始终min-h-[100dvh]无圆形加载旋转器 — 仅骨架闪烁 
长河君 · 2026/10/16 7:08:14 · 阅读 1.2k stitch-design-taste - DESIGN
设计系统品味标准技能stitch-design-taste配置 — 设置你的风格使用此设计系统前先调整这些旋钮。它们控制输出的创意性、密度和动效程度。选择适合你项目的级别。旋钮级别描述创意性81 极简、瑞士风、安静、单色。5 平衡、干净但有性格。10 表现力、编辑风格、大胆的排版实验、标题中内联图片、强烈的非对称。默认8密度41 画廊般通透、大量留白。5 平衡的章节。10 驾驶舱般密集、数据密集。默认4变化度81 可预测、对称网格。5 微妙的偏移。10 艺术性混乱、没有两个章节相似。默认8动效意图61 静态、无动效说明。5 微妙的悬停/入场提示。10 每个组件都注明电影式编排。默认6使用方法更改上面的数字以匹配你项目的氛围。在创意性 1–3时系统产生干净、安静、Notion 式界面。在创意性 7–10时期待内联图像排版、戏剧性的尺度对比和强烈的编辑式布局。下面的其余规则会适应你选择的级别。1. 视觉主题与氛围一个克制、画廊般通透的界面搭配自信的非对称布局和流畅的弹簧物理动效。氛围是冷静而又温暖的——像一个光线充足的建筑工作室每个元素都通过其功能赢得自己的位置。密度平衡级别 4变化度高级别 8以防止对称的乏味动效流畅但从不戏剧化级别 6。整体印象昂贵、有意、有生命力。2. 调色板与角色画布白#F9FAFB— 主要背景表面。暖中性色绝不是临床感的蓝白纯表面#FFFFFF— 卡片和容器填充。与耳语阴影一起用于提升层次炭黑墨水#18181B— 主要文本。Zinc-950 深度——绝不是纯黑钢灰次要#71717A— 正文、描述、元数据。Zinc-500 暖度哑光蓝灰#94A3B8— 三级文本、时间戳、禁用状态耳语边框rgba(226,232,240,0.5)— 卡片边框、结构性 1px 线条。半透明以营造深度扩散阴影rgba(0,0,0,0.05)— 卡片提升。大范围扩散、40px 模糊、-15px 偏移。绝不生硬强调色选择每个项目选一个翡翠信号#10B981— 用于增长、成功、正向数据仪表盘电光蓝#3B82F6— 用于生产力、SaaS、开发者工具深玫瑰#E11D48— 用于创意、编辑、时尚相关项目琥珀暖#F59E0B— 用于社区、社交、暖色调产品禁用颜色紫/紫罗兰霓虹渐变 — AI 紫美学纯黑#000000— 始终使用 Off-Black 或 Zinc-950超过 80% 饱和度的过度饱和强调色单个项目中混用暖/冷灰体系3. 排版规则展示字体Geist、Satoshi、Cabinet Grotesk或Outfit— 紧凑字距-0.025em、受控的流式字号、由字重驱动的层级700–900。不张扬。紧凑行高1.1。强制替代方案 — 在高级语境中Inter被禁止正文同一字体的字重 400 — 宽松行高1.65、最大 65ch 宽度、钢灰次要色#71717A等宽Geist Mono或JetBrains Mono— 用于代码块、元数据、时间戳。当密度超过级别 7 时所有数字切换为等宽字号展示字体clamp(2.25rem, 5vw, 3.75rem)。正文1rem/1.125rem。等宽元数据0.8125rem禁用字体Inter— 在高级/创意语境中任何地方都被禁止通用衬线字体Times New Roman、Georgia、Garamond、Palatino— 被禁止。如果编辑/创意内容需要衬线只使用独特的现代衬线如Fraunces、Gambarino、Editorial New或Instrument Serif。绝不使用默认浏览器衬线字体栈。在仪表盘或软件 UI 中衬线始终被禁止4. 组件样式按钮扁平表面无外发光。主要强调色填充 白色文本。次要幽灵/描边。活动状态-1px translateY或scale(0.98)以获得触觉按压感。悬停微妙的背景变化绝不发光卡片/容器大方圆角2.5rem。纯白填充。耳语边框1px半透明。扩散阴影0 20px 40px -15px rgba(0,0,0,0.05)。内边距2rem–2.5rem。仅在提升层次传达层级时使用 — 高密度布局用border-top分隔线或负空间替代卡片输入/表单标签在输入框上方。帮助文本可选。错误文本在下方用深玫瑰色。聚焦环用强调色2px偏移。无浮动标签。标签-输入-错误堆栈之间标准0.5rem间距导航流畅、吸顶。图标悬停时缩放可选 Dock 放大效果。桌面端无汉堡菜单。干净的水平布局间距宽松加载器与确切布局尺寸和圆角匹配的骨架闪烁。跨占位形状移动的光反射。绝不使用圆形旋转器空状态组合插图或图标构成 指导文本。绝不只显示无数据错误状态内联、上下文化。红色强调下划线或边框。清晰的恢复操作5. 英雄区英雄区是第一印象——它必须引人注目、有创意绝不千篇一律。内联图像排版直接在标题的词或字母之间嵌入小而上下文化的照片或视觉元素。示例“We build [打字的双手照片] digital [屏幕照片] products” — 图像以行高内联放置、圆角充当词与词之间的视觉标点。这是标志性的创意技法无重叠元素文本绝不能与图像或其他文本重叠。每个元素都有自己清晰的空间区域。无内容层 z-index 堆叠、无绝对定位的标题压在图像上。始终干净分离无填充文本“Scroll to explore”、“Swipe down”、滚动箭头图标、弹跳 chevron 以及任何指令性 UI 装饰都被禁止。用户知道如何滚动。让内容自然吸引他们非对称结构在此变化度级别下居中英雄区布局被禁止。使用分屏50/50、左对齐文本/右侧视觉或带大空白区域的非对称留白CTA 克制最多一个主要 CTA 按钮。无次要Learn more链接。标题下方无冗余的微型文案6. 布局原则网格优先所有结构布局使用 CSS Grid。绝不使用 flexbox 百分比计算calc(33% - 1rem)被禁止无重叠元素绝不能相互重叠。无绝对定位层在内容上堆叠内容。每个元素占据自己的网格单元或流式位置。干净、分离的空间区域功能章节一行三个等宽卡片模式被禁止。使用两列之字形、非对称 Bento 网格2fr 1fr 1fr或水平滚动画廊包含所有内容在max-width: 1400px内居中。宽松的水平内边距移动端1rem、平板2rem、桌面4rem全高使用min-height: 100dvh— 绝不使用height: 100vhiOS Safari 地址栏跳动Bento 架构对于功能网格使用第 1 行3 列 | 第 2 行2 列70/30 拆分。每个瓦片包含持续的微动效7. 响应式规则每个屏幕必须在所有视口中完美工作。响应式不是可选的——它是硬性要求。每个元素必须在 375px、768px 和 1440px 下测试。移动优先折叠 768px所有多列布局折叠为严格的单列。width: 100%、padding: 1rem、gap: 1.5rem。无例外无水平滚动移动端的水平溢出是严重失败。所有元素必须适应视口宽度。如果任何元素引起水平滚动设计就是坏的排版缩放标题通过clamp()优雅缩放。正文保持最少1rem。正文绝不缩小到14px以下。标题在 375px 屏幕上必须保持可读触控目标所有交互元素最少44px点按目标。可点击项目之间宽松间距。移动端按钮必须全宽图像行为英雄区和内联图像按比例缩放。内联排版图像词间照片在移动端堆叠在标题下方而不是内联导航桌面水平导航折叠为干净的移动菜单滑入或全屏覆盖。无带标签的微型汉堡图标卡片与网格Bento 网格和非对称布局还原为全宽堆叠单列卡片。保持内边距1rem间距一致性垂直章节间距在移动端按比例缩小clamp(3rem, 8vw, 6rem)。绝不拥挤绝不过度通透测试视口设计必须在以下尺寸验证375pxiPhone SE、390pxiPhone 14、768pxiPad、1024px小型笔记本、1440px桌面8. 动效与交互编码阶段意图注意Stitch 生成静态屏幕——它不动画。本节记录预期的动效行为以便编码代理Antigravity、Cursor 等在将导出的设计构建成真实产品时确切知道如何实现动画。物理引擎仅弹簧。stiffness: 100, damping: 20。任何地方都不用线性缓动。所有交互元素上的高级、有重量感持续微循环每个活动仪表盘组件都有一个无限循环状态 — 状态点上的 Pulse、搜索栏上的 Typewriter、功能图标上的 Float、加载状态上的 Shimmer交错编排列表和网格以级联延迟挂载animation-delay: calc(var(--index) * 100ms)。瀑布式显现绝不瞬间挂载布局过渡通过共享元素 ID 平滑重排。项目用物理交换位置模拟实时智能硬件规则仅动画transform和opacity。绝不动画top、left、width、height。颗粒/噪点滤镜仅在固定的、pointer-events-none 的伪元素上性能高 CPU 消耗的持续动画隔离在微小的叶级组件中。绝不触发父级重渲染。目标最低 60fps9. 反模式禁止无 emoji — 在 UI、代码或 alt 文本中任何地方无Inter字体 — 使用Geist、Outfit、Cabinet Grotesk、Satoshi无通用衬线字体Times New Roman、Georgia、Garamond— 如果需要衬线只使用独特的现代衬线Fraunces、Instrument Serif无纯黑#000000— 仅 Off-Black 或 Zinc-950无霓虹外发光或默认 box-shadow 发光无超过 80% 的过度饱和强调色无大标题上的过度渐变文本无自定义鼠标光标无重叠元素 — 文本绝不与图像或其他内容重叠。始终干净的空间分离无功能区的 3 列等宽卡片布局无居中英雄区在此变化度级别无填充 UI 文本“Scroll to explore”、“Swipe down”、“Discover more below”、滚动箭头、弹跳 chevron — 全部被禁止无通用名称“John Doe”、“Sarah Chan”、“Acme”、“Nexus”、“SmartFlow”无假整圆数字99.99%、50%、1234567— 使用有机数据47.2%、1 (312) 847-1928无 AI 文案陈词滥调“Elevate”、“Seamless”、“Unleash”、“Next-Gen”、“Revolutionize”无损坏的 Unsplash 链接 — 使用picsum.photos/seed/{id}/800/600或 SVG UI 头像无通用shadcn/ui默认值 — 自定义圆角、颜色、阴影以匹配此系统无z-index滥用 — 仅用于导航栏、模态框、覆盖层的层上下文无h-screen— 始终min-h-[100dvh]无圆形加载旋转器 — 仅骨架闪烁