frontend-design

前端设计

概述

打造令人难忘且实用的界面，并明确美学方向（避免使用千篇一律的模板）。重点关注大胆的字体、协调的配色、有目的的动效、语义化结构和无障碍设计。

快速开始

• 收集需求：用途、受众、平台限制、框架、交付格式（HTML/React/Vue）。
• 选择美学方向和标志性设计手法（条纹、辉光、颗粒质感、杂志式叠排）。参见 references/aesthetic-playbook.md。
• 定义设计令牌：字体、配色、阴影、圆角、间距比例。尽早加载字体。
• 规划布局：主视觉区 + 辅助区块、数据／时间线轨道、卡片；选择网格系统和动效方案。
• 编写语义化标记，接入 CSS 变量，添加交错显现动效，然后进行无障碍和响应式检查。

工作流

1) 明确需求和美学方向

• 询问：目标用户、整体风格（粗野主义、编辑风、霓虹、柔和手作风、工业风等）、内容类型（卡片、表单、图表）、性能限制。
• 选定一种令人印象深刻的设计手法并贯彻始终。除非风格需要，否则避免字体混乱。
• 如果用户描述含糊，可从 references/aesthetic-playbook.md 中提出 2–3 种美学方向供其确认。

2) 规划结构和设计令牌

• 为配色、阴影、圆角、间距和动效曲线设置 CSS 变量。强调色控制在 1–2 种。
• 选择字体组合（展示字体 + 正文字体，可选等宽字体）。自定义字体之后提供后备字体。
• 梳理各个区块和微交互。原生开发从语义化 HTML 入手；React 则拆分为可组合的部分（主视觉区、功能列表、时间线、CTA 栏）。
• 布局、动效、无障碍和响应式设计模式参见 references/implementation-patterns.md。

3) 构建并添加动效

• 标记：使用语义化标题、跳过链接、交互元素的 ARIA 标签和描述性替代文本。
• 布局：宏观布局优先使用 CSS Grid，元素组合优先使用 Flexbox。在保证可读性的同时，有意打破网格规则（不对称、重叠）。
• 样式：使用自定义背景（渐变网格、颗粒质感、斜线纹理）避免纯色背景；为按钮和卡片设计有意为之的边框和阴影。
• 动效：编排少量有意义的动画（页面加载时交错显现、悬停时磁吸式抬升、滚动时显现）。使用 prefers-reduced-motion 做保护。
• 数据驱动界面：将内容（卡片、指标、步骤）定义为数组，保持组件 DRY，便于重新设置样式。

4) 打磨和 QA

• 响应式：折叠网格、保持内边距、确保 CTA 在移动端依然醒目，并将悬停提示替换为聚焦／激活样式。
• 无障碍：使用一个 h1、符合逻辑的标题顺序、焦点样式、AA+ 对比度、带标签的输入框，并在状态变化时使用 aria-live。
• 性能：避免在移动端使用重阴影，压缩／限制资源，使用 font-display swap，并优先使用 CSS 动画而非大量依赖 JS 的效果。

参考资料

• references/aesthetic-playbook.md：选择鲜明的美学方向，涵盖字体、颜色、布局和动效提示。
• references/implementation-patterns.md：HTML/React 模式、设计令牌、动效方案，以及响应式和无障碍设计指南。

资源

• assets/vanilla-starter/：可直接运行的原生 HTML/CSS/JS 概念模板（前卫工作室主题），包含渐变、颗粒质感、交错显现效果、跳过链接和无障碍结构。复制后可通过更新 CSS 变量、字体和内容来更换主题。