| name | frontend-design |
| description | 创建具有高设计品质、独特的生产级前端界面。当用户要求构建 Web 组件、页面、作品、海报或应用程序时(例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或对任何 Web UI 进行样式美化),使用此技能。生成富有创意、精美的代码和 UI 设计,避免千篇一律的 AI 审美。 |
| license | 完整条款见 LICENSE.txt |
此技能指导如何创建独特的、生产级的前端界面,避免泛化的“AI 劣质品”审美。以对美学细节和创意选择的卓越关注,实现真正可用的代码。
用户提供前端需求:一个要构建的组件、页面、应用程序或界面。他们可能还会提供关于其目的、受众或技术限制的背景信息。
设计思维
在编码之前,请先理解背景并确立一个大胆的美学方向:
- 目的:这个界面解决什么问题?谁使用它?
- 基调:选择一个极端的风格:极致简约、极致繁复的混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具般、编辑/杂志风格、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有非常多的风格可供选择。可以从这些中获取灵感,但要设计出忠于该美学方向的独特风格。
- 约束:技术要求(框架、性能、可访问性)。
- 差异化:是什么让它令人难忘?别人会记住的那个点是什么?
关键:选择一个清晰的概念方向,并精确地执行它。大胆的极致繁复主义和精致的极简主义都可行——关键在于意图明确,而非强度。
然后实现可用的代码(HTML/CSS/JS, React, Vue 等),要求是:
- 生产级且功能完备
- 视觉上引人注目且令人难忘
- 具有清晰统一的美学观点
- 每个细节都经过精心打磨
前端美学指南
专注于:
- 字体排印:选择美观、独特且有趣的字体。避免使用像 Arial 和 Inter 这样的通用字体;选择能够提升前端美学品味的独特字体;出人意料、富有个性的字体选择。将一个独特的展示字体与一个精致的正文字体搭配使用。
- 色彩与主题:致力于一个统一的美学。使用 CSS 变量以保持一致性。带有鲜明强调色的主色调优于色彩平淡、分布均匀的调色板。
- 动态效果:使用动画来实现效果和微交互。对于 HTML,优先使用纯 CSS 解决方案。对于 React,如果 Motion library 可用,则使用它。专注于高影响力时刻:一个精心编排的、带有交错呈现(animation-delay)的页面加载效果,比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发和悬停状态。
- 空间构图:出人意料的布局。不对称。重叠。斜向流动。打破网格的元素。充足的负空间或有控制的密度。
- 背景与视觉细节:创造氛围和深度,而不是默认使用纯色。添加与整体美学相匹配的场景化效果和纹理。应用创意形式,如渐变网格、噪点纹理、几何图案、分层透明效果、戏剧性的阴影、装饰性边框、自定义光标和颗粒覆盖层。
绝不使用千篇一律的 AI 生成式美学,例如被过度使用的字体族(Inter, Roboto, Arial, system fonts)、陈词滥调的配色方案(尤其是白色背景上的紫色渐变)、可预测的布局和组件模式,以及缺乏特定场景特色的模板化设计。
进行创造性地诠释,做出意想不到的选择,让人感觉是真正为特定场景而设计的。任何两个设计都不应该相同。在浅色和深色主题、不同字体、不同美学之间进行变化。绝不在不同代际的生成中趋同于常见的选择(例如 Space Grotesk)。
重要:使实现的复杂度与美学构想相匹配。极致繁复的设计需要复杂的代码、大量的动画和效果。极简或精致的设计则需要克制、精确,并细致关注间距、字体排印和微妙的细节。优雅源于对构想的出色执行。
请记住:Claude 有能力完成非凡的创造性工作。不要有所保留,展示出当你打破常规思维、并完全投入到一个独特的构想中时,真正能够创造出什么。