前端设计规范

技能简介

本技能提供现代前端界面设计的完整工作流，涵盖布局规划、主题定义、动效设计及代码实现四个阶段。适用于落地页、仪表盘及各类用户界面的构建场景。

能做什么

• 生成ASCII线框图辅助布局规划
• 定义符合现代审美的配色与字体方案
• 规划微交互动画的时间曲线与变换参数
• 输出可直接使用的HTML/CSS/Tailwind代码
• 确保设计满足响应式与无障碍访问要求

使用说明

1. 环境准备：无需本地安装，直接使用CDN引入依赖
   <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
2. 启动设计流程：按Layout→Theme→Animation→Implementation四阶段推进
3. 布局阶段：用ASCII字符绘制页面结构，确认信息层级
4. 主题阶段：选择预设风格（Vercel极简/新粗野主义/玻璃拟态）或自定义CSS变量
5. 动效阶段：采用微语法描述动画，如fadeIn: 400ms ease-out [Y+20→0, α0→1]
6. 实现阶段：组合Tailwind工具类、Flowbite组件、Lucide图标完成编码

输入与输出

见下方输入与输出表格。

风险提示

• 禁止使用虚构图片URL，应使用Unsplash或placehold.co等真实服务
• 避免使用Bootstrap风格的通用蓝色（#007bff）
• 深色模式需从设计初期同步考虑，而非事后追加
• 阴影效果宜轻不宜重，防止视觉噪音
• 按钮点击区域不小于44×44像素以满足触控需求

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/mpociot/superdesign/SKILL.md
来源类型：GitHub仓库