关于 frontend-design
frontend-design 是一项在缺少现有品牌系统时设计页面的技能，重点是确立鲜明的视觉方向。它引导字体、色彩、动效和构图选择，避免泛化布局。
主要功能
- 01明确用途、语调与差异点
- 02选定鲜明的视觉方向
- 03搭配特色展示字体与正文字体
- 04规划协调的色彩和动效
- 05变化构图与背景处理
适用场景
- 01在没有品牌规范时设计页面
- 02制作具有鲜明风格的落地页
- 03为不同项目构思多样视觉方案
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/frontend-design确认已加载。
详细介绍
在没有现成品牌系统的情况下进行设计时加载。坚持采用鲜明、独特的美学风格，不要妥协。通用默认风格不可接受。
输出位置
将所有输出文件写入 ./opendesign/mockups/<task-slug>/。根据页面或功能名称生成 slug（例如 landing-page、pricing-redesign）。
构建前的思考
在编写 HTML 之前，先在计划中回答三个问题：
- 目的。 用一句话说明此页面要完成什么任务。
- 基调。 用哪个形容人的词来描述这种感受——冷峻、温暖、严肃、俏皮、虔敬、张扬？
- 差异化。 怎样才能让观众记住这个页面，而不是把它当作普通的 SaaS 落地页？
选择一种极端风格方向，并精准执行：粗野主义、极繁主义、编辑风、复古未来主义、有机风、工业风、反设计、瑞士现代主义、杂志拼贴风。摇摆不定的折中方案看起来就像现成模板。
字体
搭配独特的展示字体与精致的正文字体。避免使用 Inter、Roboto、Arial 和通用系统字体栈。可选字体：编辑风衬线字体（Fraunces、GT Sectra、Tiempos）、几何展示字体（Space Grotesk、PP Neue Montreal、Söhne Breit）、等宽字体点缀（JetBrains Mono、IBM Plex Mono），以及符合风格方向的趣味 unicase 字体和可变字体。设定具有明确比例关系的真实字号层级，不要依赖浏览器默认字号。
色彩
坚持使用统一协调的调色板。以主色搭配一两种醒目的强调色，效果胜过犹豫不决、均匀分布的配色。强调色使用 oklch，确保不同色相之间的色度和明度保持一致。中性色的色度限制在 ≤ 0.02。
动效
一两个高影响力的动效，胜过十几个零散的微交互。优先使用纯 CSS 动画：支持的情况下使用 transforms、transitions、@keyframes、scroll-timeline。仅在动效依赖状态时才使用 JS。
空间构图
有意打破网格：采用不对称、重叠、斜向基线、紧凑列中的超大字体、充裕留白——或者根据美学风格需要，打造可控且信息密集的界面。无论选择哪种方向，都胜过均匀留白的三列网格。
背景
默认营造氛围：渐变网格、胶片颗粒、噪点、分层透明效果、戏剧性阴影、着色半调图案、细腻的纸张纹理。纯白配纯黑是一种选择，不是默认方案——只有当风格方向需要时才使用。
不同生成结果之间的变化
不同项目或不同变体运行之间，绝不要趋同于相同的设计选择。轮换变化维度：美学方向、主色系、字体风格、动效理念、构图策略。除非用户要求保持连贯性，否则连续两个设计不应像同一系列的作品。
让复杂度匹配设计方向
极繁主义方向 → 采用复杂实现：分层纹理、密集排版、丰富动效、精巧细节。 极简主义方向 → 采用克制实现：减少元素、收紧字号层级、延长过渡时间、增加留白。 不要只做一半。以极繁主义意图执行的克制布局会显得未完成；以极简主义意图执行的极繁布局则会显得混乱。