Will「AI 辅助 UX 工作流」体验/UI 设计区(105 篇 .md、~24 个技法子主题)综合提炼:产品经理在'界面/视觉/体验'这一阶段,有哪些活能交给 AI 加速、怎么写提示词、用什么工具链、坑在哪。覆盖九类工作任务:① 生成美观 UI(对标 Mobbin 级国际审美的视觉基准线);② 为参考网站/参考图生成设计系统与 Design Tokens(把'感觉'变成可复用的颜色/字体/间距/圆角变量);③ 品牌色与色彩含义探索;④ 边界交互状态的穷举(用 5 大类清单逼 AI 把成功/用户错/系统错/加载/边界决策全列出来,附 UI 状态对照表);⑤ 通用 UX 微文案生成(3C 原则 + 情绪/JTBD/决策阶段分析 + A/B/C 三版本);⑥ UI 截图转代码 / 转 Figma(图片→Figma Make 还原提示词、图片→低保真线框、HTML→Figma 插件 html.to.design、Figma 默认视觉系统兜底);⑦ Figma 视觉优化(只换皮不动结构的视觉层升级、参考图驱动的 token 提取);⑧ 响应式多平台(截图→移动优先语义化 HTML+CSS 变量+WCAG AA);⑨ UI Skill(Impeccable 21 个原子命令 adapt/bolder/clarify/distill/polish… + Awesome-design 拆解 Linear/Stripe/Apple 的 DESIGN.md 当可迁移设计资产)。另含 4 篇'什么是好的体验/界面/交互设计 + UI 做不好的卡点'的判断框架,帮 PM 知道审稿时该看什么。工具链涉及 Figma Make / html.to.design / Stitch / Land-book / motionsites / Higgsfield / Untitled UI。与 material-design-system(设计系统底层规则)、refactoring-ui(视觉细节手册)分工:那两篇讲'规则本身',本篇讲'怎么用 AI 把这些规则快速产出成 UI/设计系统/文案/代码'的提示词与流程。每节带 Why / 何时用 / 反例 + 可复用提示词骨架。读者=做 AI 产品的产品经理,术语行内解释。
Apple 设计的视觉'原子层'决策手册。颜色(系统语义色·宽色域·Liquid Glass 配色)/ 字体排版(SF·NY·Dynamic Type·各平台最小字号)/ 布局(分组·层级·安全区·渐进披露)/ 空间布局(visionOS 视野·深度·比例)/ 材质(Liquid Glass vs 标准材质·厚薄选择)/ 动效(目的性·可选·visionOS 防晕)/ 暗黑模式(非反转·对比度 4.5:1/7:1)/ 图片(@1x/2x/3x·格式选型)/ 应用图标(分层·跨平台形状·Icon Composer)/ 界面图标 ICON(光学居中·矢量)/ SF Symbols(4 渲染模式·9 权重·变体·动画·自定义)/ 品牌(让位于内容)。每条带最佳实践 + 反例 + 平台差异。
Google Material 3 (M3) 设计系统的核心主张与基础维度提炼,从 Will 的 Notion 设计笔记区(123 篇 .md,12 个分类)综合而成。覆盖:① M3 的灵魂——动态色彩 Dynamic Color(从壁纸/内容提取源色→算法生成 5 关键色→色调调色板 0-100→26 个语义颜色角色 Color Role,实现'个性化+自动深色模式+用户可控对比度'四件事)与底层 HCT 色彩模型(Hue 色相/Chroma 色度/Tone 色调,比 HSL 更贴近人眼);② 颜色角色体系(Primary/Secondary/Tertiary/Error/Surface + Container + On + Variant 命名法,3 档对比度 标准/中/高 对应 3:1 与 7:1);③ Type Scale 字号比例(15 样式 5 大类 Display/Headline/Title/Body/Label,Major Second 1.125 比例,可变字体 4 轴 字重/字级 grade/宽度/光学尺寸);④ Shape 形状(7 级圆角 None→Full + 圆角/切角家族);⑤ Tonal Elevation 色调高度(0-5 级 dp,M3 用色调差异+遮罩替代阴影);⑥ Layout 布局(Window Size Class 窗口尺寸类 Compact<600/Medium600-840/Expanded840-1200/Large/XL,信息密度,48dp 触控目标);⑦ Adaptive 自适应(3 策略 隐藏显示/浮动/重排);⑧ Motion 动效(缓动 emphasized/standard × duration 200-500ms);⑨ Interaction States 交互状态层(hover+8%/focus+10%/press+10%/drag+16% 不透明度叠加);⑩ Accessible 无障碍(WCAG 对比度 3:1/4.5:1)与 ⑪ Content 内容设计(20 条英文 UI 文案规则)。对 PM 的价值:审设计稿时拿它当 checklist(对比度够不够/触控目标够不够大/颜色角色用对没/文案是否句首大写),理解'设计令牌 design token'与'语义化颜色'为何能省协作成本,以及 M3 哪些是可照搬的硬约束(无障碍/触控尺寸)、哪些是可偏离的风格选择(动态色彩/圆角/字号)。与 [[nngroup-visual-design-systems]] 分工:那篇讲'设计系统是什么'的通论(Design System vs Style Guide,采用/调整/自建),本篇讲 Material 3 这一个具体设计系统的内部主张与数值规则。读者=产品经理,术语行内解释,每节带 Why。
Google UX 证书 Course 5(视觉设计/Mockup/设计系统)+ 响应式网站。视觉 4 元素(字体/颜色/图标/线条尺寸形状图片)+ 颜色(60-30-10 法则 + 色彩心理 + WCAG 对比 4.5:1 + 色盲/低对比/光敏无障碍)+ 字体层级/易读性 + 图标(操作 vs 补充 + 文字标签 + 品牌)+ 布局(网格/容器/留白)+ 视觉原则(强调/层级/比例/统一与变化 + 格式塔)+ Mockup(静态高保真)+ 设计系统(4 组成 + UI 模式 4 层级 + 5 好处 + Sticker Sheet + Figma 组件/实例 + Material/Polaris/Apple HIG/Fluent/USWDS)+ 响应式(原生 App vs 响应式 Web 优劣 + 汉堡菜单/卡片/轮播/CTA)+ 设计伦理(注意力经济/暗黑模式/边缘群体)。面向 PM
Nielsen Norman Group「视觉设计」主题下设计系统与图标子集 19 篇精华。六大簇:①设计系统与风格指南(Design System=父,含组件库 Component Library/模式库 Pattern Library/风格指南;Style Guide=子,分内容/品牌/前端三类;三种落地法采用 adopt/调整 adapt/自建 create 的成本-定制-品牌一致性三档权衡;NASA 1976/Material/Carbon/USWDS 范例)。②图标与示能 Signifier(图标可用性=识别度 Recognition 是否认出形状 + 解释性 Interpretation 是否懂含义;4 质量标准 可发现性 Findability/识别度/信息气味 Information Scent/吸引力 Attractiveness;离散 vs 上下文测试矩阵;手风琴 Accordion 标识符实验 11 原型 5 变体→Caret 下拉符最优·右箭头≈无图标;软盘=保存 83%/圆箭头=同步刷新 73%/下箭头+容器=下载 78%;闪光 Sparkles 图标 AI 滥用·107 人无一人联想 AI·16.82% 误读收藏)。③视觉风格演变(拟物 Skeuomorphism 学习辅助 vs 视觉趋势→扁平 Flat→新拟态 Neumorphism 低对比痛点;玻璃拟态 Glassmorphism 自 2020 透明度+背景模糊+描边渐变·Apple SwiftUI/Microsoft Fluent Acrylic/Vision Pro·WCAG 对比度风险)。④可点击元素识别(Beyond Blue Links 5 类提示·点击成本 Interaction Cost)+横幅盲视 Banner Blindness(选择性注意·邻近毒化·烫手山芋效应·伪广告·自 1997 持续)。⑤动画与动效(6 用途:反馈/状态切换/空间隐喻导航/示能/吸引注意/注意力劫持暗黑模式;克制原则)。⑥视觉测试(态度 Attitudinal vs 行为 Behavioral;5 秒测试/首次点击/偏好测试/开放闭合词选;Microsoft Desirability Toolkit 118 词卡 2002 控制词汇·删减至 25 词内·维恩图分组;情绪板 Mood Board 4-5 关键词→视觉拼贴)。另含 3 篇研究/团队方法 misfit(亲和图法/UX 映射视觉/群体思维/NPS 缺点)简述并标注归属。读者=产品经理,术语行内解释,决策导向(何时用/怎么选/反例),保留全部数字。
Adam Wathan & Steve Schoger《Refactoring UI》全套笔记精华(50+ 条可照做的小技巧)。核心立场:好看的 UI 不靠艺术天赋,靠一套能背下来的具体规则——把'凭感觉'换成'查清单'。八章主线:①开局心法(从功能而非布局起步·黑白灰先行·限定选项·提前定系统,把每个反复纠结的细节变成规则)。②视觉层级 Visual Hierarchy(让重要的跳出来:不只靠字号,靠字重+颜色 3 档;次要内容靠'弱化'而非'强调';能不用标签就不用;按钮按主/次/辅 3 级分,危险操作不必又大又红;视觉层级 ≠ HTML 文档层级)。③留白与间距(从过多留白开始往回删·至少差 25% 的间距/尺寸阶梯·组间距 > 组内距防歧义·网格被高估固定宽度常更好·别按比例缩放·不必填满屏幕)。④配色(用 HSL 不用 hex·一套要 8-10 档灰+1-2 主色×9 阶+语义辅助色·预先定色阶 100-900·灰可带冷暖·调亮调暗同时提饱和·靠转色相提亮防发灰·WCAG 4.5:1/3:1 对比+换深浅方向防过艳·不能只靠颜色要配图标/箭头)。⑤字体排印(type scale 手挑不用公式·行长 45-75 字符·行高随宽度和字号反向变·基线对齐不居中·长文左对齐·链接不必都上色·全大写要加字间距·用 px/rem 不用 em)。⑥深度(光从上方来→凸起上亮下阴/凹陷上阴·阴影分大柔+小锐两层·5 档阴影表高度·扁平也能用明暗+实色阴影+元素重叠造深度)。⑦图片(用好照片别凑合·背景图配遮罩/发光保证文字对比·别放大小图标别缩小截图·用户上传图固定显示框+cover)。⑧收尾(少用边框改用阴影/底色/间距·彩色顶边框一招提质感·美化背景·重视空状态·跳出组件惯例)。外加 3 个 before/after 实战拆解(内容页/复杂表单/数据面板)。读者=做原型的 PM,术语行内解释,每条带 Why + do/don't,数值全保留。
