frontend-design

概述

什么是 frontend-design？

frontend-design 技能是一款专注于打造视觉独特、生产级前端界面的专业工具。它不同于通用的UI生成器，强调创意引导、高品质美学和精致代码，避免典型的AI生成风格。该技能非常适合希望构建具有强烈设计感的网页组件、页面、应用或数字作品的设计师和开发者。

谁适合使用 frontend-design？

• 希望提升项目视觉和交互质量的UI/UX设计师。
• 希望确保界面突出且符合现代设计原则的前端开发者。
• 追求一致性、品牌统一且无障碍的前端体验的团队。

解决的问题

• 消除通用且平淡的AI美学，强调创意和基于上下文的设计。
• 提供可操作的项目上下文收集协议，确保设计贴合真实用户和使用场景。
• 提供关于色彩、排版、动效、交互和响应式设计的实用且最新的指导。

使用方法

安装步骤

1. 添加技能：
   通过以下命令将技能安装到你的代理或项目中：

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

2. 查看关键文件：

   • 从 SKILL.md 开始，了解技能的理念和需求。
   • 探索 reference/ 文件夹，深入学习色彩、交互、动效、响应式、空间、排版和UX文案的最佳实践。

3. 理解上下文收集：

   • 使用技能前，确保明确目标受众、使用场景和品牌个性。技能的上下文收集协议是避免通用结果的关键。

4. 整合到工作流程：

   • 将技能的建议和代码模式适配到你自己的代码库、框架（如React）和设计系统。避免盲目复制粘贴，需结合项目实际情况。

推荐查看的文件

• SKILL.md — 核心技能概述及上下文协议
• 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 与其他前端技能有何不同？

frontend-design 专注于设计质量，而不仅仅是代码输出。它强调上下文收集、创意引导和每个视觉及交互细节的最佳实践，打造定制且符合品牌调性的界面。

使用此技能需要是设计师吗？

不需要，但熟悉设计原则会更有帮助。该技能为设计师和开发者都提供了实用且可操作的指导。

frontend-design 可以与 React 或其他框架一起使用吗？

可以。虽然该技能框架无关，但其原则和代码模式可以适配 React 及其他现代前端技术栈。

哪里可以找到实现细节和示例？

请查看 reference/ 文件夹中的专题指南和代码片段。整体工作流程请从 SKILL.md 开始。

frontend-design 适合快速原型设计吗？

该技能更适合注重设计精细度的生产级项目。对于快速线框或通用布局，可能更适合使用更简单的技能。

如何确保我的设计不流于通用？

始终遵循上下文收集协议。技能中的参考资料帮助你在色彩、排版、动效等方面做出有意且独特的选择。

哪里可以查看所有可用资源？

浏览代码库的 Files 标签，探索所有支持文档、参考资料和辅助脚本。