frontend-design

这玩意儿干嘛的？

让 AI 生成的前端界面告别「AI 味」，产出商用级精致界面。118,211 颗星，Claude Code 官方出品的王牌技能。不管是 Landing Page、Dashboard、React 组件还是纯 HTML/CSS 布局，它都能生成有设计感的代码，从视觉到交互到动效一次搞定。

为什么值得装？

普通 AI 生成的代码配色土、布局平、一股「模板感」。frontend-design 强调设计思维——在做代码之前先想清楚产品调性、视觉方向和差异化策略。装了这个 Skill，AI 不再只会输出「能用」的代码，而是能输出「好看」的商用级界面。省下一笔设计费，效率提升一大截。

怎么用？

1. 告诉 AI 你要做什么页面（网站、组件、落地页、Dashboard 等）
2. AI 会先做设计思考：确认目的、调性、约束条件，选定一个极端设计方向
3. AI 输出完整的前端代码，涵盖 HTML/CSS/JS 或 React/Vue，带动效和细节打磨

常用命令：直接描述需求即可，如「帮我做一个 SaaS 定价页面，要高级感」。

核心功能

功能	说明
设计思维先导	做代码前先分析目的、调性、差异化策略
精选字体搭配	避免 Arial、Inter 等烂大街字体，选专属 display + refined body 字体
动效编排	CSS 优先，React 用 Motion 库，聚焦加载时的 staggered 动效
空间构图	支持不对称、叠加、斜向流、大留白或受控密度
背景氛围	纹理、噪点、几何图案、渐变网格、层次透明感