iyuyoung/young-design

Young Design

创建给人以年轻、作者感、产品驱动印象的网站，避免陷入幼稚、装饰过度或千篇一律。将视觉质量与实现质量视为一个整体系统。根据产品特性调整视觉表达，而不是套用固定风格。

选择任务模式

开始工作前，先选择一种模式：

• Direction（方向）：定义视觉语言、页面层级、设计令牌以及代表性组件。
• Design（设计）：使用真实内容和响应式意图创建完整的页面或线框图。
• Implementation（实现）：将已批准的方向或参考方案转化为生产代码。
• Refinement（优化）：审计现有网站，找出影响最大的差距，并在不破坏现有行为的前提下进行改进。
• Review（评审）：提供基于证据的视觉反馈，除非被要求，否则不修改文件。

如果用户仅要求设计，不要实施生产项目。如果用户要求构建或优化网站，请将工作推进到验证阶段。

建立设计契约

在选择颜色或组件之前，请先确定：

1. 受众——谁会来到网站，他们带着怎样的情感状态。
2. 承诺——首屏必须传达出的最关键信息是什么。
3. 主要行动——最有价值的下一步操作。
4. 个性——三个有用的形容词和三个应避免的特质。
5. 约束条件——框架、品牌资产、SEO、性能、可访问性、打印或部署需求。

尽可能从代码仓库、简报和先前决策中推断这些信息。只有当缺失的信息会实质性地改变设计时，才进行提问。

然后定义一个从 1 到 5 计算的 设计指纹，涵盖温暖感、趣味性、触感、密度、精确度和视觉对比度。记录分数并用一句话解释由此产生的设计方向。不要默认给不相关的产品分配相同的指纹。

使用真实的产品文案和代表性数据。Lorem ipsum、通用仪表盘以及虚构的社交证明会掩盖层级问题。

在页面之前构建视觉系统

在定义或更改外观时，请阅读 references/visual-language.md。从产品、受众或工作流中衍生出一个主要的视觉主题；纸张和拼贴是选项，不是默认值。

创建一个紧凑的视觉系统：

• 颜色角色，而非颜色集合；
• 展示字体、正文以及可选的注释字体；
• 间距节奏和内容宽度；
• 边框、圆角、阴影和材质规则；
• 图标和插图风格；
• 交互和动效行为；
• 桌面端、平板端和移动端布局规则。

使用设计令牌或共享变量。避免将每个部分都当作独立的海报来设计。

保留以下层之间的区别：

• 品牌层——可识别的语气、标志、颜色和字体；
• 产品层——任务流程、控件、状态和反馈；
• 内容层——层级、扫描、信任、SEO 文案；
• 材质层——纸张、胶带、铅笔、纹理或拼贴装饰。

材质细节必须支撑层级结构。保持其稀疏程度，以确保产品保持可信和可用。

围绕产品时刻进行构图

不要默认为左侧标题加右侧任意仪表盘截图的布局。识别出最能证明产品价值的时刻：一个推荐、预览、结果、转化、工作表、对比或下一步。

首屏通常应包含：

• 一个具体的承诺；
• 一个清晰的产品时刻；
• 一个主要行动；
• 简洁的信任或约束提示；
• 足够的非对称性或材质特性，以体现手工感。

次级页面应回答不同的问题。不要在不同标题下重复相同的卡片网格。

在选择英雄区、选择器、卡片、工具、目录或编辑模式时，请阅读 references/component-patterns.md。

交付正确的成品

阅读 references/output-contracts.md 并遵循所选任务模式的契约。将假设、决策、响应式意图和验证证据明确呈现，以便其他设计师或工程师可以继续工作。

作为真实系统实现

在修改代码仓库或将参考方案转化为代码之前，请阅读 references/implementation-playbook.md。

在现有项目中工作时：

1. 检查框架、路由、共享布局、令牌、组件、测试以及生成的资产。
2. 将有意的源文件更改与生成的输出和格式噪音区分开来。
3. 保留行为契约、URL、分析钩子、测试选择器、语义和打印规则。
4. 在页面特定覆盖之前，添加或修改共享基础。
5. 为重复出现的视觉和行为模式实现可复用组件。
6. 检查所有有意义的交互状态：初始、选中、悬停、聚焦、加载、空、错误、成功以及适用时的打印状态。
7. 在桌面端、平板端和窄屏移动端尺寸下进行验证。

优先使用本地或自托管字体、SVG 标志以及一致的图标库。仅当生成的图像具有真实的叙事价值时才使用。不要用装饰性图片来掩盖薄弱的层级结构。

按影响顺序优化

当网站感觉“老气”、“千篇一律”或“不像设计稿”时，按以下顺序修复问题：

1. 字体特征与层级；
2. 首屏构图；
3. 间距节奏与内容密度；
4. 组件几何与交互状态；
5. 颜色角色与对比度；
6. 材质细节与微观装饰；
7. 动效与打磨。

不要一开始就添加阴影、渐变、斑点或动画。这些很少能修复薄弱的构图。

在完成前进行验证

对于实现或最终评审，请阅读 references/quality-gates.md。在决定结果是否准备就绪可展示、发布或公开时，请阅读 references/review-rubric.md。

至少需验证：

• 页面没有意外的水平溢出；
• 可见的界面文本至少为 14px（除非是非必要的装饰性图形）；
• 普通文本对比度达到 4.5:1，大号文本达到 3:1；
• 键盘焦点清晰，交互控件触控尺寸舒适；
• 移动端是重新组合而非单纯缩小；
• 字体、圆角、阴影、图标和材质保持一致；
• 实现后的首屏保留了已批准设计的层级；
• 功能、SEO 结构、生成的文件、下载内容和打印输出仍然有效；
• 当项目提供了相关检查时，类型检查、测试、构建和浏览器检查均需通过。

在将结果判定为可发布状态之前，要求得分不低于 85/100，且无关键阻碍项。得分应用于诊断目的；不要为了满足阈值而虚报。

如果本地无法执行浏览器验证，请说明环境限制，并使用项目的 CI 流程，而非声称进行了视觉验证。

避免 Young Design 的常见失败模式

永远不要默认采用：

• 通用的创业公司渐变和浮动玻璃卡片；
• 将老式衬线字体作为“个性”的主要来源；
• 过多的药丸形状、过大的圆角或统一的卡片网格；
• 过于柔和且对比度不足的配色；
• 在每个元素上都使用随机旋转、胶带、涂鸦或纸张纹理；
• 用极小的元数据和标签来制造精致感；
• 隐藏核心产品价值或强制页面级水平滚动的移动端布局；
• 仅为了适应视觉重设计而重写正常运行的产品逻辑；
• 在不同不相关的品牌之间原样复制同一个参考方案。
• 在领域需要更锐利、更密集或更技术性表达时，却使用温暖的纸张、柔和的颜色或圆角卡片。

最终结果应感觉是经过设计的、有用的且现代的：友好而不幼稚，富有表现力而不喧闹，精致而不冰冷。