| name | frontend-design |
| description | 做有辨识度、生产级、高设计质量的前端界面。当用户要构建网页组件、页面、海报或应用(网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或美化任何 Web UI)时使用。产出有创意、精致、避免千篇一律 AI 风格的代码与界面。 |
| license | Complete terms in LICENSE.txt |
本 skill 指导你做出有辨识度、生产级的前端界面,避开千篇一律的"AI 流水线"审美。要写出真正能跑的代码,并在美学细节与创意取舍上格外用心。
用户会给出前端需求:要构建的某个组件、页面、应用或界面。可能附带用途、受众或技术约束的背景。
设计思考
写代码前,先理解场景,并笃定地选一个大胆的美学方向:
- 用途:这个界面解决什么问题?谁在用?
- 基调:选一个极致方向——极简到狠、极繁到乱、复古未来、有机自然、奢华精致、俏皮玩具感、杂志编辑风、粗野原始、装饰艺术/几何、柔和马卡龙、工业实用,等等。风味很多,拿来找灵感,但要设计一个真正贴合所选方向的。
- 约束:技术要求(框架、性能、无障碍)。
- 差异化:什么让它令人难忘?别人会记住的那一个点是什么?
关键:选一个清晰的概念方向,并精准执行。大胆的极繁和克制的极简都行——重点是意图明确,而非强度。
然后实现能跑的代码(HTML/CSS/JS、React、Vue 等),要做到:
- 生产级、功能完整
- 视觉抢眼、令人记住
- 有统一、清晰的美学观点
- 每个细节都精雕细琢
前端美学准则
重点关注:
- 字体(Typography):选漂亮、独特、有意思的字体。避开 Arial、Inter 这类通用字体;选有特点、出人意料、能拔高质感的字体。用一个有个性的展示字体搭一个精致的正文字体。
- 配色与主题(Color & Theme):笃定一个统一的美学。用 CSS variables 保持一致。主色 + 锐利点缀胜过怯生生、平均分配的调色板。
- 动效(Motion):用动画做效果和微交互。HTML 优先纯 CSS 方案;React 在可用时用 Motion 库。聚焦高冲击力的时刻:一次编排良好、错落渐显(animation-delay)的页面加载,比零散的微交互更令人愉悦。用会让人惊喜的滚动触发与 hover 态。
- 空间构图(Spatial Composition):出人意料的布局。非对称。叠压。对角线流动。打破网格的元素。慷慨的留白,或受控的密集。
- 背景与视觉细节:营造氛围与层次,而不是默认用纯色。加入契合整体美学的情境效果与纹理。运用渐变网格、噪点纹理、几何图案、分层透明、戏剧化阴影、装饰性边框、自定义光标、颗粒叠层等创意手法。
绝不使用通用的 AI 生成审美:被用烂的字体族(Inter、Roboto、Arial、系统字体)、套路化配色(尤其是白底紫色渐变)、可预测的布局与组件套路,以及缺乏场景特异性的模板化设计。
要有创意地解读、做出真正"为这个场景而设计"的意外选择。没有两个设计该是一样的。在亮色/暗色主题、不同字体、不同美学之间变化。绝不在多次生成里收敛到同一个常见选择(例如 Space Grotesk)。
重要:让实现的复杂度匹配美学愿景。极繁设计需要繁复的代码、大量动画与效果;极简或精致设计需要克制、精准,以及对间距、字体、微妙细节的悉心打磨。优雅来自把愿景执行到位。
记住:你有能力做出非凡的创意作品。别保守——拿出跳出框框、全力投入一个独特愿景时真正能创造的东西。
