关于 frontend-design
frontend-design 技能指导开发者根据具体需求设计并实现生产级前端界面。它强调明确的视觉方向、设计令牌、可用代码和提交前自评。
主要功能
- 01梳理需求与界面目标
- 02制定视觉方向和设计令牌
- 03实现可运行的前端代码
- 04细化排版、布局与动效
- 05检查文案和设计一致性
适用场景
- 01为产品需求规划页面视觉风格
- 02实现组件、页面或应用界面
- 03优化界面的布局与细节
- 04提交前检查界面是否符合需求
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/frontend-design确认已加载。
详细介绍
前端设计
这项技能将指导你打造独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并格外注重美学细节与创意选择。
用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能会提供有关用途、受众或技术限制的背景信息。
步骤 1 — 明确需求
如果需求没有明确主题，就自行确定：指出一个具体主题、它的受众，以及页面唯一的用途。继续之前，先说明你的选择。主题本身的世界——它的材质、器具、文物、行话——正是独特设计选择的灵感来源。整个设计都要围绕需求中的真实内容展开。
步骤 2 — 确定方向
在写下一行代码之前，先明确完整的美学方向：
- 用途：这个界面解决什么问题？谁会使用它？
- 调性：选择一种鲜明风格，并贯彻到底。可选方向包括：极简冷峻、混乱繁复、复古未来主义、有机自然、奢华精致、俏皮玩具感、编辑杂志风、粗野原始、装饰艺术几何风、柔和粉彩、工业实用、手工艺感、暗调忧郁、低保真地下刊物风。将这些视为起点——最终方向应当独树一帜。
- 限制条件：框架、性能、无障碍要求。
- 差异化：有什么会让人过目难忘？人们会记住的那个元素是什么？
至关重要：选择明确的概念方向，并精准执行。大胆繁复与精致极简都行得通——关键在于用心设计，而不是一味追求强烈效果。
设计令牌规划
编码前先创建一套精简的令牌系统：
- 色彩：4–6 个命名的十六进制颜色值。鲜明的主色搭配醒目的强调色，效果胜过谨慎、均匀分布的调色板。所有样式都使用 CSS 变量。
- 字体：2–3 种字体角色——适度使用、富有个性的展示字体，互为补充的正文字体，以及按需用于说明文字或数据的实用字体。
- 布局：用一句话描述布局概念，再绘制 ASCII 线框图来检验构想。
- 标志性元素：这个设计最令人难忘的单一元素。
校准检查
构建之前，将你的方案与常见的 AI 设计套路进行对比：
- 暖奶油色背景（约 #F4F1EA）+ 高对比度衬线字体 + 赭红色强调色
- 近黑色背景 + 单一荧光绿或朱红色强调色
- 大报版式 + 极细分隔线 + 零圆角 + 密集分栏
这些只是默认套路，不是有意识的选择——无论主题是什么，它们都可能出现。如果你的方案在没有具体需求依据的情况下落入其中任何一种，就进行调整，并说明改了什么以及原因。如果需求明确指定了视觉方向，就严格遵循。
步骤 3 — 实现
编写可用的代码（HTML/CSS/JS、React、Vue 等），并确保代码：
- 达到生产级水准且功能完整
- 视觉出众、令人难忘
- 风格统一，拥有清晰一致的美学主张
- 每个细节都经过精心打磨
美学参考
字体排印
选择美观、独特且富有个性的字体。字体处理本身就应当成为设计中令人难忘的一部分，而不是中性的内容载体。
- 将独特的展示字体与精致的正文字体搭配使用
- 建立清晰的字号层级，并有意识地设计字重、字宽和字间距
绝对不要使用：Arial、Inter、Roboto，或将纯系统字体栈作为主要字体。不要默认选择 Space Grotesk 等常见的“保险”字体。
色彩与主题
坚持统一的美学风格。鲜明的主色搭配醒目的强调色，效果胜过谨慎、均匀分布的调色板。在 :root 中将所有令牌定义为 CSS 变量。
绝对不要使用：默认的白底紫色渐变，或任何看起来像通用 SaaS 模板的配色方案。
动效
使用动画营造效果和微交互。精心编排的一个瞬间，胜过零散的各种效果。
- HTML/CSS：优先采用纯 CSS 方案。在页面加载时使用
animation-delay错开动画，能带来惊喜。 - React：如果有 Motion 库可用，就使用它。
- 滚动触发的渐显效果和悬停状态应带来惊喜。
- 克制胜过滥用：多余的动画会加重 AI 生成感。
空间构图
采用出人意料的布局。不对称。重叠。对角流动。打破网格的元素。选择宽裕的留白，或有控制的密集布局——绝不要选择平庸的中间地带。
背景与视觉细节
营造氛围和层次——绝不要默认使用纯色。让纹理和效果契合视觉风格：渐变网格、噪点纹理、几何图案、分层透明效果、戏剧化阴影、装饰性边框、自定义光标、颗粒叠加效果。
主视觉
主视觉就是核心主张。开篇就呈现主题世界中最具代表性的事物：标题、图片、动画、实时演示或交互瞬间。“大数字 + 渐变点缀”是模板式答案；只有在它确实最适合这份具体需求时才使用。
结构
结构元素（编号、眉题、分隔线、标签）应传达内容中的真实信息，而非仅作装饰。只有当内容确实按顺序排列时，才适合使用编号标记（01 / 02 / 03）。
CSS 实现说明
- 将所有颜色、间距和字体令牌定义为 CSS 自定义属性。
- 留意优先级冲突：
.section（按类型选择）与.cta（按类选择）经常会互相抵消内边距/外边距。完成前要检查。 - 不要编写会在不同区块间悄悄相互覆盖的类。
文案与内容
文字是设计素材，不是填充物。
- 从屏幕前用户的角度撰写——根据人们能控制的事物命名，而非根据系统的构建方式命名。
- 使用主动语态：“保存更改”，而不是“提交”。整个流程中的操作名称应保持一致。
- 错误信息要说明哪里出了问题，以及如何修复。空状态应邀请用户采取行动。
- 使用句式大小写。使用简单动词。不写填充内容。语气应与品牌和受众相符。
自我评估
把大胆设计集中在一个地方——标志性元素。其余部分保持安静、克制。删掉不符合需求的装饰。
提交前，问问自己：有没有部分看起来像是为另一份需求生成的？修改那部分。
记住：Codex 有能力创作非凡的作品。不要有所保留——全力投入独特且贴合具体需求的构想，展现真正能够创造的成果。