mywyw-test-skill

by justmywyw

Install this Skill

curl -fsSL -o mywyw-test-skill.zip https://skill.seembox.com/api/v1/skills/mywyw-test-skill/download && unzip mywyw-test-skill.zip

Download mywyw-test-skill.zip

SKILL.md About

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

_meta.json Metadata

{
  "ownerId": "kn71y2pf0qkdk7xb5hbjgjdd3x836d57",
  "publishedAt": 1773921969258,
  "slug": "mywyw-test-skill",
  "version": "1.0.0"
}