用途：这是一份前端界面设计指导资料，目标是在编写代码前先确立清晰的美学方向，避免产出千篇一律的“模板感”界面，适用于需要提升视觉品质与专业完成度的前端项目。
设计流程：动手写代码前先回答四类问题——用途（界面解决什么问题、谁使用）、基调（如粗野主义、奢华、趣味、编辑感、复古未来等风格方向）、约束（目标设备、无障碍要求、性能预算）、记忆点（哪个单一元素让界面被记住）。资料主张先确定方向，怯懦的设计不如带瑕疵的大胆设计。
主要能力与内容范围： 排版方面，建议避免过度使用的默认字体，选用能强化界面性格的字型，并给出显示字体、正文字体、等宽字体的角色划分；细节上涵盖表格数字对齐（font-variant-numeric: tabular-nums）、标题平衡换行（text-wrap: balance）、正确省略号字符，以及单行截断、多行截断与 flex 子元素需设 min-width: 0 的实现方式。 配色方面，主张基于 CSS 自定义属性构建语义化主题，区分原始色值与语义令牌，并配合 prefers-color-scheme 深色模式；原则是确定一个主色加一到两个点缀色、使用感知均匀的 oklch、正文对比度至少 4.5:1、大字至少 3:1。 动效方面，要求尊重 prefers-reduced-motion，只动画 transform 与 opacity，禁止使用 transition: all，列表化具体属性，动画需可被用户操作打断；动画预算应集中在页面转场、状态切换和操作反馈上，避免为每个元素加随机悬停效果或滚动劫持。 空间构成方面，提倡不对称布局、有意留白、打破网格的元素与对角线视觉流，响应式上使用 clamp() 流体字号与容器查询做组件级适配。此外还涉及通过噪点纹理、渐变网格营造层次，图片需写明尺寸防布局偏移、按首屏与折叠下区分加载优先级，以及交互元素应具备默认、悬停、聚焦（:focus-visible）、按下、禁用五种状态。
限制与说明：资料为设计规范与建议，未提供安装命令、代码包或具体工具集成方式，也未说明收费、价格与平台支持信息，相关内容暂未提供。