用途:hi-fi-design 是一套面向高保真、精致设计工作的设计流程提示词,资料说明系统提示词要求 Claude 在开始任何设计前先调用它。
主要能力与流程:资料给出的通用设计流程为:(1) 提问;(2) 查找现有 UI kit 并收集设计上下文,复制所有相关组件、阅读所有相关示例,找不到就询问用户;(3) 文件开头写明假设、上下文与设计推理,并留出设计占位,尽早给用户看;(4) 尽快构建设计并再次展示,附上后续步骤;(5) 用工具检查、验证并迭代设计。
设计上下文:资料强调好的高保真设计不从零开始,而应扎根于已有设计上下文。可请用户导入代码库、寻找合适的 UI kit 或设计资源,或提供现有 UI 截图;导入菜单中可链接本地代码库、提供截图或 Figma 链接,也可链接另一个项目。从零虚构完整产品是最后手段。卡住时可列出设计资产、ls 设计系统文件。某些设计可能需要多个设计系统。可使用起始组件(如设备框架)获得高质量脚手架。
多方案展示:在一页展示多个设计选项时,可在单一全尺寸响应式原型加调整面板,与垂直堆叠的锚定选项卡片之间选择。后者中,每轮选项为独立 section,最新一轮在最上方,每个选项有稳定 id(1a、1b、2a…),需在 helmet 中包含 <meta name="design_doc_mode" content="canvas">,由宿主提供平移缩放。样式放在 helmet 的一个 style 块中,每轮一个 section 作为根的直接子元素。新一轮插入到已有 section 之上,不重排、不重编号、不删除旧轮次。
设计建议:资料要求多提问,尽量给出 3 个以上跨维度变体,混合符合既有模式的方案与新颖交互,包含有趣布局、隐喻和视觉风格;部分选项用颜色或高级 CSS,部分用图标部分不用;从基础逐步走向创意。目标是探索可混搭的原子变体。若无图标、资产或组件,画占位符优于勉强做真实效果。
限制:资料未提供收费、价格、平台支持范围等信息,暂未提供。