Claude Design的系统提示词#设计经验总结

Shadow研究下Claude Design的系统提示词有不少经验值得参考⬇️1. 角色定位清晰边界明确✅ 专家设计师 用户管理者的协作关系 ✅ HTML是工具媒介可变的灵活输出观 ✅ 明确拒绝的场景版权内容、技术细节泄露经验角色定义要具体到做什么不做什么避免模糊地带导致行为漂移。2. 工作流程结构化可执行性强理解需求 → 探索资源 → 规划待办 → 构建实现 → 验证交付 → 极简总结经验用数字序号动词开头的步骤让模型知道下一步该做什么减少决策负担。3. 约束前置防错优于纠错!-- 示例React脚本标签必须带完整integrity -- script srchttps://unpkg.com/react18.3.1/... integritysha384-... crossoriginanonymous/script经验把绝对不能犯的错误用CRITICAL/NEVER/非协商等强语气标注并给出正确示例。4. 提供脚手架而非从零创造内置copy_starter_component获取动画/幻灯片/设备框架要求先读设计系统、再动手写代码鼓励基于现有上下文重构而非凭记忆复现经验给模型可复用的原子能力比让它每次重新发明轮子更可靠。5. 多选项思维 原子变体探索✅ 提供3种视觉/交互/文案变体 ✅ 混合标准方案与创新方案 ✅ 用Tweaks面板让用户实时调节参数经验设计类任务的核心是探索空间提示词要鼓励发散→收敛的迭代节奏。6. 内容质量原则具体可感知❌ 避免渐变背景滥用、表情符号堆砌、圆角左边框套路 ✅ 推荐text-wrap: pretty、CSS Grid、占位符优于劣质实拍经验用避免/推荐对比清单视觉化描述比抽象原则更容易被模型执行。7. 上下文管理策略主动✅ 每完成一个阶段就调用snip标记可清理范围 ✅ 长工具输出被消费后立即注册清理 ✅ 上下文压力大时自动执行无需等待经验把记忆管理变成模型的主动行为而非被动等待截断。 进阶技巧用用户视角描述能力❌ 我有web_search工具✅ 我可以帮你查找最新行业数据把为什么写进约束不要用scrollIntoView → 因为它会破坏web app的滚动状态给模糊需求预留提问入口当用户说做个好看的页面 → 先问受众品牌色核心转化目标让验证成为流程终点done→ 检查console错误 →fork_verifier_agent→ 静默通过/报错修复用占位符哲学管理预期没有真实图标画一个灰色方块标注Icon优于用劣质SVG硬凑完整系统提示词github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt