my-test-skill

运用技能提升 OneDay 应用的视觉设计

视觉设计优化

核心行为

当用户请求任何视觉输出 (例如演示文稿、仪表盘、HTML 页面、报告、电子表格、PDF、数据可视化) 时，自动激活设计优化模式：

1. 首先构建功能基础 - 创建一个包含所有要求功能的可用版本。
2. 应用设计质询 - 使用“设计质询清单”系统性地审视每一个视觉决策。
3. 通过技术目录进行提升 - 应用“技术目录”中的特定专业技术。
4. 参考设计典范 - 从“参考库”中汲取灵感。
5. 遵循设计提升流程 - 使用系统化的优化流程。
6. 以设计哲学进行权衡 - 在“设计哲学”的指引下进行克制。

至关重要：用户只会看到最终打磨好的成品。设计思考过程在内部完成，除非用户明确询问该过程。

触发模式

针对包含以下内容的请求激活：

• “创建/制作/构建一个 [演示文稿/仪表盘/报告/页面/网站]”
• “设计一个 [落地页/界面/可视化图表]”
• “以 [视觉形式] 向我展示 [数据/指标/结果]”
• 任何对 HTML 产物、带 UI 的 React 组件或视觉文档的请求。

设计质询清单

在交付任何视觉产出前，请自问：

字体设计

• 字体层级是否清晰且经过精心设计？ (最多 3-4 个层级)
• 字号的递进是否有意义？ (不是 14px 与 15px 的微小差别，而是像 12/16/24/36 这样有节奏的缩放)
• 行高是否与字体和行长相匹配？ (正文为 1.4-1.6 倍，标题则更紧凑)
• 字间距是增强了还是损害了可读性？ (标题的字间距略微宽松，正文使用默认值)
• 使用不同的字重是否能比单独使用字号创建更好的层级？
• 所选字体是否符合内容的调性？

色彩

• 色板是否服务于内容的目的？ (蓝色代表信任，红色代表紧急，绿色代表增长)
• 是否精确使用了 2-4 种主色加上中性色？ (而不是 7 种随机颜色)
• 对比度是否足以满足无障碍访问要求？ (文本对比度至少 4.5:1)
• 颜色的使用是系统性的还是随意的？
• 降低饱和度能否提升精致感？
• 颜色是用于构建视觉层级还是仅仅为了装饰？

布局与间距

• 留白的使用是否是刻意为之？ (而不是为了“填满页面”)
• 间距值是否遵循一定的比例？ (例如 8/16/24/32/48/64，而不是 15/22/37 这样的随意数值)
• 网格系统是否创造了节奏感？ (而不是随机定位)
• 相关元素之间的间距是否小于不相关元素？
• 是否有清晰的视觉入口和阅读路径？
• 不对称布局是否比居中布局更能引起兴趣？

视觉层级

• 能否在 1 秒内识别出最重要的元素？
• 是否恰好有 3 个视觉重要性层级？ (而不是所有元素都在“大声尖叫”)
• 是通过尺寸/字重/颜色来创建层级，而不仅仅是位置吗？
• 次要元素是否被适当地弱化了？
• 移除某个元素能否提高清晰度？

数据可视化

• 图表类型是否最适合所要讲述的数据故事？ (而不是对所有数据都使用默认的条形图)
• 坐标轴和标签是否清晰易读，毫不费力？
• 颜色是否用于编码信息，而不仅仅是装饰？
• 网格线是否足够微妙，能够融入背景？
• 展示更少的数据是否能讲述一个更清晰的故事？
• 比较是否在视觉上足够直观？

润色与工艺

• 边框/分隔线是必要的，还是仅仅是视觉噪音？
• 微妙的阴影或高差能否改善深度感知？
• 交互状态 (悬停、激活、禁用) 是否被清晰定义？
• 是否有一套一致的圆角系统？ (例如 0, 4, 8, 16)
• 图标的风格和视觉重量是否一致？
• 动画是增进了理解，还是仅仅增加了动态效果？

技术目录

字体设计技术

富有表现力的尺寸跳跃

• 通过大胆的尺寸对比创造戏剧性 (例如 72pt 的标题和 16pt 的正文)。
• 应用于：首屏区域、强调内容、杂志式布局。
• 参考：Apple 产品页面、Bloomberg 字体设计。

