Finesse UI 界面设计

面向界面设计的执行约束

finesse-ui 解决的问题不是“生成一个页面”，而是让大模型在写 UI 前先把设计语域判断清楚：这是品牌展示、产品工具、移动 H5，还是只涉及单个组件。它把任务拆成可检查的路由：先读取 .finesse/log.json，确认已有构建记忆；再判断 brand、product、h5，并对 Images: 资产来源做诚实声明。

核心工作方式

技能按“底材 + 结构 + 动效 + 检查”组织：

• brand：优先 design-dna.md 的颗粒、晕影、展示字体、英雄区深度，再选择 hero-engines.md 或 motion.md 的动效路径。
• product：优先 product-ui.md 的表面、卡片、KPI、密度，再按页面职责读取 workflow-ui.md、ai-console.md 或数据可视化材料。
• h5：先锁定手机 viewport、safe area、触摸目标，再包裹 brand、product 或 commerce 的内容规则。

它会持续应用“craft floor”：避免纯 #fff/#000、廉价阴影、低对比、自动套用同一套 hero 动效。单按钮、输入框、卡片、弹窗会走 component-scope.md，要求输出完整状态而不是只给静态视觉。

边界与注意点

这个技能适合需要明确设计决策的界面构建，不适合直接拿来批量套模板。它强依赖 brief：若需求只说“做一个页面”，必须先补齐 register、目标设备、数据来源、动效预算。移动端不是缩小版桌面页；产品后台也不该继承品牌页的颗粒、晕影和大标题语法。