描述: 交互式设计向导，通过发现、美学选择和代码生成指导完整的前端设计过程。用于创建独特、生产就绪的UI。 允许的工具:
- 读取
- 写入
- 询问用户问题
- 技能
设计向导
一个交互式向导，指导您创建独特、生产就绪的前端设计。
目的
此技能协调完整的设计过程：
- 发现 - 理解要构建什么
- 研究 - 分析趋势和灵感
- 方向 - 选择美学方法
- 颜色 - 选择配色方案
- 排版 - 选择字体
- 实施 - 生成代码
- 审查 - 验证质量
过程概述
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 发现 │ ──▶ │ 研究 │ ──▶ │ 情绪板 │
└─────────────┘ └─────────────┘ └─────────────┘
│
┌─────────────┐ ┌─────────────┐ ▼
│ 审查 │ ◀── │ 生成 │ ◀── ┌─────────────┐
└─────────────┘ └─────────────┘ │ 颜色/类型 │
└─────────────┘
步骤 1: 发现问题
询问用户关于他们的项目：
问题 1: 您在构建什么？
- 落地页
- 仪表板
- 博客/内容网站
- 电子商务
- 作品集
- SaaS 应用
- 移动应用 UI
- 其他（描述）
问题 2: 项目背景
- 个人项目
- 初创/新产品
- 成熟品牌
- 客户工作
- 现有设计的重新设计
问题 3: 目标受众
- 开发者/技术人员
- 商业专业人士
- 创意/设计师
- 普通消费者
- 年轻/Gen-Z
- 豪华/高端市场
问题 4: 背景风格偏好
- 纯白色 (#ffffff)
- 米白色/温暖 (#faf8f5)
- 浅色调（使用最浅的调色板颜色）
- 深色/情绪化（使用最深的调色板颜色）
- 让我根据美学决定
问题 5: 有任何特定灵感吗？
- 要分析的URL
- 美学关键词
- 特定要求
- 跳过（使用趋势研究）
步骤 2: 研究阶段
基于答案，可选地调用：
趋势研究员- 用于当前设计趋势灵感分析器- 用于提供的特定URL
步骤 3: 情绪板阶段
调用 情绪板创建器 来：
- 将研究综合成方向
- 向用户呈现选项
- 迭代直到批准
步骤 4: 美学选择
基于发现和情绪板，从目录中建议美学：
现代/高级：
- 暗黑与高级 - 精致，高对比度
- 玻璃态 - 分层，半透明
- Bento 网格 - 结构化，模块化
大胆/独特：
- 新粗野主义 - 原始，有影响力
- 声明英雄 - 以排版为中心
- 编辑风格 - 杂志灵感
极简/干净：
- 斯堪的纳维亚 - 温暖极简
- 瑞士排版 - 基于网格的清晰度
- 单页焦点 - 集中影响
有趣/创意：
- Y2K/赛博 - 复古未来主义
- 孟菲斯风格 - 彩色几何
- Kawaii - 可爱，圆润
查看 references/aesthetics-catalog.md 获取完整目录。
步骤 5: 颜色与排版
调用专门技能：
颜色策展人- 浏览 Coolors 或从备用中选择排版选择器- 浏览 Google Fonts 或使用配对
将选择映射到 Tailwind 配置。
步骤 6: 代码生成
生成单个 HTML 文件：
结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[项目标题]</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[字体1]&family=[字体2]&display=swap" rel="stylesheet">
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
// 自定义颜色从调色板
},
fontFamily: {
// 自定义字体
}
}
}
}
</script>
<style>
/* 自定义动画 */
/* 焦点状态 */
/* 减少运动 */
</style>
</head>
<body>
<!-- 语义化 HTML 结构 -->
</body>
</html>
要求
- 移动响应（Tailwind 断点）
- 语义化 HTML（header, main, nav, footer, section）
- 可访问性（ARIA 标签，焦点状态，对比度）
- 无 Lorem ipsum（逼真的占位符内容）
- 动画尊重 prefers-reduced-motion
- 键盘可导航
步骤 7: 自我审查
对照 references/anti-patterns.md 检查：
- [ ] 无英雄徽章/药丸
- [ ] 无通用字体（Inter, Roboto, Arial）
- [ ] 无紫色/蓝色渐变在白色上
- [ ] 无通用斑点形状
- [ ] 无过度圆角
- [ ] 无可预测模板
检查 references/design-principles.md：
- [ ] 清晰的视觉层次
- [ ] 适当对齐
- [ ] 足够对比度
- [ ] 适当空白
- [ ] 一致间距
检查 references/accessibility-guidelines.md：
- [ ] 4.5:1 文本对比度比
- [ ] 可见焦点状态
- [ ] 语义化 HTML
- [ ] 图像替代文本
- [ ] 表单标签
输出格式
交付：
- 最终 HTML 文件
- 设计选择的简要解释
- 使用的字体列表（供参考）
- 配色方案摘要
迭代
如果用户请求更改：
- 记录特定反馈
- 进行有针对性的调整
- 重新运行自我审查
- 呈现更新版本
最多 3 次主要迭代，然后合并反馈。
参考
references/design-principles.md- 核心设计原则与代码references/aesthetics-catalog.md- 完整美学目录references/anti-patterns.md- 不要做什么references/accessibility-guidelines.md- WCAG 合规