get-shit-done 如何用 /gsd-sketch 在写前端代码前生成可交互的多版式 HTML 对比稿【免费下载链接】get-shit-doneA light-weight and powerful meta-prompting, context engineering and spec-driven development system for Claude Code by TÂCHES.项目地址: https://gitcode.com/GitHub_Trending/getshi/get-shit-done如果你的项目还没有开始写前端组件代码但已经需要确定布局结构、交互模型或视觉方向get-shit-doneGSD的/gsd-sketch命令可以帮你先做一轮一次性 HTML 原型实验每轮草图sketch回答一个设计问题在同一个index.html里生成 2–3 个可切换、可点击的版式变体直接在浏览器里对比选出胜者后再进入正式实现。该命令不需要事先执行 new-project 初始化.planning/sketches/目录不存在时会自动创建见 sketch.md 的 objective 说明。命令入口与参数在支持 GSD 命令的运行时Claude Code或非 Claude 运行时用--text中按以下方式调用参数表来自 docs/COMMANDS.md 的/gsd-sketch一节参数必填作用idea否要探索的 UI 设计问题或方向--quick否跳过 mood 问答直接用idea文本作为设计方向--text否文本模式把交互提问替换成纯文本编号列表用于 Codex、Gemini 等非 Claude 运行时--wrap-up否把胜出的草图决策打包成项目级 skill/gsd-sketch # 交互式 mood 问答 /gsd-sketch dashboard layout /gsd-sketch --quick sidebar navigation /gsd-sketch --text onboarding flow # 非 Claude 运行时 /gsd-sketch --wrap-up # 把胜出草图打包为 skill注意两点命令 frontmatter 声明了requires: [spike]见 sketch.md即依赖 spike 配套命令工作流会主动读取项目里已有的 spike 结论来让草图更贴近真实数据形态。不带参数或只输入frontier会进入 frontier 模式分析现有草图全集主动提出下一轮值得画的草图这是可选分支不是首次使用的主路径。调用后会发生什么按 get-shit-done/workflows/sketch.md 的流程Idea 模式默认会依次执行Mood 问答--quick时跳过一次只问一个问题覆盖三个维度——Feel它应该是什么感觉给我形容词、情绪或氛围、References哪些 App、网站或产品的感觉接近你想象中的、Core action用户在这里做的最重要的一件事是什么。信息足够后它会问一句方向我大概有感觉了开始画还是继续聊只有你明确说开始才会动手。加载 spike 上下文如果项目里有./.claude/skills/spike-findings-*/SKILL.md、.planning/spikes/MANIFEST.md或.planning/spikes/CONVENTIONS.md会读取其中已验证的数据字段名、需求约束如必须支持流式渲染和技术栈约定让 HTML 原型使用真实字段名和真实组件名而不是泛泛的占位内容。没有 spike 则跳过这一步。拆分设计问题把想法拆成 2–5 个设计问题以表格呈现草图编号、设计问题、做法、风险确认后再开始构建。文档明确的好/坏例子好草图问双栏布局感觉对不对坏草图是设计整个 App太宽泛或搭组件库那是实现不是探索。目标技术栈调研检查package.json等确认技术栈核对该框架的布局原语和组件库可用性确保至少一个变体走目标栈的最省力路径。绿地项目或明确只想纯视觉探索时可跳过。建立/更新 MANIFEST写入.planning/sketches/MANIFEST.md包含设计方向、参考对象和草图索引表编号、名称、设计问题、胜者、标签。每个对比稿里有什么每个草图是一个独立目录.planning/sketches/NNN-descriptive-name/三位数字编号 连字符命名内含index.html和README.md。构建规则来自 sketch.md 的 build_sketches 步骤一个 HTML 文件装 2–3 个变体用顶部标签栏切换。第一轮要求戏剧性差异几种明显不同的做法后续轮次在同一方向内做细微打磨变体数最多不超过 4 个。纯 HTML 内联 CSS/JS无构建步骤、无 npm、无框架。每个变体有清晰标签如 Variant A: Sidebar Layout所有文件链接共享主题../themes/default.css。使用真实感内容而非 lorem ipsum有 spike 上下文时用真实字段名。附带草图工具栏和主题切换器见下文工具栏。多版式切换的参考实现见 sketch-variant-patterns.mddiv idvariant-nav styleposition:fixed;top:0;left:0;right:0;z-index:9998;... button classvariant-tab active onclickshowVariant(a)A: Sidebar Layout/button button classvariant-tab onclickshowVariant(b)B: Top Nav/button button classvariant-tab onclickshowVariant(c)C: Floating Panels/button /div div idvariant-a classvariant active!-- 变体 A 内容 --/div div idvariant-b classvariant styledisplay:none!-- 变体 B 内容 --/div对比小元素按钮样式、卡片布局等时改用并排 grid 布局加标签而不是标签页。交互要求不是静态截图sketch-interactivity.md 给出一张必须可交互的清单元素要求按钮点击处理器 可见反馈状态变化、动画、toast表单blur 时校验提交后显示成功状态列表可增删条目有空状态和满状态开关可切换且有可见状态变化Tab/导航点击可切换内容弹窗/抽屉带过渡的开合Hover每个可点击元素都要有 hover 效果下拉可开合、可选中另外三条规则交互元素加transition: all 0.15s ease作为基线假后端——点 Save 要出现短暂加载态再显示成功搜索框输入要过滤写死的结果多状态empty/loading/populated/error的页面要提供循环切换状态的按钮。实现统一用内联script里的原生 JS。工具栏与共享主题每张草图右下角固定一个小型半透明工具栏见 sketch-tooling.md包含三部分主题切换器运行时替换主题 CSS 文件视口预览Phone 375px / Tablet 768px / Desktop 1280px或全宽三档按钮通过调整内容容器max-width实现标注模式hover 时叠加显示间距值、色值 hex、字号。所有草图共享一份 CSS 变量主题见 sketch-theme-system.md:root { --color-bg: #fafafa; --color-primary: #2563eb; --font-sans: Inter, system-ui, sans-serif; --space-4: 16px; --radius-md: 8px; /* 其余颜色、字号、间距、圆角、阴影变量见文档完整模板 */ }主题文件只定义 CSS 自定义属性不写组件样式。每个index.html用一行链接接入link relstylesheet href../themes/default.css文档中给出的变量值是起点示例工作流要求按 mood 问答确定的方向调整颜色和字体而不是照抄默认值。如果草图过程中出现审美分叉这个应该是冷峻还是温暖的感觉做法是各建一个主题文件如midnight.css、warm-minimal.css让用户切换感受而不是口头争论。查看对比稿并选定胜者每个草图构建完成后会给出检查点checkpoint提示你打开文件对比open .planning/sketches/NNN-name/index.html然后针对检查点里写明的对比要点在浏览器里实际点击、切换变体。反馈有三种处理方式会一直迭代到你满意为止选定方向标记胜者进入下一个草图跨变体摘取元素构建一个合成变体如 Synthesis: As layout Cs palette再展示想继续探索构建新变体。定稿时做三件事在README.mdfrontmatter 里写winner: B在 HTML 中标签上加 ★ 指示如A: Sidebar Layout ★ Selected更新 MANIFEST。注意所有变体都保留胜者只是被高亮其余不删除。commit_docs配置为 true 时工作流还会以docs(sketch-NNN): [winning direction] — [key visual insight]的格式提交该草图目录和 MANIFEST。如何判断这一轮草图完成了sketch.md 的 success_criteria 给出了可核对的完成标准.planning/sketches/已创建无需项目初始化每个草图有 2–3 个可对比变体至少一个走目标栈最省力路径你能在浏览器里打开并操作这些草图每个草图的胜者变体已选定并标记所有变体保留MANIFEST.md与当前状态一致提交信息使用docs(sketch-NNN): [winner]格式。磁盘上应看到.planning/sketches/下的结构见 docs/USER-GUIDE.md 的目录说明.planning/sketches/ NNN-name/ # index.html2–3 个变体 README themes/ default.css # 所有草图共享的 CSS 变量 MANIFEST.md # 全部草图索引及胜者把草图决策沉淀为 skill然后进入正式开发选出胜者后运行/gsd-sketch --wrap-up走 sketch-wrap-up.md 流程逐个草图让你决定 Include / Exclude / Partial / Let me look at it按设计领域分组把胜出变体的 HTML 和主题文件复制进./.claude/skills/sketch-findings-[project]/的sources/为每个设计领域生成含 Design Decisions、CSS Patterns、HTML Structures、What to Avoid 的references/文档并在项目CLAUDE.md中加一行自动加载路由同时写出.planning/sketches/WRAP-UP-SUMMARY.md作为项目历史记录。之后构建真实 UI 时该 skill 会自动加载。USER-GUIDE.md 给出的完整链路是 spike → sketch → phase先用/gsd-spike验证技术方案并--wrap-up再用/gsd-sketch探索设计并--wrap-up然后/gsd-discuss-phase N锁定偏好、/gsd-plan-phase N开始正式规划。sketch 结束后的报告界面也会把/gsd:plan-phase开始构建真实 UI和 frontier 模式的/gsd:sketch列为下一步选项。适用边界草图是一次性原型throwaway HTML mockups用于实现前的方向对比不是可运行的产品代码单个变体最多 4 个超过就先收敛再展示没有 spike 结论时草图仍会生成但内容会缺少真实数据形态支撑这是文档允许的正常降级不是错误依赖spike命令frontmatterrequires: [spike]如果项目里没有 spike 结论工作流会自动跳过 spike 上下文加载步骤。【免费下载链接】get-shit-doneA light-weight and powerful meta-prompting, context engineering and spec-driven development system for Claude Code by TÂCHES.项目地址: https://gitcode.com/GitHub_Trending/getshi/get-shit-done创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
get-shit-done 如何用 /gsd-sketch 在写前端代码前生成可交互的多版式 HTML 对比稿
get-shit-done 如何用 /gsd-sketch 在写前端代码前生成可交互的多版式 HTML 对比稿【免费下载链接】get-shit-doneA light-weight and powerful meta-prompting, context engineering and spec-driven development system for Claude Code by TÂCHES.项目地址: https://gitcode.com/GitHub_Trending/getshi/get-shit-done如果你的项目还没有开始写前端组件代码但已经需要确定布局结构、交互模型或视觉方向get-shit-doneGSD的/gsd-sketch命令可以帮你先做一轮一次性 HTML 原型实验每轮草图sketch回答一个设计问题在同一个index.html里生成 2–3 个可切换、可点击的版式变体直接在浏览器里对比选出胜者后再进入正式实现。该命令不需要事先执行 new-project 初始化.planning/sketches/目录不存在时会自动创建见 sketch.md 的 objective 说明。命令入口与参数在支持 GSD 命令的运行时Claude Code或非 Claude 运行时用--text中按以下方式调用参数表来自 docs/COMMANDS.md 的/gsd-sketch一节参数必填作用idea否要探索的 UI 设计问题或方向--quick否跳过 mood 问答直接用idea文本作为设计方向--text否文本模式把交互提问替换成纯文本编号列表用于 Codex、Gemini 等非 Claude 运行时--wrap-up否把胜出的草图决策打包成项目级 skill/gsd-sketch # 交互式 mood 问答 /gsd-sketch dashboard layout /gsd-sketch --quick sidebar navigation /gsd-sketch --text onboarding flow # 非 Claude 运行时 /gsd-sketch --wrap-up # 把胜出草图打包为 skill注意两点命令 frontmatter 声明了requires: [spike]见 sketch.md即依赖 spike 配套命令工作流会主动读取项目里已有的 spike 结论来让草图更贴近真实数据形态。不带参数或只输入frontier会进入 frontier 模式分析现有草图全集主动提出下一轮值得画的草图这是可选分支不是首次使用的主路径。调用后会发生什么按 get-shit-done/workflows/sketch.md 的流程Idea 模式默认会依次执行Mood 问答--quick时跳过一次只问一个问题覆盖三个维度——Feel它应该是什么感觉给我形容词、情绪或氛围、References哪些 App、网站或产品的感觉接近你想象中的、Core action用户在这里做的最重要的一件事是什么。信息足够后它会问一句方向我大概有感觉了开始画还是继续聊只有你明确说开始才会动手。加载 spike 上下文如果项目里有./.claude/skills/spike-findings-*/SKILL.md、.planning/spikes/MANIFEST.md或.planning/spikes/CONVENTIONS.md会读取其中已验证的数据字段名、需求约束如必须支持流式渲染和技术栈约定让 HTML 原型使用真实字段名和真实组件名而不是泛泛的占位内容。没有 spike 则跳过这一步。拆分设计问题把想法拆成 2–5 个设计问题以表格呈现草图编号、设计问题、做法、风险确认后再开始构建。文档明确的好/坏例子好草图问双栏布局感觉对不对坏草图是设计整个 App太宽泛或搭组件库那是实现不是探索。目标技术栈调研检查package.json等确认技术栈核对该框架的布局原语和组件库可用性确保至少一个变体走目标栈的最省力路径。绿地项目或明确只想纯视觉探索时可跳过。建立/更新 MANIFEST写入.planning/sketches/MANIFEST.md包含设计方向、参考对象和草图索引表编号、名称、设计问题、胜者、标签。每个对比稿里有什么每个草图是一个独立目录.planning/sketches/NNN-descriptive-name/三位数字编号 连字符命名内含index.html和README.md。构建规则来自 sketch.md 的 build_sketches 步骤一个 HTML 文件装 2–3 个变体用顶部标签栏切换。第一轮要求戏剧性差异几种明显不同的做法后续轮次在同一方向内做细微打磨变体数最多不超过 4 个。纯 HTML 内联 CSS/JS无构建步骤、无 npm、无框架。每个变体有清晰标签如 Variant A: Sidebar Layout所有文件链接共享主题../themes/default.css。使用真实感内容而非 lorem ipsum有 spike 上下文时用真实字段名。附带草图工具栏和主题切换器见下文工具栏。多版式切换的参考实现见 sketch-variant-patterns.mddiv idvariant-nav styleposition:fixed;top:0;left:0;right:0;z-index:9998;... button classvariant-tab active onclickshowVariant(a)A: Sidebar Layout/button button classvariant-tab onclickshowVariant(b)B: Top Nav/button button classvariant-tab onclickshowVariant(c)C: Floating Panels/button /div div idvariant-a classvariant active!-- 变体 A 内容 --/div div idvariant-b classvariant styledisplay:none!-- 变体 B 内容 --/div对比小元素按钮样式、卡片布局等时改用并排 grid 布局加标签而不是标签页。交互要求不是静态截图sketch-interactivity.md 给出一张必须可交互的清单元素要求按钮点击处理器 可见反馈状态变化、动画、toast表单blur 时校验提交后显示成功状态列表可增删条目有空状态和满状态开关可切换且有可见状态变化Tab/导航点击可切换内容弹窗/抽屉带过渡的开合Hover每个可点击元素都要有 hover 效果下拉可开合、可选中另外三条规则交互元素加transition: all 0.15s ease作为基线假后端——点 Save 要出现短暂加载态再显示成功搜索框输入要过滤写死的结果多状态empty/loading/populated/error的页面要提供循环切换状态的按钮。实现统一用内联script里的原生 JS。工具栏与共享主题每张草图右下角固定一个小型半透明工具栏见 sketch-tooling.md包含三部分主题切换器运行时替换主题 CSS 文件视口预览Phone 375px / Tablet 768px / Desktop 1280px或全宽三档按钮通过调整内容容器max-width实现标注模式hover 时叠加显示间距值、色值 hex、字号。所有草图共享一份 CSS 变量主题见 sketch-theme-system.md:root { --color-bg: #fafafa; --color-primary: #2563eb; --font-sans: Inter, system-ui, sans-serif; --space-4: 16px; --radius-md: 8px; /* 其余颜色、字号、间距、圆角、阴影变量见文档完整模板 */ }主题文件只定义 CSS 自定义属性不写组件样式。每个index.html用一行链接接入link relstylesheet href../themes/default.css文档中给出的变量值是起点示例工作流要求按 mood 问答确定的方向调整颜色和字体而不是照抄默认值。如果草图过程中出现审美分叉这个应该是冷峻还是温暖的感觉做法是各建一个主题文件如midnight.css、warm-minimal.css让用户切换感受而不是口头争论。查看对比稿并选定胜者每个草图构建完成后会给出检查点checkpoint提示你打开文件对比open .planning/sketches/NNN-name/index.html然后针对检查点里写明的对比要点在浏览器里实际点击、切换变体。反馈有三种处理方式会一直迭代到你满意为止选定方向标记胜者进入下一个草图跨变体摘取元素构建一个合成变体如 Synthesis: As layout Cs palette再展示想继续探索构建新变体。定稿时做三件事在README.mdfrontmatter 里写winner: B在 HTML 中标签上加 ★ 指示如A: Sidebar Layout ★ Selected更新 MANIFEST。注意所有变体都保留胜者只是被高亮其余不删除。commit_docs配置为 true 时工作流还会以docs(sketch-NNN): [winning direction] — [key visual insight]的格式提交该草图目录和 MANIFEST。如何判断这一轮草图完成了sketch.md 的 success_criteria 给出了可核对的完成标准.planning/sketches/已创建无需项目初始化每个草图有 2–3 个可对比变体至少一个走目标栈最省力路径你能在浏览器里打开并操作这些草图每个草图的胜者变体已选定并标记所有变体保留MANIFEST.md与当前状态一致提交信息使用docs(sketch-NNN): [winner]格式。磁盘上应看到.planning/sketches/下的结构见 docs/USER-GUIDE.md 的目录说明.planning/sketches/ NNN-name/ # index.html2–3 个变体 README themes/ default.css # 所有草图共享的 CSS 变量 MANIFEST.md # 全部草图索引及胜者把草图决策沉淀为 skill然后进入正式开发选出胜者后运行/gsd-sketch --wrap-up走 sketch-wrap-up.md 流程逐个草图让你决定 Include / Exclude / Partial / Let me look at it按设计领域分组把胜出变体的 HTML 和主题文件复制进./.claude/skills/sketch-findings-[project]/的sources/为每个设计领域生成含 Design Decisions、CSS Patterns、HTML Structures、What to Avoid 的references/文档并在项目CLAUDE.md中加一行自动加载路由同时写出.planning/sketches/WRAP-UP-SUMMARY.md作为项目历史记录。之后构建真实 UI 时该 skill 会自动加载。USER-GUIDE.md 给出的完整链路是 spike → sketch → phase先用/gsd-spike验证技术方案并--wrap-up再用/gsd-sketch探索设计并--wrap-up然后/gsd-discuss-phase N锁定偏好、/gsd-plan-phase N开始正式规划。sketch 结束后的报告界面也会把/gsd:plan-phase开始构建真实 UI和 frontier 模式的/gsd:sketch列为下一步选项。适用边界草图是一次性原型throwaway HTML mockups用于实现前的方向对比不是可运行的产品代码单个变体最多 4 个超过就先收敛再展示没有 spike 结论时草图仍会生成但内容会缺少真实数据形态支撑这是文档允许的正常降级不是错误依赖spike命令frontmatterrequires: [spike]如果项目里没有 spike 结论工作流会自动跳过 spike 上下文加载步骤。【免费下载链接】get-shit-doneA light-weight and powerful meta-prompting, context engineering and spec-driven development system for Claude Code by TÂCHES.项目地址: https://gitcode.com/GitHub_Trending/getshi/get-shit-done创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
