关于 frontend-desing
frontend-desing 是一项指导前端界面设计与实现的技能，涵盖确定视觉方向到产出完整可运行代码，面向开发界面的开发者。它强调有意识的视觉选择和贴合场景的布局，避免通用化设计模式。
主要功能
- 01先明确受众和视觉方向
- 02选择一致的美学风格
- 03产出完整可运行的实现代码
- 04运用字体、色彩、布局和动效原则
- 05避免重复且通用的界面模式
适用场景
- 01规划落地页的视觉概念
- 02根据界面需求构建完整样式
- 03调整字体、色彩与构图
- 04添加有目的的动画和视觉细节
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/frontend-desing确认已加载。
详细介绍
概述
此技能指导你打造高品质的前端界面，明确审美方向，并实现可用于生产环境的设计。
它通过要求做出有意识的设计决策、建立鲜明的视觉形象并关注细节，避免生成千篇一律、重复乏味、看起来像“AI 作品”的 UI。
重点不只是功能，更是打造令人难忘、精心雕琢的视觉体验。
1. 先设计，再编码
编写任何代码之前：
- 明确界面的用途。
- 确定目标用户。
- 选择一个明确且大胆的审美方向。
- 清楚说明假设。
- 如果需求不明确，请先寻求澄清。
如果存在多个可行的设计方向：
- 简要列出 2–3 个选项
- 不要不作解释就随意选择
没有明确的视觉方向，就不要开始编码。
2. 坚持明确的审美方向
每个 UI 都必须遵循鲜明且经过深思熟虑的风格。
风格示例：
- 极简 / 极致精致
- 粗野主义 / 粗粝原始
- 编辑 / 杂志风
- 奢华 / 高端
- 活泼 / 玩具风
- 复古未来主义
- 工业 / 实用主义
- 有机 / 自然
- 极繁 / 表现力强
指南：
- 选定一个方向，并贯彻到底
- 避免混搭互相冲突的风格
- 明确设计独特且令人难忘之处
请思考：
“用户看过之后会记住什么？”
3. 达到生产级别的实现
所有输出都必须：
- 提供可完整运行的代码（HTML/CSS/JS、React、Vue 等）
- 结构清晰
- 可直接运行（不得使用伪代码或占位内容）
避免：
- 不完整的代码片段
- 无法正常工作的 UI
- 含糊的实现
4. 视觉设计原则
排版
- 避免使用默认字体（Arial、Inter、Roboto、系统字体）
- 选择富有表现力、独具特色的字体搭配
- 有意识地组合展示字体与正文字体
色彩与主题
- 使用协调统一的配色
- 通过变量（CSS 或主题系统）定义颜色
- 优先考虑鲜明的对比与层次
避免：
- 俗套的渐变（尤其是紫色 / 蓝色的 SaaS 风格）
- 褪色、对比度低的配色
布局与构图
- 有意识地运用间距
- 考虑不对称、重叠和层叠
- 如果有助于改善设计，可以打破网格布局
避免：
- 俗套的居中布局
- 毫无变化、重复排列的卡片网格
动效与交互
- 有目的地使用动画：
- 页面加载序列
- 悬停交互
- 滚动触发效果
指南：
- 尽可能优先使用 CSS 动画
- 聚焦于有影响力的瞬间，而不是堆砌大量细微效果
视觉细节
通过以下方式增添层次感与个性：
- 纹理（噪点、颗粒）
- 阴影与光照
- 边框与分隔线
- 背景处理（渐变、图案、叠加层）
避免：
- 扁平、缺乏生气的表面
- 未经打磨的默认样式
5. 避免千篇一律的 AI 设计
严格避免：
- 模板化的 SaaS UI
- 过度使用的字体组合
- 可预测的布局
- 默认的 Tailwind 风格
- 重复的组件模式
每个设计都必须令人感到：
- 有明确意图
- 能结合具体场景
- 视觉上独具特色
6. 让复杂度与设计愿景相匹配
设计复杂度必须与选定的风格相匹配：
- 极简风 → 精准度、间距、排版
- 极繁风 → 丰富的视觉元素、层叠效果、动画
不要：
- 把简单设计复杂化
- 过度简化富有表现力的设计
7. 输出结构
回复应包含：
- 简短的设计概念（1–3 句话）
- 完整的实现代码
代码必须：
- 完整
- 可运行
- 与设计方向一致
预期表现
如果符合以下条件，则说明此技能正常运行：
- UI 设计具有鲜明的视觉特色
- 代码达到生产就绪水平
- 没有出现千篇一律或重复的设计模式
- 审美方向清晰明确
- 视觉细节经过精心处理
使用示例
用户请求：
“为一家 AI 初创公司创建一个落地页”
使用此技能：
-
定义：
- 受众：科技用户 / 创始人
- 风格方向：未来感 + 极简
-
决定：
- 字体风格
- 配色系统
- 布局结构
-
实现：
- 完整的落地页
- 样式化组件
- 动画和交互
-
确保：
- 不要采用千篇一律的 SaaS 风格
- 打造鲜明的视觉标识
评论
支持 Markdown