前端设计

为什么会用到它

这个 skill 的 `SKILL.md` 不是在教你“怎么把页面美化一下”，而是在强制你先做设计立项。源码把前置思考拆成 `purpose / tone / constraints / differentiation` 四项：页面到底解决什么问题，谁在用，技术和性能边界是什么，最后用户会记住哪一个视觉钩子。也就是说，它要求你先把设计方向说清楚，再准许你开始写前端代码。

它对 `tone` 的要求也非常具体，不是让你写一个模糊的“现代、简洁、高级”。源码直接举的是一整组强风格方向：`brutally minimal`、`maximalist chaos`、`retro-futuristic`、`organic / natural`、`luxury / refined`、`editorial / magazine`、`brutalist / raw`、`art deco / geometric`、`industrial / utilitarian`。重点不在于你选极简还是极繁，而在于必须有清晰立场。源码原话的核心就是：关键不是 intensity，而是 intentionality。

进入执行层以后，它把前端设计拆成五块：`typography`、`color & theme`、`motion`、`spatial composition`、`background & visual details`。这里最有价值的是它给的不是口号，而是选择标准。字体上，源码要求用有性格的 `display font` 配克制的正文字体，并且点名反对 `Arial`、`Inter` 这类默认脸；色彩上，要求用 CSS 变量维持一致性，采用“主色压住全局 + 少量锐利点缀”的方式，而不是均匀、安全、没有记忆点的配色。

动效和版式部分同样写得很死。源码明确说，HTML 场景优先 CSS-only，React 场景有条件时优先 Motion；动画不要碎片化地到处加一点，而是要把预算压到少数高冲击时刻，比如一次完整的 page-load 编排、带 `animation-delay` 的 staggered reveal、让人有感知的 scroll-trigger 和 hover surprise。版式上它支持 `asymmetry`、`overlap`、`diagonal flow`、`grid-breaking elements`，同时允许两种极端：要么大面积留白，要么高密度但受控。

背景和细节层更能看出它的真实态度。源码要求页面不要默认纯色背景，而要主动制造 atmosphere 和 depth，所以才会列出 `gradient meshes`、`noise textures`、`geometric patterns`、`layered transparencies`、`dramatic shadows`、`decorative borders`、`custom cursors`、`grain overlays` 这些手段。与此同时，它又把禁区写得很清楚：不要 `Inter / Roboto / Arial / system fonts`，不要白底紫渐变，不要可预测的组件套路，甚至提醒你不要每次都收敛到 `Space Grotesk` 这种“看起来不丑但也毫无辨识度”的常见解。

所以这条 skill 真正适合的，是 landing page、dashboard、品牌官网、组件库首页、活动页、整页重构这类“必须有成品感和辨识度”的任务。它不是拿来给旧页面补一点 UI 糖衣的，而是拿来规定：设计方向先行，审美立场必须鲜明，代码复杂度要和视觉野心匹配。源码最后甚至专门提醒，极简设计靠的是节制、间距和细节精度；极繁设计则要用足够复杂的代码把动画和视觉层真正撑起来。