frontend-design 是做什么的？
构建具有卓越设计质量、独特风格的生产级前端界面，遵循命名美学理念。适用于组件、页面或应用程序开发。生成注重美学细节和创意选择的工作代码，避免千篇一律的AI输出。
概述
该技能为AI助手提供了一套结构化的方法，用于构建视觉上引人注目且功能完善的前端界面。通过定义清晰的美学理念，开发者可以与AI就期望的设计方向进行高效沟通，从而获得更精准、更具原创性的代码输出。
工作原理
- 命名美学：技能内置了一系列预设的美学理念（例如“极简主义”、“赛博朋克”、“毛玻璃效果”等）。开发者可以在提示中直接引用这些理念，例如：“使用‘毛玻璃效果’美学构建一个用户登录面板”。
- 代码生成：AI将在生成的代码中严格遵循所选美学理念的设计原则，包括色彩方案、排版、间距、阴影、动效等细节。
- 生产级质量：代码采用现代前端最佳实践（如组件化、响应式设计、可访问性），可直接集成到实际项目中。
使用场景
- 构建UI组件库：为按钮、卡片、表单等常用组件创建风格统一且独特的视觉样式。
- 开发页面布局：从零开始或基于线框图生成具有强烈设计风格的完整页面。
- 快速原型设计：将设计概念快速转化为可交互的工作原型，供评审或用户测试。
支持平台
此技能适用于Claude Code、Cursor、Codex等主流AI编码助手。
最佳实践
- 明确指定美学理念：在提示中清晰指出你想要的设计方向，例如“采用‘自然有机’美学”。
- 提供参考语境：如果可能，提供品牌色、现有设计风格或具体功能需求，以优化输出。
- 迭代细化：对生成的代码进行微调，或要求AI应用不同的美学理念以比较效果。
示例提示
使用“赛博朋克”美学构建一个深色主题的仪表板布局，包含侧边导航、顶栏和主内容区。确保响应式设计并遵循无障碍标准。
许可证
本项目采用MIT许可证。