frontend-design

概览

什么是 frontend-design？

frontend-design 是一项专注于打造视觉独特、生产级前端界面的技能。它不同于通用 AI 设计工具，强调创意方向、美学、排版、动效、布局和界面精致度。该技能非常适合对设计质量有较高要求的项目——如网页组件、页面、应用、海报或任何需要强烈视觉识别的作品。

谁适合使用 frontend-design？

此技能最适合前端开发者、UI 设计师和产品团队，他们希望提升界面质量，超越默认或通用 AI 输出。特别适用于需要：

• 构建具有明确品牌个性和调性的界面
• 确保创意且非通用的设计方向
• 运用高级设计原则处理色彩、排版、动效和布局

frontend-design 解决了哪些问题

• 通过真实项目背景避免“AI 垃圾”式的审美
• 引导您收集项目背景，确保设计符合目标用户和使用场景
• 提供色彩、交互、动效、响应式、空间、排版和 UX 文案的实用参考

使用指南

安装步骤

1. 使用以下命令安装技能：

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

2. 从 SKILL.md 文件开始，快速了解需求和工作流程。
3. 查看支持文件和文件夹：
   • README.md（如果存在）
   • AGENTS.md，针对代理的具体指导
   • metadata.json，技能元数据
   • reference/ 文件夹，深入了解色彩、交互、动效、响应式、空间、排版和 UX 文案

工作流程建议

• 设计前务必收集项目背景，确认目标用户、使用场景和品牌调性。
• 根据自己的代码库和工具调整技能工作流程。不要照搬，利用原则和参考指导自己的流程。
• 预览以下关键文件，获取实用指导：
  • 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

常见问题

frontend-design 适合我的项目吗？

如果您需要高质量、富有创意的前端界面，并希望避免通用 AI 设计，frontend-design 是不错的选择。它不适合对视觉精致度要求不高的快速原型。

我应该先查看哪些文件？

从 SKILL.md 获取背景信息，然后浏览 reference/ 文件夹，了解实用设计原则和代码示例。

frontend-design 如何处理无障碍和响应式？

该技能包含色彩对比、交互状态、动效时机、响应式布局、空间系统和排版的参考，均遵循无障碍最佳实践。

哪里可以找到更多细节？

打开仓库的 Files 标签，查看完整文件树，包括嵌套的参考资料和辅助脚本。安装或工作流程相关问题，请查阅 README.md 和 SKILL.md 文件。