Frontend Design 是一套前端视觉设计指导，来源于 anthropics/claude-code，适用于构建新 UI 或重塑已有界面的场景。它的定位不是某个可运行的软件，而是设计方法与评判准则，帮助使用者在做前端界面时形成独特、有意图的视觉方向。
用途 该技能面向需要做出视觉设计决策的任务：当要新建界面、重新设计既有界面，或在设计方向、字体、美学基调上需要指导时使用。资料中把它比作为一家以独特视觉识别著称的设计工作室担任设计主管：客户已否决过显得陈词滥调或套模板的方案，付费购买的是独特的观点，因此需要在配色、字体与布局上做出刻意、有主张、贴合本项目简报的选择，并在合理时承担审美风险。
主要能力与设计原则 资料给出的原则包括：
紧扣主题：如果简报未指明产品或主题，先自行确定一个具体主题、受众与设计的主要任务，并向客户确认。主题所处行业、题材、材料与语言才是独特视觉选择的来源——为 8–11 岁女孩设计的玩具与面向金融分析师的仪表盘在美学上会非常不同。设计中应始终使用简报的真实内容与主题。
首屏英雄区：网页设计中，首屏是观众最先看到的部分。应以主题世界中最具代表性的东西开场，形式可取标题、图片、动画、实时演示、可交互瞬间等。选择要有意图，并特别指出“大数字加小标签、辅助统计与渐变强调”是默认处理，只在确实最佳时才用。
字体：字体承载页面个性。展示/标题文字与正文不必使用不同字体，用一套或两套字体即可；若用两套，两者要明显区分。应刻意选择字体，而不是随手使用在任何项目都会用的默认字族，并按 The Elements of Typographic Style 的默认指引建立清晰的字号阶梯，配合有意图的字重、字宽与间距。当字体作为标题或视觉元素出现时，字体处理本身应是设计的积极组成部分，而非内容的neutral传递载体。正文默认行长小于 80 字符；衬线字体可略长，且衬线正文行高应略大于无衬线。
需避免的默认排版处理：仅对标题中单个词或短语做强调（如斜体/加粗或换色）；标签使用全大写；在内容上方添加不必要的排版标签。
视觉结构即信息：轮廓、边框、编号、引导标签、分隔线、标签等结构装置应编码内容的有用信息，而非装饰。许多通用设计使用编号标记（01 / 02 / 03），只有在内容确实是序列（如分步流程或时间线）时才恰当，添加编号前要确认内容真的是序列。
动效克制：非用户触发动效应少而有意，仅用于吸引注意。一个整体编排的瞬间（一次页面加载序列或一次揭示）比零散效果更好；每个区块的淡入上滑入场与每张卡片的悬停过渡是通用默认，读起来像 AI 生成。回应人的动作（打开、展开、确认）的动效是受欢迎的，因为它展示了什么发生了变化。
文案：设计简报常常不含真实内容，需要自行提出文案与占位内容。文案和设计本身一样容易让方案显得模板化。
流程：计划、对照简报审查、构建、批判 先基于客户设计简报头脑风暴一份简短设计计划，形成紧凑的令牌系统：
颜色：用 4–6 个命名的十六进制值描述核心基础色板。 字体：使用的字体及其角色。 布局：用一句话散文描述与 ASCII 线框图来构思和比较布局方案，并包含对齐指导（内容应左对齐、居中还是两端对齐）。 原则：使本页独特的高层指导。
然后在构建前对照简报审查该计划：如果任何部分读起来像是你为任何类似页面都会产出的通用默认（可以试着用类似提示走一遍看是否得到相似结果），而非为本简报所做的选择，就修改该部分，并说明改了什么、为什么。只有在确认设计计划的相对独特性之后，才按修订后的计划开始写代码。写代码时要注意 CSS 选择器优先级的组织，容易生成互相抵消的类（尤其是像 .section 这类基于类型的选择器与 .cta 这类基于元素的选择器），在区块之间的 padding/margin 上尤其常见。
克制与自我批判 把大胆用在一个地方：让一个元素成为令人记住的东西，让周围保持安静与克制，剪掉不为简报服务的任何装饰。在不为宣扬的情况下达到质量底线：响应式适配到移动端、可见的键盘焦点、尊重减少动效偏好、视觉可访问、配色和谐。构建过程中自我批判，若环境支持可截图检视——“一图胜千 token”。资料还引用 Chanel 的建议：出门前照镜子，去掉一件配饰。人类创作者有记忆并总在尝试新东西，如果有地方快速记下已尝试的方案，对后续轮次有帮助。
设计中的文案写作 文字出现在设计中只有一个理由：让人更容易理解和使用。它是设计内容，不是装饰。应以对待间距和色彩的同等意图与极简态度对待文案。动笔前先问设计需要说什么、怎样说最好地帮助人导航体验。
从终端用户视角书写：用用户能懂的简单语言命名事物，而不是按系统实现方式命名（用户管理的是通知，不是 webhook config）。用平实语言描述某物是什么或做什么，而不是推销它。对新用户具体、可读永远好过耍聪明。
默认使用主动语态：CTA 应确切说明使用后会发生什么，如“保存更改”而非“提交”。一个动作在整个流程中保持同一名称：写着“发布”的按钮产生的提示也应说“已发布”。界面词汇是用户在产品中导航的路标，一致与连贯是人们熟悉产品的方式。
把失败与空状态当作引导的时刻，而非情绪表达：用界面的语气（而非某个人的语气）解释出了什么问题、如何修复。错误不道歉，也绝不对发生了什么含糊其辞。空屏幕是行动的邀请。
保持对话式语气：朴素的动词、句子式大小写、无填充词，语气与品牌和受众匹配。让每个文字元素只做一件事。
AI 生成设计的常见默认特征（用于校准） 资料列举了当前 AI 生成设计常聚集的一些特征：暖奶油色背景（接近 #F4F1EA）配高对比衬线展示字体和陶土/暖粘土色强调（常接近 #D97757，即 Anthropic 自己的 Claude 交互强调色，因此用在用户简报上会被读作“tell”）；近黑背景配单一明亮酸绿或朱红强调；大报风格布局，配发丝细线、零圆角、密集的报纸式分栏；SaaS 卡片套件——内容被切成相同的圆角卡片、无视层级统一用一个圆角、每张卡片下同一个柔和灰阴影（rgba(0,0,0,.1)），以及作为装饰的渐变洗色；无论主题为何都出现的模板式外观——每个标题上方有拉开字距的全大写引导标签、用间隔号连接的元信息字符串（'A · B · C'）、用“WORD — fragment”加空格长破折号构成的标签、用带色近黑（#0B0B0B、#111）代替黑色、用等宽字体做小数据标签、在链接和按钮文字后追加“→”。资料指出，这些特征对某些简报是正当的，但它们是默认而非选择，且无论主题都会出现。当简报明确了视觉方向时应严格遵循，简报自己的措辞始终优先，包括它要求上述某种外观时。当简报留下自由轴时，不要把这自由花在这些默认之一上。
适用场景 适用于网页与界面视觉设计任务，尤其是需要区别于模板化产出的新界面构建、既有界面重塑、设计方向与字体方案制定、以及需要自拟文案与占位内容的场景。
限制 资料未提供具体的软件安装、命令行调用或平台支持信息；该内容为设计指导性文本。资料列出的是应避免的默认特征，并明确这些特征对某些简报仍是正当的，是否采用取决于简报要求。关于收费、价格、可用平台、集成方式等信息，资料中暂未提供。