frontend-design

概述

什么是 frontend-design？

frontend-design 技能是一套专注于打造视觉独特、生产级前端界面的专业工具包。与通用代码生成器不同，该技能强调创意指导、美学、排版、动效、布局和界面细节。它旨在帮助你交付与众不同、设计感强烈的网页组件、页面和应用，而非普通的 AI 产出。

谁适合使用 frontend-design？

该技能适合前端开发者、UI/UX 设计师和产品团队，帮助提升网页项目的视觉和交互质量。适用场景包括：

• 为网页应用、落地页或数字产品提供高质量、富有创意的 UI 设计
• 需要颜色、排版、动效和响应式布局的设计指导
• 避免千篇一律、缺乏灵感的 AI 生成界面
• 确保遵循无障碍和设计最佳实践

它解决了哪些问题？

• 通过要求真实项目和品牌背景，避免“AI 垃圾”设计
• 提供可操作的颜色、间距、排版和交互设计系统
• 从一开始就内置无障碍和响应式设计
• 提供实用、生产就绪的代码和设计模式

使用方法

安装步骤

1. 将技能添加到项目中：
   运行命令：

   npx skills add https://github.com/pbakaus/impeccable --skill frontend-design
   

2. 查看核心文档：
   • 从 SKILL.md 开始，了解整体概览和上下文收集流程。
   • 查阅 README.md、AGENTS.md 和 metadata.json 获取更多设置和使用说明。
3. 浏览设计参考资料：
   reference/ 文件夹包含实用指南：
   • 颜色与对比度（reference/color-and-contrast.md）
   • 交互设计（reference/interaction-design.md）
   • 动效设计（reference/motion-design.md）
   • 响应式设计（reference/responsive-design.md）
   • 空间设计（reference/spatial-design.md）
   • 排版（reference/typography.md）
   • 用户体验文案（reference/ux-writing.md）
4. 适配你的工作流程：
   将设计原则和代码示例整合进你的代码库和工具链。该技能旨在被灵活应用，而非照搬。

关键工作流程提示

• 设计前务必收集项目背景（受众、使用场景、品牌调性）。
• 使用提供的颜色、间距和排版系统，确保界面一致且无障碍。
• 参考动效和交互指南，打造流畅且直观的界面体验。
• 查阅 reference/ 文件，获取可直接使用的 CSS 和设计模式。

常见问题

什么时候应该使用 frontend-design 技能？

当你需要提升网页组件、页面或应用的视觉和交互质量，尤其是设计背景和品牌个性重要时，使用 frontend-design 是理想选择。

我应该先看哪些文件？

• SKILL.md：概览及上下文要求
• reference/color-and-contrast.md：颜色系统指导
• reference/interaction-design.md：状态和无障碍最佳实践
• reference/motion-design.md：动画和时间控制
• reference/responsive-design.md：自适应布局
• reference/spatial-design.md：间距和网格

frontend-design 是生成代码还是仅提供指导？

两者兼备：提供实用、生产就绪的代码片段（主要是 CSS）和详细的设计指导，帮助你高效实现设计。

frontend-design 适合所有项目吗？

该技能最适合注重设计质量、品牌差异化和无障碍的项目。对于纯功能性或内部工具，设计要求较低时，可以采用更简单的方案。

哪里可以找到更多细节？

在 Files 标签中浏览完整文件树，包括所有嵌套的参考资料和辅助脚本，获取深入的指导和示例。