tomevault-io Frontend Design Agent Skills
📋 版本: v0.1.1.1（首个稳定版） 🎯 目标: 符合Agent Skills最佳实践，功能超越GLM原版
🎯 核心理念
本技能采用渐进式披露三层架构（PDA Pattern），提供高质量的前端设计指导：
- 极简入口点 - SKILL.md ≤ 200行（社区黄金标准）
- 按需加载 - references/ 详细文档按需读取
- 技术栈灵活 - 支持多框架（React/Vue/Svelte/Angular）
- 设计优先 - Design Token方法论优先
🚀 快速开始
触发模式
必须使用场景：网站/Web应用开发、UI设计、组件库、设计改进、指定框架（React/Vue/Svelte等）、指定工具（Tailwind/shadcn/ui等）
关键词："构建网站"、"创建仪表板"、"设计UI"、"让它现代/简洁"
不用于：后端API、纯逻辑、非视觉任务
设计思维流程
在编写代码前，按以下步骤思考：
- 理解上下文 - 用途是什么？谁使用？技术约束？
- 选择美学方向 - 选择大胆、独特的设计风格（brutalist、retro-futuristic、luxury、playful、editorial等）
- 确定核心差异 - 什么是令人难忘的？
- 实现高质量代码 - 生产级、视觉震撼、细节精致
关键原则：
- 选择清晰的概念方向，精确执行
- 大胆的极繁主义和精致的极简主义都可行
- 关键是有意性，不是强度
技术栈默认值
默认技术栈（如未指定）：
- 框架：React + TypeScript
- 样式：Tailwind CSS
- 主题：CSS自定义属性（light/dark模式）
支持的替代方案：
- 框架：Vue、Svelte、Angular、vanilla HTML/CSS
- 样式：CSS Modules、SCSS、Styled Components、Emotion
- 组件库：MUI、Ant Design、Chakra UI、Headless UI
📚 文档导航
核心方法论文档
| 文档 | 说明 |
|---|---|
| Design Token方法论 | 核心设计令牌系统 |
| 令牌工作流 | 令牌开发流程 |
| 系统化方法 | 完整设计系统 |
实现指南
| 文档 | 说明 |
|---|---|
| 组件状态覆盖 | 8种状态完整覆盖（1主文档+10份专题） |
| 无障碍指南 | WCAG AA标准 ✅ DONE |
| 响应式设计 | 移动优先 ✅ DONE |
| 性能优化 | 性能最佳实践 |
| SEO指南 | 搜索引擎优化 |
美学指导
| 文档 | 说明 |
|---|---|
| 设计方向 | 5种设计方向模板（1主文档+9份专题） |
| 排版指南 | 字体选择与排版 ✅ DONE |
| 色彩理论 | 色彩系统 ✅ DONE |
| 反模式 | 避免常见错误 ✅ DONE |
质量保证
| 文档 | 说明 |
|---|---|
| 质量清单 | 完整检查清单 |
| 审查标准 | 代码审查标准 ✅ DONE |
| 测试策略 | 测试方法 ✅ DONE |
示例文档
| 文档 | 说明 |
|---|---|
| 组件示例 | 组件示例（1主文档+2份专题） ✅ DONE |
| 布局示例 | 布局示例 ✅ DONE |
| 动画示例 | 动画示例 ✅ DONE |
框架特定
| 文档 | 说明 |
|---|---|
| React | React最佳实践 ✅ DONE |
| Vue | Vue最佳实践 |
| Svelte | Svelte最佳实践 |
| Angular | Angular最佳实践 |
| Tailwind | Tailwind配置 ✅ DONE |
| CSS Modules | CSS Modules指南 ✅ DONE |
| Styled Components | Styled Components指南 ✅ DONE |
🎨 前端美学指南
核心原则
- 排版 - 选择独特、美观的字体，避免Inter/Roboto/Arial等通用字体
- 色彩与主题 - 使用CSS变量，主色调+强烈强调色
- 动效 - 使用动画实现微交互和页面加载效果
- 空间构图 - 非对称布局、重叠、对角线流动
- 背景与细节 - 渐变网格、噪点纹理、几何图案
禁止事项
❌ 通用AI美学：
- 滥用的字体系列（Inter、Roboto、Arial）
- 陈词滥调的配色方案（特别是白色背景上的紫色渐变）
- 可预测的布局和组件模式
- 缺乏上下文特定性的千篇一律设计
✅ 正确做法：
- 每个设计都应该是独特的
- 在浅色和深色主题、不同字体、不同美学之间变化
- 避免收敛到通用选择（如Space Grotesk）
🔧 工具与脚本
验证工具
scripts/validate/check-tokens.py- Token验证scripts/validate/check-accessibility.py- 无障碍检查scripts/validate/check-performance.py- 性能检查
生成工具
scripts/generate/generate-theme.py- 主题生成scripts/generate/generate-component.py- 组件生成
测试工具
release/verify/test/test-skill.py- 技能测试
📦 项目模板
提供预配置的项目模板：
templates/react/- React项目模板templates/vue/- Vue项目模板templates/vanilla/- 原生HTML/CSS/JS模板
✅ 质量标准
- 代码覆盖率 > 80%
- WCAG AA 无障碍标准
- 移动优先响应式设计
- 性能优化（LCP < 2.5s）
- SEO最佳实践
📖 更多文档
- 开发流程规范
- 贡献指南
- 架构说明
- API文档
- 迁移指南
版本: v0.1.1 | 状态: ✅ 稳定发布 |
Converted and distributed by TomeVault — claim your Tome and manage your conversions.