design-frontendlisted

# design-frontend ｜ 前端设计通用原则专项 > 本技能是 design-workflow 主技能抽离出的**专项方法论**，专治"把数字产品/网页/App 界面做得不像 AI 默认模板、信息结构诚实、动效克制有意图"。 > 来源署名见 `../references/来源署名/anthropics-frontend-design.md`（Anthropic 前端设计通用原则文档 · 公开通用原则）。 ## 一、结构装置即信息（编号/眉标/分隔线/标签须承载真相） - **核心**：编号、眉标（eyebrow）、分隔线、标签等"结构装置"应**编码内容真相**，而非装饰。它们要么说明内容本身的秩序，要么一无是处。 - **质疑装饰性编号**：`01 / 02 / 03` 仅当内容**真是序列**（真实流程、带序时间轴、步骤必须按序读）时才用；若只是并列清单，编号是假秩序 → 删掉，改用其他区分手段（间距/分组/图标）。 - **自检**：每条编号/分隔线被删后，读者是否丢失了某条**关于内容本身**的信息？若否，它就是装饰，删。 ## 二、反模板校准（避免 AI 默认观感） > 下面是**需警惕的默认观感**——它们本身合法，但当 brief 未指��某一轴时，别把自由浪费在这些"无意识默认"上。brief 原话优先（它明确要求时照做）。 - **默认观感 A**：暖米白底（近 `#F4F1EA`）+ 高对比衬线 Display + 陶土橙点缀。 - **默认观感 B**：近黑底 + 单一荧光绿 / 朱红点缀。 - **默认观感 C**：报纸式细线规则 + 零圆角 + 密集多栏。 **校准方法**：定稿前自问"换一个相似 brief 我是否也会落到这？"——若答案是"会"，且 brief 没要求，就换一个**为该 brief 定制的**方向。 ## 三、复杂度匹配愿景 - **极简方向** → 功力在间距 / 字 / 细节的精度，不在加东西；**极繁方向** → 需层次、纹理、动效、精雕细节撑住，否则显空。 - **优雅 = 把所选方向执行到位**，而非堆效果。与「信息优先级·主信息唯一」「把大胆用在一处」同源：signature 元素是唯一记忆点，其余安静、克制。 - 自检：删掉一个装饰后整体是否成立甚至更好？若成立，说明它本不该在。 ## 四、文案即物料（UX 写作） - **文案是设计材料，非装饰**：文字出现在设计里，只为让人更易理解、更易使用。带来与间距/颜色同等的自觉性。 - **从用户侧写**：用用户能掌控/辨识的词命名（"管理通知"而非"webhook 配置"）；描述它做什么，而非推销它。 - **主动语态 + 同名一贯**：按钮"发布"→ 提示"已发布"，同一动作全程同名，词汇是导航的路标。 - **失败/空状态是引导时刻，非情绪**：说清错在哪、怎么修（错误不道歉、不模糊）；空屏是行动邀请，不是空白。 - 与「文字」模块区分：本技能管"说什么/怎么写"（内容），主技能 `02-感知物料/文字.md` 管"怎么排/什么字体"（形式）。 ## 五、动效编排时刻 - **一个编排好的"主角时刻" > 零散微动画**：开场序列 / 滚动揭示 / 一处精心设计的入场，比到处撒hover/脉冲更抓人。先问"这段动效服务于哪个 subject 的瞬间"，再决定做不做。 - **额外动画 = AI 生成感信号**：动效过多、过碎会让成品显"AI slop"。同屏同时运动元素**默认** ≤3–5 个——