# Design Thinking

> 为前端设计提供方向与意图。用于定义目标、基调、领域、色彩世界与评审标准;涵盖来自电影、建筑、营销、UX、汽车、工业设计的跨领域视角。

- Skill: `kscz0000/design-thinking` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/design-thinking`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/design-thinking/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/design-thinking

---


# 设计思维
## 适用场景

在需要为前端设计明确方向与意图时使用。在定义目标、基调、领域、色彩世界与评审标准时与 design 配合使用;涵盖来自电影、建筑、营销、UX、汽车、工业设计的跨领域视角。


在每项设计任务中,均与 **design** 技能配合使用,且应在编码之前完成。

## 设计思维(编码之前)

- **目标**:这个界面要解决什么问题?为谁而做?
- **基调**:选定一个极端方向,并有意识地贯彻——例如极简到极致、极繁复、复古未来、有机自然、轻奢精致、童趣玩味、编辑杂志风、粗野主义、装饰艺术几何、柔和粉彩、工业实用风。
- **约束**:框架、性能、可访问性。
- **差异化**:一个让人过目不忘的亮点。

坚定地选择一个大胆的方向。意图胜于强度。

## 把冲击力留给标点(谨慎使用,以求效果)

冲击力手法——全幅媒体、戏剧化动效、超大字号、饱和重彩、视差——一旦成为默认便会失去力度。如果每一屏都是全屏视频,反而没有任何一屏能击中人心。挑选 1–2 个高光时刻(开场或高潮)去放大,其他部分则保持克制与内敛,让高光读起来像刻意的标点,而不是噪声。克制才是让稀有的全幅节拍真正发力的关键;通篇的强烈感读起来是平的。这就是做减法的奢侈——在充裕的留白中一个大胆的姿态,胜过满铺的极繁。规模、颜色(一种点缀色,而不是五种)、动效(一个标志性动作,而不是不断抖动)同样适用。

## 领域与色彩

- **领域**:5 个以上来自该产品世界的概念、隐喻或术语(领域归属,而非功能罗列)。
- **色彩世界**:5 个以上"属于"该世界的颜色——如果把这个产品还原为一个物理空间,你会在那里看到什么颜色。不要用"暖色"或"冷色"这类泛词;要说出该领域里具体的颜色。
- **签名**:一个只能为该产品而存在的元素(视觉、结构或交互层面)。

## 评审标准

扪心自问:"我愿意把名字签在它上面吗?"设计负责人的评审不是"能不能用?",而是"这是否毫无疑问地经过深思熟虑、精心打磨?"。

不可妥协的工艺底线(任何一项失败即判定不通过):

- **绝不出现字体闪烁。** 标题/展示文字在加载 webfont 过程中,绝不能闪现回退字体或发生重排。监听 `document.fonts.ready` 后再淡入。参见 design-system → *绝不出现字体闪烁*。
- **首屏优先加载。** 任何处于首屏视口内的内容(主标题文字、主视觉、品牌标识)都必须优先完整、正确地绘制完成,之后才加载折叠以下内容。参见 design-system → *加载顺序*。

---

## 跨领域视角

定义方向时,选择契合该产品的学科,并从每个学科中应用 2–3 条原则。例如:dashboard → UX + 汽车;品牌 campaign → 电影 + 营销;应用 → UX + 工业设计。

### 电影

- **构图与取景**:视口即画框;三分法、引导线、前/中/后景层次。聚焦之处即主层级。
- **节奏与韵律**:揭示的顺序(如同剪辑)。一次精心编排的加载或滚动节拍,胜过散乱的动效。
- **色彩与情绪**:调色即情绪;统一调色板就是"影调"。
- **焦点与景深**:焦平面与景深 → 视觉层次与堆叠(模糊、透明度、缩放)。

### 建筑

- **尺度与比例**:人体尺度、柱列/网格的韵律、元素与视口的比例。
- **导视系统**:用户始终清楚自己在哪里、可以去哪里(定位、导航、面包屑)。
- **材质与光线**:质感与阴影塑造纵深;光线方向暗示高度与重点。
- **负空间**:刻意的留白;空间本身就是结构,而非剩余物。
- **过渡节点**:进入与切换的瞬间(落地页 → 应用、模态打开)被当作刻意的"穿越"。

### 营销

- **一个核心主张**:首屏只传达一个核心价值或要点;信息层级优先,功能罗列其次。
- **感性 vs 理性**:决定首屏的第一拍走感性吸引,还是理性清晰;让布局与文案与之对齐。
- **CTA 突出度**:主操作不可错认;次操作存在但不与之争抢。
- **受众契合**:基调用图与目标人群匹配;避免"通用用户"。
- **品牌一致性**:在所有产物中保持同一种声音和视觉系统。

### UX

- **目标与任务**:围绕用户目标与关键任务设计;减少完成任务所需的步骤。
- **信息架构**:清晰的分组与层级;降低认知负担。
- **反馈与状态**:每个动作都有可见反馈;考虑加载、成功、错误状态。
- **可访问性**:色彩对比、焦点顺序、语义化。(减少动效:面向公众/多用户项目应遵循 `prefers-reduced-motion`;个人项目可保留完整动效。)
- **渐进式呈现**:先展示关键信息,细节按需展开(展开、模态、步骤)。

### 汽车(外观 / 内饰)

- **轮廓与性格**:一个强烈的轮廓或"特征线";一眼即可识别。
- **面语言**:曲面张力的连续性(如车身钣金);避免无意义的隆起。
- **比例**:车身(内容)与车轮(外饰/导航)之间的平衡;稳定而不头重脚轻。
- **材质与饰件**:硬/软、冷/暖、哑光/亮光作为层级;主材质一种语言,点缀另一种。
- **以驾驶者为中心**:主要控件和信息位于"驾驶者"(用户)第一眼看到的位置;次要控件在可及范围内,但不与之争抢。
- **控件层级**:一个主操作面;次操作成组且可识别。

### 工业设计

- **形式追随功能**:形态与布局反映用途;不无端装饰。
- **材质诚实**:材质(或视觉等价物:质感、重量)与功能相称。
- **可供性**:形态暗示用途(可点击、可拖拽、可输入);即便无标签也清晰可辨。
- **触感**:按钮和控件"按得动""抓得住"(hover/active 状态、纵深感)。
- **产品性格**:一个清晰的性格(友好、严肃、玩味、高端);贯穿整个 UI 保持一致。
- **简化**:删到不能再删;UI 减法的极致是"最好的部分就是没有多余部分"。

## 限制条件

- 仅在任务明确匹配其上游来源和本地项目上下文时使用本技能。
- 在应用变更前,请核实命令、生成代码、依赖、凭证以及外部服务的行为。
- 不要把示例当作环境专项测试、安全审查或对破坏性/高成本操作的授权替代。