zclaw_openfang/skills/frontend-design/SKILL.md

name, description, triggers, tools

name	description	triggers	tools
frontend-design	前端界面设计生成 — 创作独特、生产级的前端界面。避免通用 AI 审美，追求大胆、令人印象深刻的设计风格。支持组件、页面、仪表盘、落地页等各类 Web UI。	设计页面 前端设计 UI设计 创建界面 设计组件 网页设计 落地页 仪表盘设计 美化界面 制作网页	read write bash

前端设计技能

创作独特、生产级的前端界面，避免通用的"AI味"审美，追求令人印象深刻的真实设计。

设计思维流程

在编码之前，先理解上下文并确定大胆的美学方向：

1. 分析需求

• 目的: 界面解决什么问题？谁在使用？
• 基调: 选择一个极端方向：
  • 极简主义
  • 赛博朋克
  • 复古未来
  • 自然有机
  • 奢华精致
  • 玩具趣味
  • 编辑杂志风
  • 粗野主义
  • Art Deco
  • 柔和马卡龙
  • 工业实用
• 约束: 技术要求（框架、性能、可访问性）
• 差异化: 什么让这个设计令人难忘？

2. 选择技术栈

场景	推荐技术
单页面/组件	HTML + Tailwind CSS
交互应用	React + Tailwind CSS
数据仪表盘	React + Recharts/D3
动画丰富	HTML + GSAP/Framer Motion
静态展示	纯 HTML/CSS/JS

3. 设计执行原则

• 生产级质量: 代码可直接用于生产
• 视觉冲击力: 令人过目不忘
• 美学一致性: 清晰的设计观点
• 细节精致: 每个像素都经过思考

输出规范

强制要求: 入口 HTML 文件必须命名为 index.html

文件结构

output/
├── index.html      # 入口文件
├── styles.css      # 样式文件（可选）
└── script.js       # 脚本文件（可选）

质量标准

1. 布局: 清晰的视觉层次，合理的间距和对齐
2. 色彩: 大胆但不混乱，有明确的色彩策略
3. 排版: 字体选择与主题一致，字号层次分明
4. 交互: 悬停效果、过渡动画、状态反馈
5. 响应式: 适配桌面和移动端
6. 可访问性: 合理的对比度、语义化HTML、ARIA标签

常见设计模式

落地页

Hero区域 → 特性展示 → 社会证明 → CTA → Footer

仪表盘

顶部导航 → 侧边栏 → 数据卡片 → 图表区 → 数据表格

博客/内容

导航 → 文章列表/详情 → 侧边栏 → 评论 → Footer

反模式（避免）

• 通用渐变背景 + 居中标题（太平庸）
• 过度使用阴影和圆角（失去个性）
• 全白背景 + 蓝色按钮（默认 Bootstrap 味）
• 堆砌动画（干扰内容）
• 不考虑实际内容的占位符设计

示例输出

当用户说"设计一个 AI 产品落地页"时：

1. 确定美学方向（如：深色科技风 + 霓虹强调色）
2. 选择技术栈（HTML + Tailwind CDN）
3. 构建完整页面（Hero + 特性 + 演示 + CTA）
4. 包含实际内容和有意义的交互
5. 输出可直接在浏览器打开的 index.html