Sketch Manifest【免费下载链接】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-doneDesign Direction[One paragraph capturing the mood/feel/direction from the intake conversation]Reference Points[Apps/sites the user referenced]Sketches#NameDesign QuestionWinnerTags若已存在则向表格追加新行。同时若无 .planning/sketches/themes/default.css则依据访谈确立的情绪/方向创建共享主题完整规范见 [get-shit-done/references/sketch-theme-system.md](https://link.gitcode.com/i/39fe09cd8161e20df08f87b9679e5e55)第五节详述。 --- ## 四、制作与评审每个草图 2–3 个变体 一次检查点 这是工作流的**核心循环**build_sketches 步骤对每张草图按以下顺序执行。 ### 4.1 目录与文件 - 编号规则**三位数零填充 连字符描述名**如 001-dashboard-layout/ - 一个 index.html 内承载全部 2–3 个变体 - **首轮要戏剧性差异**2–3 个真正不同方向的方案 - **后续轮次是精修**在已选方向内做细微变化 - 每个变体是一个页面/tab带清晰的A: Sidebar LayoutB: Top Nav式标签与变体间切换导航 - 内嵌草图工具栏所有可交互元素真实可用内容用真实感数据优先 spike 上下文里的真实字段名 - 通过 link relstylesheet href../themes/default.css 引用共享主题变量。 - 每张草图只回答一个具体视觉问题**所有草图均为纯 HTML 内联 CSS/JS无构建步骤、无 npm、无框架**。 每个 sketch 目录配一个 README.md含 frontmatter例如 markdown --- sketch: NNN name: descriptive-name question: What layout structure feels right for the dashboard? winner: null tags: [layout, dashboard] --- # Sketch NNN: Descriptive Name ## Design Question [The specific visual question this sketch answers] ## How to View open .planning/sketches/NNN-descriptive-name/index.html ## Variants - **A: [name]** — [one-line description of this approach] - **B: [name]** — [one-line description] - **C: [name]** — [one-line description] ## What to Look For [Specific things to pay attention to when comparing variants]4.2 评审检查点完成草图后向用户展示验证检查点视觉规范见 get-shit-done/references/ui-brand.md 的 62 字符宽 CHECKPOINT 盒子约定╔══════════════════════════════════════════════════════════════╗ ║ CHECKPOINT: Verification Required ║ ╚══════════════════════════════════════════════════════════════╝ Sketch {NNN}: {name} Open: open .planning/sketches/NNN-name/index.html Compare: {what to look for between variants} ────────────────────────────────────────────────────────────── → Which variant feels right? Or cherry-pick elements across variants. ──────────────────────────────────────────────────────────────反馈处理支持三种分支选定方向标记 winner进入下一张、跨变体摘取元素合成新变体再次展示、想继续探索构建新变体。迭代直至用户满意。4.3 定稿、提交与汇报每张草图定稿时依次完成在 README frontmatter 标记获胜变体winner: B在获胜 tab 上加 ★ 指示符更新.planning/sketches/MANIFEST.md若COMMIT_DOCStrue按 GSD 提交模式提交gsd-sdk query commit docs(sketch-NNN): [winning direction] — [key visual insight] --files .planning/sketches/NNN-descriptive-name/ .planning/sketches/MANIFEST.md汇报本张草图结论◆ Sketch NNN: {name} Winner: Variant {X} — {description} Insight: {key visual decision made}全部草图完成后输出总结横幅GSD ► SKETCH COMPLETE ✓汇总 Design Direction、Key Decisions、Open Questions并给出Next Up路由推荐用/gsd:sketch --wrap-up把结论打包成 Skill同时列出可选的/gsd:plan-phase开始实现真实 UI、/gsd:spike验证某个设计模式的技术可行性等命令。工作流的成功准则get-shit-done/workflows/sketch.md 末尾逐项约束了产物质量目录自动创建、方向经对话探索除非--quick、spike 上下文已加载、目标栈已调研、每张草图 2–3 变体且至少一个走阻力最小路径、浏览器可直接打开交互、winner 已标记但所有变体保留只标记不删除、MANIFEST 保持最新、提交遵循docs(sketch-NNN): [winner]格式。五、共享主题系统让设计决策跨草图复利get-shit-done/references/sketch-theme-system.md 规定所有草图共享一个 CSS 变量主题这样色彩、字号、间距等决策可以在不同草图间保持一致并叠加成体系。首个草图建立如下目录形态.planning/sketches/ themes/ default.css - all sketches link to this 001-dashboard-layout/ index.html - links to ../themes/default.css主题文件只定义 CSS 自定义属性不含任何组件样式或布局规则——它只是视觉词汇表:root { /* Colors */ --color-bg: #fafafa; --color-surface: #ffffff; --color-border: #e5e5e5; --color-text: #1a1a1a; --color-text-muted: #6b6b6b; --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-accent: #f59e0b; --color-danger: #ef4444; --color-success: #22c55e; /* Typography */ --font-sans: Inter, system-ui, sans-serif; --font-mono: JetBrains Mono, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* Shapes */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); }默认值只是起点应依据访谈确立的情绪调整颜色、字体、间距与形状。两条补充规则审美分叉时创建多个主题文件当草图暴露出应该偏临床还是偏温暖这类分叉时把两个方向都做成主题midnight.css、warm-minimal.css、brutalist.css让用户现场切换、亲身体验差异而非空口争论每个草图都要带主题切换器作为草图工具栏的一部分运行时热切换 CSSselect idtheme-switcher onchangedocument.querySelector(link[href*themes]).href../themes/this.value.css option valuedefaultDefault/option /select选项可动态枚举主题文件也可硬编码已知主题。六、让原型活起来变体模式、交互性与草图工具栏6.1 多变体 HTML 模式get-shit-done/references/sketch-variant-patterns.md 规定每张草图在同一个 HTML 里呈现 2–3 个变体用户即时切换比较。核心形态基于 Tab 的变体标准做法页面顶部固定 tab 栏切换各变体并注意给 body 加padding-top以避开固定 tab 栏div 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.../div div idvariant-b classvariant styledisplay:none.../div div idvariant-c classvariant styledisplay:none.../div script function showVariant(id) { document.querySelectorAll(.variant).forEach(v v.style.display none); document.querySelectorAll(.variant-tab).forEach(t t.classList.remove(active)); document.getElementById(variant- id).style.display block; event.target.classList.add(active); } /script标记胜者用户选定方向后在胜者 tab 加视觉指示A: Sidebar Layout ★ Selected但保留所有变体可导航——胜者只是被高亮不是唯一选项并排对比按钮样式、卡片布局、图标处理这类小元素用三列 grid 并排标注 A/B/C而非 tab合成变体当用户跨变体摘取元素时新增语义化标签的新 tab例如Synthesis: As layout Cs palette数量纪律首轮 2–3 个方向大不同的方案精修轮 2–3 个同方向微变永远不超过 4 个——超过会让人无所适从若有 5 方案需先收敛再展示。6.2 可丢弃原型也必须可交互get-shit-done/references/sketch-interactivity.md 的开篇立场很鲜明静态 mockup 比截图好不了多少。草图里每个交互元素都必须对交互作出响应。各类元素的硬性要求ElementMust HaveButtonsClick handler with visible feedback (state change, animation, toast)FormsInput validation on blur, submit handler that shows success stateListsAdd/remove items, empty state, populated stateToggles/switchesWorking toggle with visible state changeTabs/navClick to switch contentModals/drawersOpen/close with transitionHover statesEvery clickable element needs a hover effectDropdownsOpen/close, item selection配套手法给可交互元素加基础过渡transition: all 0.15s ease细微动效让草图有实感便于判断交互模式是否成立伪造后端点Save就短暂 loading 后成功搜索框输入就过滤硬编码结果——目的是体验完整交互回路而非只看静止状态状态轮播若草图含空态/加载态/有数据态/错误态用按钮循环展示并清晰标注各状态让用户感受设计在不同数据条件下的表现实现一律用内联script的原生 JS无框架无构建步骤。6.3 草图工具栏get-shit-done/references/sketch-tooling.md 要求每个草图都内嵌一个浮动小工具栏提供工具但不与设计本身抢戏。实现为右下角固定、半透明、hover 展开的div含三类组件主题切换器运行时替换主题 CSS见第五节示例视口预览三个按钮把内容区约束到 Phone 375px / Tablet 768px / Desktop 1280px或全宽通过调整容器max-width实现用于快速验证响应式标注模式开关式 JS 片段hover 时读取 computed style 并弹出 spacing 值、颜色 hex、字号等视觉数据无需打开 DevTools 就能理解视觉决策。工具栏应保持低调小、深色、半透明并独立于主题自行硬编码深底白字样式从设计上杜绝它与草图视觉竞争。七、Frontier Mode分析草图版图并提议下一步当不带参数或输入frontier时命令进入前瞻模式依次执行见 get-shit-done/workflows/sketch.md 的 frontier_mode 步骤加载草图版图若不存在.planning/sketches/直接告知用户无内容可分析并提议从 idea 模式重新开始否则按顺序加载MANIFEST.md设计方向、参考点、带胜者的草图表既有 findings skillsglob./.claude/skills/sketch-findings-*/SKILL.md及其references/*.md内含历次 wrap-up 提炼的决策全部草图 README.planning/sketches/*/README.md的设计问题、胜者、标签。分析一致性草图consistency sketches审查所有草图胜者的组合寻找两处各自成立但从未一起验证的视觉一致性缺口、单态验证过但未按序列呈现的状态组合、只在单一视口验证但真实应用需要多视口的响应式缺口、单看不错但未拼成全页的主题一致性。有风险就化为带名称与设计问题的具体草图提案。分析前沿草图frontier sketches围绕 MANIFEST 设计方向横向发散未画过的屏幕被假定但未探索的 UI 面、交互模式静态布局已验证但 transition、loading、拖拽还缺手感、边界态 UI0 条 / 1000 条 / 报错 / 慢网、替代方向对还行但不够好的草图换新思路、打磨轮排版、间距、微交互、空态。提案编号从已有最大草图号顺延。对齐并执行把一致性 前沿候选一并呈现让用户挑选要跑哪张。选定后更新.planning/sketches/MANIFEST.md并直接从build_sketches进入制作。八、--wrap-up把获胜决策沉淀为项目内 Skill草图完成后最大的风险是决策随风而逝。/gsd:sketch --wrap-up执行的 get-shit-done/workflows/sketch-wrap-up.md 正是为固化知识而设计全程可概括为收集清单读 MANIFEST、glob 各草图 README 解析 frontmatter、检查是否已有sketch-findings-*skill 并过滤已处理草图无未处理草图则提示先运行/gsd:sketch并退出同样读取commit_docs配置。逐张策展按编号升序展示每张未处理草图编号、名称、设计问题、胜者、标签、关键决策摘要弹出CHECKPOINT: Decision Required让用户选择Include / Exclude / Partial / Let me look at it后两者分别支持再打开确认与指定部分纳入。按设计领域自动分组依据标签与内容提议分组如Layout Navigation — sketches 001, 004Form Controls — 002, 005Color Typography — 003交用户批准可合并、拆分、改名、重排。每个组对应生成 skill 中的一个 reference 文件。写入 skillskill 名由项目目录名派生为./.claude/skills/sketch-findings-[project-dir-name]/已存在则原地追加。先拷贝源文件获胜变体 HTML 或完整 index.html 到sources/NNN-sketch-name/获胜theme.css到sources/themes/排除 node_modules、构建产物、.DS_Store再为每个设计领域写references/[design-area-name].md结构含 Design Decisions、CSS Patterns、HTML Structures、What to Avoid、Origin最后写 SKILL.md含 frontmatter、context、design_direction、findings_index、metadata/processed sketches。写项目历史与挂载路由生成.planning/sketches/WRAP-UP-SUMMARY.md含纳入/排除表与合并后的设计方向在项目 CLAUDE.md 追加自动装载路由行- **Sketch findings for [project]** (design decisions, CSS patterns, visual direction) → Skill(sketch-findings-[project-dir-name])【免费下载链接】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），仅供参考
