Skill: justmywyw/mywyw-test-skill (version 1.0.0)

--- name: visual_design_director description: 运用技能提升 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 设计”的美学，而是体现出“由一位深切关注工艺、并借鉴了当代最佳实践的设计师所创造”的品质。**


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)