tomevault-io 前端设计 (Frontend Design)
本技能旨在指导创建独特、生产级别的前端界面，避免通用的“AI 廉价审美（AI slop）”。在编写实际可用代码的同时，需要极度关注美学细节并做出富有创造力的设计选择。
设计思维 (Design Thinking)
在开始编码之前，先理解项目的上下文，并确定一个大胆的美学方向：
- 目标：这个界面解决了什么问题？目标用户是谁？
- 基调：选择一种独特的美学风格（例如：极简粗野主义、复古未来主义、社论/杂志风、工业风）。
- 约束：有哪些技术和功能要求？
- 差异化：是什么让这个设计令人过目不忘？
关键要求：选择一个清晰的概念方向，并精确地执行它。
反廉价审美设计规则 (Anti-Slop Design Rules)
绝对禁止使用（AI 廉价审美的标志）
- 排版俗套：将 Inter、Roboto、Arial 作为主要字体。字体大小缺乏对比、过于统一。
- 色彩俗套：白色背景上使用紫色/紫罗兰色渐变。使用通用的蓝色（#3B82F6）作为主色调。褪色、寡淡的配色方案。
- 布局俗套：所有元素完美居中对齐。3到4个完全相同的卡片组成的无聊网格。
- 组件俗套：到处滥用玻璃拟物化（Glassmorphism）。阴影过于柔和模糊。
- 动画俗套：滚动时一切元素都采用淡入（Fade-in）效果。按钮上使用弹跳（Bounce）动效。
替代方案：创造独特的设计
- 排版：
- 展示字体（大标题）：Clash Display, Cabinet Grotesk, Space Grotesk, Playfair Display。
- 正文字体：Geist, Plus Jakarta Sans, DM Sans。
- 在展示字体和正文字体之间建立强烈的对比。使用比常规“舒适”尺寸更大的字体（标题 48px 以上）。极大地改变字体粗细（字重对比）。
- 色彩：
- 挑选一种主导色并克制地使用它（点缀色）。
- 使用近乎黑色（如 #0A0A0A）来代替纯黑。
- 通过背景中非常微妙的渐变来营造空间深度。
- 打破网格的布局：
- 具有清晰视觉层级的不对称构图。
- 元素重叠以创造深度。
- 极其慷慨的留白，或者是有意为之的密集排版。
- 组件：
- 感觉具有真实物理触感的微交互。
- 具有引导作用而非仅仅是装饰的空状态（Empty states）。
Source: you-want/mini-cc — distributed by TomeVault.