/impeccable shape教程写代码之前先规划UX/UI【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable 是一个面向 AI 编码助手的前端设计技能包它把设计语言注入你的 AI 工作流。其中的/impeccable shape命令专门用来在写代码之前先规划 UX/UI通过结构化提问帮你想清楚做什么、给谁用、怎么算成功最终产出一份经过确认的设计简报Design Brief——而不是直接堆代码。这个教程带你完整走通 shape 的规划流程。为什么写代码之前要先做 UX 规划直接让 AI 生成界面你大概率会得到熟悉的AI 味Inter 字体、紫蓝渐变、卡片套卡片、每个标题上方一个圆角图标块。问题不在代码质量而在于跳过了设计决策。shape的思路恰恰相反先规划再动手。它刻意遵循一条铁律——shape 永不写代码只负责回答三个问题这个界面要解决什么问题谁会使用它处于什么状态什么情况下算做好了完成规划并得到你的确认后再交给构建类命令去实现返工率会低得多。shape 命令如何工作三个阶段shape 的完整执行逻辑定义在 skill/reference/shape.md 中流程分为三个阶段阶段名称做什么Phase 1发现式访谈每轮问 2~3 个相关问题聚焦目的、用户、成功标准再追问内容与边界Phase 2确定设计方向全新界面时进入视觉方向与概念决策详见 skill/reference/new-work.mdPhase 3撰写设计简报输出最小可用简报提交给你确认或一轮修正然后停在这里注意它不会向你索要 CSS 数值或让你从预设审美模板里选——视觉方向的归属是后续构建流程不是规划阶段。一份标准设计简报包含什么Phase 3 产出的简报最多 7 个板块任务清晰时只用 3~5 条要点即可任务与受众谁来了、他们的场景与需求成果与验证核心任务、成功标准、真实证据选定方向视觉权威、结构/交互主张、焦点时刻范围与边界保真度、广度、明确不碰的部分anti-goals状态与范围内容的数据量级最小/典型/最大交互与布局层级、拓扑、响应式策略——只写意图不写 CSS约束与未决问题平台、可访问性、构建者不许自己发明的决策点快速上手3 步开始规划第 1 步安装 Impeccable在项目根目录运行npx impeccable install它会检测你的 AI 工具目录如.claude、.cursor、.codex等并完成安装。第 2 步初始化设计上下文在你的 AI 编码工具中运行/impeccable initinit会区分你的界面属于品牌类营销、落地页还是产品类应用 UI、仪表盘并写入 PRODUCT.md 等设计上下文供后续所有命令读取。第 3 步对目标功能执行 shape/impeccable shape 设置页命令会进入发现式访谈每轮 2~3 个问题你回答后它再追问。信息充分后它生成设计简报并停下等你确认。一个典型的工作流/impeccable shape 仪表盘 ← 规划访谈 产出简报确认通过 /impeccable craft 仪表盘 ← 构建按简报实现并可视化迭代 /impeccable critique 仪表盘 ← 复查UX 设计评审 /impeccable polish 仪表盘 ← 收尾对齐设计系统准备上线shape只负责前半场craft是先 shape 后构建的完整流程适合不想手动切换命令的场景。所有 23 个命令一览见 skill/SKILL.src.md。新手常见误区不要跳过访谈轮次。哪怕 prompt 写得很详细也至少留一轮回答用于确认 AI 的理解无误。不要提具体视觉要求。用紫色渐变不该出现在 shape 阶段——那是方向的决策属于下一阶段。简报不是给 AI 看的废话。简报是你确认的设计契约修正一轮比返工十轮代码便宜得多。确认后再停。shape 结束的标志是简报被确认而不是开始生成代码如果你发现它直接写了代码说明用错了命令。小结/impeccable shape的价值在于把设计决策从代码生成过程里剥离出来先想清楚再动手。装好 Impeccable、跑过init后下次开新界面前先敲一行/impeccable shape 功能——规划 10 分钟省掉数小时的推倒重来。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考