frontend-design

frontend-design 技能概览

frontend-design 技能可以帮助你构建看起来像“经过刻意设计”的前端 UI，而不只是技术上正确。它最适合落地页、仪表盘、应用外壳以及那些视觉方向、层级和精致度和实现同样重要的组件。

当你已经明确产品目标，但需要把它转化为一个连贯的界面时，就该用 frontend-design。它尤其适合 UI Design 工作：需要清晰的审美立场、更快做出布局和排版决策，并减少那种千篇一律的“AI 感”输出。

frontend-design 最擅长什么

frontend-design 最擅长处理那些需要明确设计态度的任务：编辑式版面、利落的组件系统、打磨过的产品界面，以及把平淡界面升级成有意图的界面。这个技能会推动你先选定一个方向，再把它一致地执行到底。

frontend-design 有什么不同

它不会给你那种空泛的“做得更现代一点”建议，而是把工作流聚焦在框架设定、视觉系统选择和实现纪律上。这样能减少随意改风格的情况，提升跨区块的一致性，也更贴近真实产品开发需要的输出。

什么时候适合用它

如果你希望有一份能提升构图、间距、字号层级和动效，但又不会把构建过程搞得过于复杂的 frontend-design 指南，就选 frontend-design。当主要风险是 UI 显得普通，而不是功能缺失时，它会是很好的安装选择。

如何使用 frontend-design 技能

安装并检查该技能

使用以下命令安装 frontend-design 技能：
npx skills add affaan-m/everything-claude-code --skill frontend-design

先打开 skills/frontend-design/SKILL.md。在这个仓库里，它就是唯一的源文件，所以安装流程很简单：先读技能内容，再结合你的技术栈、设计系统和代码库约束进行调整。

把粗略需求整理成可用提示词

想更好地使用 frontend-design，先把产品类型、受众、语气和约束说清楚，再让模型开始写代码。一个弱提示词是：“设计我的首页。” 更好的提示词是：“使用 frontend-design 为一个 B2B 分析工具创建落地页。语气要冷静、偏高级，布局要有编辑感，页面必须适配 Tailwind 和 React。”

按照 design-first 工作流推进

这个技能的设计思路是先框定界面，再构建视觉系统。实际操作中，意味着在要求实现之前，先决定那个最值得记住的核心想法、情绪基调和审美方向。这样可以避免风格混杂，也让输出更容易审查。

按正确顺序阅读仓库

因为这个技能没有配套脚本或辅助文件，所以不存在隐藏的安装层。先读 SKILL.md，再把其中的指导当作实际执行规格。如果你是在真实项目里应用它，就要把建议映射到你现有的 tokens、组件和 CSS 规范上，而不是逐字照搬。

frontend-design 技能 FAQ

frontend-design 只适合新项目吗？

不适合。frontend-design 技能同样适用于重设计、组件焕新，以及那些现有 UI 功能正常、但看起来扁平、过时或不一致的视觉升级场景。

它和普通提示词有什么区别？

普通提示词往往只会生成一次性的 UI 想法。frontend-design 提供的是一份可重复使用的 frontend-design 指南：先选方向，定义系统，再在实现过程中保持界面一致。

frontend-design 适合 UI Design 新手吗？

可以，只要你能清楚描述自己的产品。这个技能通过要求你提前说明受众、语气和视觉方向，减少猜测成本。新手如果提供具体示例，而不是抽象形容词，通常会得到更好的结果。

什么时候不该用这个技能？

如果你只需要逻辑、数据接线，或者一个不强调视觉表现的快速功能原型，就可以跳过 frontend-design。如果项目需要严格遵守品牌规范，但你又无法提供品牌规则或设计约束，它也不适合。

如何改进 frontend-design 技能

在第一次运行前提供更强的输入

最好的 frontend-design 安装，往往从具体信息开始：产品类型、目标用户、内容长度、平台，以及它应该和普通应用有什么不同。如果你要做仪表盘，就说明哪些指标最重要；如果你要做落地页，就说明希望用户完成什么转化动作。

提供能塑造系统的边界

当你明确哪些内容必须保持不变时，frontend-design 的表现会更好：组件库、框架、颜色限制、可访问性要求、响应式断点或动效上限。这些边界能帮助技能做出更利落的视觉系统，而不是滑向装饰堆砌。

先检查一致性，再看新意

最常见的失败模式是风格漂移：字体太多、间距不统一，或者装饰元素抢了信息的注意力。审查输出时，重点看字体系统、间距节奏和表层处理是否都在支持同一个想法。

用精确反馈继续迭代

如果第一版已经接近目标，就用具体问题来改进 frontend-design 技能，比如：“hero 很强，但这些卡片太普通了”，或者“保留布局，但让它更有编辑感，并减少 chrome。” 精确反馈通常比简单说“再设计一点”更能得到高质量的二次输出。