KNOWLEDGE NOTES

Knowledge Notes

Explore curated knowledge, course notes and methods, with their existing content and sources preserved.

These notes are in Chinese; English translations are not yet available.

287knowledge notes
Product Design & UX / AI 产品与辅助设计

AI 辅助 UX·体验/UI 设计阶段(用 AI 生成美观UI·设计系统·配色·交互状态·微文案·UI转代码Figma·响应式 的提示词与流程)

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 产品的产品经理,术语行内解释。

AI界面设计设计系统交互状态Chinese notes