frontend-design

打造独具特色、达到生产级水准的前端界面，同时保持品牌一致性和实现质量。

当请求是构建或设计前端组件、页面或界面，且任务主要涉及视觉/用户体验实现时，使用此技能。

项目设计基础

在做出视觉设计决策之前，请先阅读项目设计资料。

• docs/design.md — 设计令牌、字体、间距、圆角、阴影、深色模式和组件模式的权威依据。
• docs/sales.md — 受众、定位和文案语气的权威依据。

遵循以下约束：

• 主色：Trust Bold Blue #2563eb（比 Confluence 更饱和）
• 字体：默认 UI/正文使用 Inter（这是有意为之的品牌选择）
• 语气：专业、自信——现代，但不会令企业业务分析师感到望而生畏
• 圆角：默认 8px，与 Linear/Notion 的 SaaS 美学保持一致
• 必须同时适用于浅色和深色模式

设计思路

开始编码之前先明确背景，然后选择一个清晰的视觉方向：

• 用途：此界面要解决什么问题？由谁使用？
• 语气：选定一种主导风格方向，并确保所有组件风格一致。
• 约束：技术要求（框架、性能、无障碍）。
• 差异化：怎样才能让它令人难忘？用户会记住的核心亮点是什么？

在品牌规则范围内进行探索：

• 正文、UI 文本和表单始终使用 Inter。
• 仅在标题、重点提示或主视觉区域使用强调/展示字体。
• 每个界面至多使用一种强调/展示字体，除非项目已定义其他模式。
• 组件基础元素（间距节奏、圆角、信息密度、交互模式）应与现有产品模式保持一致。
• 为每个界面选择一种主导氛围和一种辅助设计元素；避免混搭多种无关美学风格。

默认使用项目现有技术栈实现可用代码：

• 复用仓库中已有的框架、样式系统和组件基础元素。
• 除非任务明确要求，否则不要引入新框架或新的样式范式。

确保最终成果：

• 达到生产级水准且功能完善
• 视觉醒目、令人难忘
• 风格统一，审美方向清晰
• 每个细节都经过精心打磨

前端美学指南

应用以下设计规则：

• 排版：默认正文和 UI 字体使用 Inter。只有在能强化所选氛围时，才引入独特的强调/展示字体。保持可读性和层级清晰。
• 色彩与主题：保持整体美学一致。使用 CSS 变量确保一致性。鲜明的主色搭配醒目的强调色，胜过犹豫不决、平均分配的配色方案。
• 动效：通过有目的的动效明确层级和可操作性。在可行时优先使用 CSS 实现动效。仅在项目中已使用或任务明确要求时，才使用框架原生动效库。将动效集中在关键过渡中，避免让每个元素都动起来。
• 空间构图：有意识地引入变化（不对称、叠加、密度变化），同时确保内容易于浏览、交互清晰。
• 背景与视觉细节：只有在有助于营造所选氛围，且不会降低可读性、对比度或性能时，才增加层次感。

避免重复使用默认审美和脱离场景的视觉陈词滥调。优先选择与品牌、受众和产品意图相关的设计方案。

在可控范围内调整不同任务的美学风格：变化强调/展示字体的运用、构图元素和动效特征；保持品牌基础元素稳定。

让实现复杂度与所选方向相匹配。只有在能显著提升表达效果或品牌呈现时，才增加效果复杂度。极简或精致的设计方向应保持克制。

严谨地落实创意选择：优先考虑一致性、易用性、无障碍和可维护性，不要为了新奇而牺牲这些原则。