紧凑行距以增强冲击力

• 减小大标题的行高 (0.9-1.1 倍)。
• 应用于：有力的声明、海报风格的处理。
• 参考：瑞士平面设计、马西莫·维涅里 (Massimo Vignelli)。

宽松字距以营造奢华感

• 增加大写字母的字间距 (0.05-0.1em)。
• 应用于：高端品牌、章节标题、标签。
• 参考：Dior、Net-a-Porter、高级时装。

字体色彩

• 使用字重变化而非颜色来构建层级。
• 应用于：文本密集的界面、阅读体验。
• 参考：Medium、Substack、iA Writer。

色彩技术

单色深度

• 使用单一色相的 6-8 种不同明暗度来构建整个色板。
• 应用于：精致的仪表盘、极简界面。
• 参考：Stripe 仪表盘、Linear 应用。

强调色 + 中性色

• 90% 的灰度色，仅搭配一种鲜艳的强调色。
• 应用于：吸引注意力、简洁的企业风格。
• 参考：Tesla 网站、Notion。

双色调摄影

• 将照片映射到两种颜色 (阴影 + 高光)。
• 应用于：首屏区域、保持视觉一致性。
• 参考：Spotify、现代杂志设计。

深色模式的精致感

• 使用纯黑背景搭配有层次感的界面元素 (而不是 #222 这样的深灰色)。
• 应用于：营造高级感、现代应用程序。
• 参考：Figma、GitHub 深色模式。

布局技术

破格布局

• 建立网格，然后为了强调而刻意打破它。
• 应用于：作品集、杂志式布局、动态布局。
• 参考：Awwwards 获奖作品、Pentagram 项目。

不对称平衡

• 元素权重不均等，但保持视觉上的平衡感。
• 应用于：落地页、叙事性布局。
• 参考：Apple 活动页面、Airbnb Experiences。

充足的留白

• 使用 60-80% 的留白，而不是 20-30%。
• 应用于：奢侈品牌、强调焦点、创造呼吸感。
• 参考：Muji、COS、极简主义电商。

重叠图层

• 通过在不同 Z 轴上重叠元素来创造深度。
• 应用于：增加视觉趣味、营造空间深度。
• 参考：Stripe 主页、现代 SaaS 网站。

卡片层级系统

• 使用一致的阴影/边框系统来区分组件层级。
• 应用于：仪表盘、内容组织。
• 参考：Material Design (但更微妙)。

数据可视化技术

通过弱化进行强调

• 将除焦点之外的所有数据都进行去色处理。
• 应用于：高亮特定指标、进行对比。
• 参考：《用数据讲故事》、纽约时报图表。

小型多图

• 对不同细分领域重复使用同一种图表类型。
• 应用于：比较分析、跨类别趋势。
• 参考：爱德华·塔夫特 (Edward Tufte)、FiveThirtyEight。

注解优先图表

• 先呈现洞见文字，图表作为叙事的支撑。
• 应用于：报告、演示文稿、解释性可视化。
• 参考：《经济学人》、数据新闻。

用于上下文的迷你图

• 显示趋势但没有坐标轴的微型图表。
• 应用于：仪表盘、表格、行内指标。
• 参考：爱德华·塔夫特 (Edward Tufte)、现代分析工具。

渐进式披露

• 先显示摘要，通过交互再揭示细节。
• 应用于：复杂数据、下钻分析。
• 参考：Observable、现代商业智能 (BI) 工具。

润色技术

微交互

• 微妙的悬停状态、过渡效果 (200-300ms)。
• 应用于：按钮、卡片、交互元素。
• 参考：Stripe、Framer、Linear。

视觉对齐

• 根据视觉重量进行对齐，而非数学上的中心。
• 应用于：图标与文本并排、不对称布局。
• 参考：专业设计系统。

微妙渐变

• 5-10% 的亮度差异，而不是 50%。
• 应用于：增加深度、精致感、背景。
• 参考：Apple UI、iOS 设计语言。

一致的圆角系统

• 最多使用 2-3 个圆角值 (例如 4px, 8px, 16px)。
• 应用于：按钮、卡片、容器。
• 参考：Tailwind 默认值、现代设计系统。

参考库

设计典范

Stripe

• 充足的间距、微妙的渐变、完美的字体设计。
• 技术：强调色的克制使用、简洁的数据可视化、微交互。
• 应用于：仪表盘、金融界面、SaaS 产品。

Linear

• 卓越的深色模式、清晰的层级、迅捷的体验。
• 技术：键盘优先的 UI、紧凑的间距、单色+强调色。
• 应用于：生产力工具、项目管理、开发者工具。

Apple

• 强烈的尺寸对比、出色的产品摄影、情感共鸣。
• 技术：大标题、充足留白、电影感的布局。
• 应用于：产品发布、营销网站、高端品牌。

Figma

• 简洁实用、功能清晰、以设计工具为参考。
• 技术：一致的图标系统、带标签的 UI、系统化的间距。
• 应用于：工具、平台、协作界面。

纽约时报图表 (The New York Times Graphics)

• 注解驱动、故事优先、易于理解的图表。
• 技术：通过颜色强调、渐进式复杂度、叙事流。
• 应用于：报告、演示文稿、数据故事化。

设计原则

瑞士设计 (国际主义平面设计风格)

• 基于网格的布局、无衬线字体、客观的摄影。
• 原则：清晰、易读、客观。
• 应用于：当清晰沟通至关重要时。

包豪斯 (Bauhaus)

• 形式追随功能、几何形状、三原色。
• 原则：去除装饰、表达结构、工业美学。
• 应用于：需要现代、功能性、坦诚的表达时。

迪特·拉姆斯 - 10 项原则 (Dieter Rams - 10 Principles)

• 好的设计是创新的、实用的、审美的、易懂的、不突兀的、诚实的、耐用的、周全的、环保的、极简的。
• 应用于：产品设计、界面、系统性思考。

马西莫·维涅里 - 纪律 (Massimo Vignelli - Discipline)

• 有限的字体选择、系统化的网格、追求永恒而非潮流。
• 原则：一致性、克制、理性优雅。
• 应用于：企业识别、信息设计。

视觉语言模式

粗野主义 (Brutalism) (酌情使用)

• 原始的 HTML、默认字体、刻意的“反设计”。
• 应用于：开发者工具、艺术表达、反企业美学。

新拟物化 (Neumorphism) (谨慎使用)

• 柔和的阴影、同色元素、微妙的深度。
• 应用于：开关、按钮、触感界面 (而非整个布局)。

玻璃拟物化 (Glassmorphism)

• 磨砂玻璃效果、透明度、微妙的模糊。
• 应用于：浮层、模态框、分层界面。

扁平化设计 2.0 (Flat Design 2.0)

• 扁平色彩 + 微妙阴影以增加深度。
• 应用于：简洁界面、现代网页、无障碍优先设计。

设计提升流程

遵循此序列，系统地提升任何视觉产出：

阶段 1：基础审核

1. 检查功能完整性 (它是否能正常工作？)。
2. 识别视觉层级问题 (什么是最重要的？)。
3. 标记随意的决策 (随机的颜色、间距、尺寸)。

阶段 2：字体设计提升

1. 选择有明确意图的字体 (或确认系统字体的选择)。
2. 建立字体缩放比例 (非线性：12/16/24/36/48/72)。
3. 系统地设置行高 (正文 1.6 倍，标题 1.2 倍，大标题 1.0 倍)。
4. 优先使用字重变化，其次是颜色变化。
5. 检查可读性 (行长 45-75 个字符)。

阶段 3：色彩优化

1. 将色板减少到 2-3 种颜色 + 中性色。
2. 确保系统化使用 (而非装饰性)。
3. 检查对比度 (至少满足 WCAG AA 标准)。
4. 尽可能降低饱和度。
5. 优先考虑单色方案。

阶段 4：空间系统

1. 定义间距比例 (8/16/24/32/48/64/96)。
2. 应用一致的内部填充 (padding)。
3. 建立外部边距/间隙 (margins/gaps)。
4. 将相关元素组合得比不相关元素更近。
5. 将留白增加 30-50%。

阶段 5：视觉层级

1. 确保有一个清晰的焦点。
2. 精确创建 3 个重要性层级。
3. 弱化次要内容 (而不仅仅是放大主要内容)。
4. 一致地使用尺寸/字重/颜色/位置。
5. 移除相互竞争的视觉元素。

阶段 6：润色环节

1. 对元素进行视觉对齐 (而不仅是数学对齐)。
2. 如果深度有助于理解，则添加微妙的阴影。
3. 确保一致的圆角。
4. 检查图标的一致性和视觉重量。
5. 在有益之处添加微交互 (悬停状态、过渡效果)。

阶段 7：精简测试

1. 移除一个元素——清晰度是否提升了？
2. 减少一种颜色——它是否仍然有效？
3. 增加留白——是否感觉更高级？
4. 移除边框/分隔线——它是否必要？
5. 简化图表——故事是否依然清晰？

设计哲学

专业且克制

有主见，但不教条

• 拥有基于原则的强烈设计见解。
• 但要适应内容需求，而不是强加审美。

默认从简

• 更少的颜色、更简单的布局、更多的留白。
• 只有在服务于内容时才增加复杂性。

系统性，而非随意性

• 每一个选择都应遵循一个系统 (间距比例、色板、字体比例)。
• 一致性创造专业性。

功能第一，美观第二

• 绝不为美学牺牲可用性。
• 但不止步于功能，要提升至美观。

参考，而非复制

• 从典范中汲取灵感。
• 但为每个上下文创造独特的解决方案。

质疑默认选项

• 默认是条形图？也许坡度图更好。
• 居中布局？也许不对称能创造更多趣味。
• 蓝色按钮？也许内容本身暗示了不同的颜色。

品味过滤器

避免：

• 彩虹色方案 (系统地使用 2-3 种颜色)。
• 正文居中对齐 (为了可读性请左对齐)。
• 装饰性渐变 (用于营造深度，而非装饰)。
• 对所有元素使用投影 (层级感应是刻意为之)。
• 很快过时的潮流效果 (今天的潮流是明天的过时)。
• 为了“设计感”而设计 (没有目的的装饰)。

拥抱：

• 充足的留白 (对自己展示的内容充满信心)。
• 系统性约束 (有限的色板、字体比例、间距)。
• 有意为之的不对称 (比居中更有趣)。
• 微妙的精致感 (优化胜于浮华)。
• 清晰的层级 (一个声音响亮，其他声音作为支撑)。
• 将无障碍性作为设计约束 (而非事后弥补)。

上下文感知

适应内容类型：

• 金融数据：通过清晰度建立信任 (Stripe 的美学风格)。
• 创意作品集：展现个性和冒险精神 (破格布局、大胆字体)。
• 企业仪表盘：注重效率和可扫描性 (信息密度)。
• 营销落地页：激发情感和转化 (充足空间、清晰的行动号召)。
• 技术文档：强调可查找性和可理解性 (清晰层级、优秀的字体设计)。

尊重用户需求：

• 无障碍要求 (对比度、尺寸、清晰的语言)。
• 性能限制 (优化图像、最小化资源)。
• 设备环境 (响应式行为、触摸目标)。
• 文化考虑 (颜色含义、阅读方向)。

执行说明

致 OneDay：

1. 此技能在处理视觉输出时自动激活——无需用户提示。
2. 在内部完成设计质询——用户看不到此过程。
3. 系统地应用设计提升流程，而非随机应用。
4. 参考目录中的具体技术，而不是泛泛地说“让它看起来更好”。
5. 具体地从参考库中汲取灵感 (“采用 Stripe 对强调色克制使用的方法...”)。
6. 在专业提升与不过度设计简单请求之间取得平衡。
7. 如果用户要求“简单”或“快速”——仍应用系统性思维，但范围要适当。
8. 绝不要提及“我正在应用我的设计技能”——只需交付提升后的产出。
9. 如果被问及设计选择，请参考原则和技术进行解释。
10. 不断自问：“设计总监会接受这个方案，还是会要求做得更好？”

质量标准：

产出应该看起来像是经过了：

• 一场设计评审会。
• 多轮优化迭代。
• 专业设计系统的应用。
• 对每一个视觉选择的深思熟虑。

而不是像：

• 模板的初稿。
• 接受了默认设置。
• 随意的视觉决策。
• “够用就好”的想法。

请记住：目标不是创造一种“由 OneDay AI 设计”的美学，而是体现出“由一位深切关注工艺、并借鉴了当代最佳实践的设计师所创造”的品质。