Frontend Design 是一套关于前端界面视觉设计的指导性技能，适用于构建新 UI 或重塑现有界面的场景。它的核心立场是：把设计任务当作小型工作室设计负责人的工作，为客户提供无法被误认为他人的视觉识别，做出有意图、有观点的调色板、字体与布局选择，并承担一个可被论证的审美风险。
一、用途 该技能用于在新建界面或改造既有界面时提供审美方向、字体排印与整体设计决策的指导。它强调设计应扎根于具体主题：如果需求没有明确产品或主题是什么，设计者应先自行确定一个具体主题、其受众以及页面的单一任务，并说明这一选择。主题自身的世界——材料、工具、器物与行话——是独特选择的来源。
二、主要能力与设计原则
- 英雄区即论点：以主题世界中最具特征的事物开场，形式可以是标题、图像、动画、实时演示或交互时刻。文中提醒，大数字配小标签、辅助统计与渐变强调是模板化答案，只有在确实最佳时才使用。
- 字体承载页面个性：有意图地搭配展示字体与正文字体，避免使用在任何项目都会选的字体家族，建立清晰的字号层级，并在字重、字宽与间距上做出有意选择，使字体处理本身成为设计中令人记住的部分。
- 结构即信息：编号、眉题、分隔线、标签等结构装置应编码内容的真实信息，而非装饰。文中指出，许多通用设计使用 01/02/03 编号标记，但只有当内容本身确实是序列（如真实流程或有序时间线）时才合适。
- 有意图地使用动效：考虑动画在何处、是否能为主题服务，例如页面加载序列、滚动触发揭示、悬停微交互、氛围效果。编排得当的单一时刻通常比零散效果更有力；但有时少即是多，过多动画会强化“AI 生成”的感觉。
- 复杂度与愿景匹配：极繁方向需要精细执行，极简方向需要在间距、字体与细节上精确。优雅就是把选定的愿景执行好。
- 谨慎对待文案：设计需求往往不含真实内容，需要设计者自行撰写文案；文案可能让设计显得和设计本身一样模板化。
三、使用方式与流程 流程为：头脑风暴、探索、规划、批判、构建、再次批判。先根据设计需求头脑风暴一份简短的设计方案，建立紧凑的令牌系统，包括颜色、字体、布局与标志性元素：颜色以 4–6 个命名十六进制值描述调色板；字体为 2 个以上角色选择字体（克制使用的有个性的展示字体、互补的正文字体，以及必要时用于说明或数据的工具字体）；布局用一句话散文描述与 ASCII 线框图来构思和比较；标志性元素是页面将被记住的单一独特元素。
随后在构建前对照需求审查该方案：如果任何部分读起来像对任何类似页面都会产出的通用默认，而非针对该具体需求的选择，就修改该部分，并说明改了什么、为什么。确认设计方案的相对独特性后，才按修订后的方案写代码，所有颜色与字体决策都从方案推导。写代码时要注意 CSS 选择器特异性，避免类之间相互抵消（尤其是 .section 这类基于类型的选择器与 .cta 这类基于元素的选择器），这在区块之间的内边距/外边距上经常发生。文中建议尽量在思考中完成规划与迭代，只在较有把握能取悦用户时才展示想法。
四、克制与自我批判 把大胆用在一处：让标志性元素成为唯一令人记住的东西，周围保持安静与克制，删掉不服务于需求的装饰。不冒险本身也可能是一种风险。在不声张的前提下达到质量底线：响应式支持到移动端、可见的键盘焦点、尊重减少动效设置。构建过程中自我批判，环境支持时截图检查。文中引用香奈儿的建议：出门前照镜子，摘掉一件配饰。人类创作者有记忆并总尝试新东西，因此若有空间快速记录尝试过的东西，会有助于后续迭代。
五、关于设计中的写作 文字出现在设计中只有一个理由：让人更容易理解，从而更容易使用。文字是设计材料，不是装饰。写任何内容前先问设计需要说什么，以及怎样说最能帮助人导航体验。从屏幕另一端用户的角度写作：按人们控制和识别的事物命名，而不是按系统如何构建命名（例如人们管理的是通知，不是 webhook 配置）。用平实语言描述功能做什么，而不是推销它。具体永远好过聪明。默认使用主动语态：控件应准确说明使用时会发生什么，如“保存更改”而非“提交”。一个动作在整个流程中保持同一名称，按钮写“发布”，提示就写“已发布”。把失败与空状态当作提供方向指引的时刻，而非情绪表达：解释出了什么问题、如何修复，用界面的口吻而非人的口吻；错误不道歉，也从不含糊其辞；空屏幕是行动的邀请。保持对话式且调校过的语域：平实动词、句子大小写、无填充词，语气与品牌和受众匹配。每个元素只做一件事：标签负责标注，示例负责演示，不让任何元素悄悄身兼二职。
六、适用场景与限制 该技能适用于需要独特视觉识别的前端界面设计任务，包括新建 UI 与重塑既有 UI。它提供的是设计方法与判断标准，而非具体组件库或代码模板。文中未提供收费、价格、平台支持范围或具体安装命令等信息。