前端界面设计

技能简介

该技能指导创建具有鲜明风格、生产级质量的前端界面，避免千篇一律的”AI流水线”审美。通过大胆的设计方向和精细的美学执行，生成功能完整、视觉出众的网页组件、页面或应用。

能做什么

• 根据需求构建各类前端组件、单页或完整应用
• 确立极端化的美学方向（极简/极繁、复古未来、有机自然等）
• 实现独特的字体搭配与色彩系统
• 编排高冲击力的页面动效与微交互
• 创造非对称、破格的版面布局
• 添加氛围感背景纹理与视觉细节

使用说明

安装指令：该技能为Claude内置能力，无需额外安装。在对话中直接描述前端需求即可调用。

使用步骤：

1. 明确告知需要构建的界面类型（组件/页面/应用）
2. 提供使用场景、目标受众和技术约束（如框架偏好）
3. 可指定美学倾向，或由技能自动选择大胆方向
4. 获取包含完整HTML/CSS/JS或React/Vue代码的实现方案

输入与输出

见下方输入与输出表格。

风险提示

• 复杂动效可能影响低端设备性能，需权衡视觉效果与运行效率
• 非常规字体需确认版权及网络加载可用性
• 极端美学方向可能与品牌规范冲突，企业项目需提前对齐
• 自动生成代码需人工审核无障碍访问(ARIA)合规性

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/steipete/frontend-design/SKILL.md
来源类型：GitHub开源技能库