全部技能 / 设计 / interaction-design-board
设计 · daymade/claude-code-skills

interaction-design-board

Generate several genuinely different, runnable HTML interaction prototypes for one product surface, combine them in an interactive Design Board, collect structured selection/remix feedback, and only then hand the approved behavior to production implementation. Use when a user asks for multiple clickable UI versions, interaction alternatives, progressive-disclosure options, a Design Board, HTML prototypes, test-time scaling for product design, or says the visual styling is acceptable but the hierarchy, workflow, layout, or interaction still feels unprofessional. Prefer this over static image exploration when the decision depends on what happens after clicking, expanding, selecting, filtering, or moving through states.

风险提醒：蓝色 · 知晓即可AI 侦查报告
作者 daymadeGitHub daymade/claude-code-skills ↗Stars 1385许可 MIT（仓库根 LICENSE；GitHub API spdx MIT）commit d5c4678cb5
agent 宿主通常会约束 skill 执行权限；风险提醒为 AI 侦查观点，不构成质量或安全保证。第三方 skill 仅作拆解与展示，安装使用风险自负，版权归原作者。

1实现原理 · 为什么它能做到

流程门禁：先冻结 Decision Contract（user job/decision scope/immutable facts/existing language/first-view invariant/interaction states/stop condition），再提议 3 个独立交互架构候选（命令优先/队列详情/对象主导/对比主导/ledger 优先等族），每个候选=一个交互假说而非皮肤，变量只动导航/选择/披露/动作归属/信息序。

daymade-codex/interaction-design-board/SKILL.md
Each candidate embodies a distinct interaction hypothesis rather than a skin.
注：SKILL 'Hold the decision contract constant. Change navigation/selection/disclosure/action ownership or information order—not colors, copy, and data all at once.'——静态图只算支持证据：'A screenshot cannot prove a collapse state, keyboard path, selection model, or task handoff.'

build_board.py 是合规闸门：读 board.json（schemaVersion=interaction-design-board/v1），校验 2-8 个变体、变体文件不越 manifest 目录且非 symlink、sha256 去重（byte-identical 拒绝）、每个变体必须自包含 HTML（禁外部 script/img/link/poster/url() 资源、禁 CSS @import、必须有 title、禁 <base>），然后填模板产出单文件 Board。

daymade-codex/interaction-design-board/scripts/build_board.py
f"{field} depends on external resource {locator!r}; inline it as CSS, JS, or data URL"
注：resolve_variant 校验 'candidate.relative_to(root.resolve())' 防穿越；validate_self_contained 用 StyleBlockExtractor 忽略注释/raw-text 容器后查 @import；'variants must contain between 2 and 8 candidates'。

运行隔离=模板注入 CSP + srcdoc sandbox iframe：每个候选被包进 srcdoc frame，Board 向其注入 default-src 'none' 的 CSP（仅 unsafe-inline 样式/脚本 + data:/blob: 媒体，connect-src/frame-src/object-src/form-action 全禁），再叠 sandbox='allow-scripts allow-forms allow-modals'。

daymade-codex/interaction-design-board/assets/design-board-template.html
policy.content = "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; media-src data: blob:; font-src data:; connect-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'"
注：securedCandidateHtml 把候选 HTML 拷进 documentCopy 并 prepend CSP meta 再 srcdoc；frame.setAttribute('sandbox', 'allow-scripts allow-forms allow-modals')。SKILL：'The Board also injects a network-denying Content Security Policy into every sandboxed candidate so dynamic JavaScript cannot create an undeclared runtime dependency.'

测试时缩放（test-time scaling）：有独立 worker 上下文时，一个候选派一个 worker、共享同一份冻结 contract、互不可见彼此输出，防收敛成兄弟方案；无 worker 则串行生成但重读冻结 contract 而非上一个候选。

daymade-codex/interaction-design-board/SKILL.md
assign one candidate to each worker with the same frozen decision contract and only that candidate's hypothesis. Do not let workers see one another's output.
注：SKILL：'This isolation is the test-time-scaling mechanism: it preserves distinct hypotheses instead of converging into siblings.'

反馈回路：Board 提交 feedback.json / feedback-pending.json（regenerated:true 时带 regenerateAction iterate|remix）→ agent 保留接受部分、改失败轴、只重生成受影响候选 → 版本化 Board 文件 → gstack serve 已存在则 POST /api/reload（响应 {"reloaded":true}），重复 serve 不算 reload。

daymade-codex/interaction-design-board/SKILL.md
curl -sS -X POST "${BOARD_URL%/}/api/reload" \ -H 'Content-Type: application/json' \ -d '{"html":"<absolute-versioned-board-path>"}'
注：模板 deliver()：有 __GSTACK_SERVER_URL 或 http(s) 协议时先 POST ./api/feedback，失败/本地文件模式则 download feedback.json——'A successful response or downloaded file is transport evidence, not approval'。

生产实施门禁：用户确认反馈总结后才写 approved.json（选中/批准交互规则/first-view invariant/被拒 trade-off/实际演练状态/剩余未知/原型文件身份），然后才进产品实现并用真实浏览器验证同一代表任务——像素相似不算数。

daymade-codex/interaction-design-board/SKILL.md
Then—and only then—implement in the product.
注：SKILL 末尾还约束：'Do not claim usability validation from the author's own click-through. Agent QA catches broken states; the user's task observation decides the interaction.'

2核心能力

01多候选可运行 HTML 交互原型（同一业务事实/设计语言下变交互架构）
02board.json 合规构建：2-8 变体、sha256 去重、自包含强制、穿越/symlink 拒绝
03CSP+srcdoc sandbox 的双层原型运行隔离（网络/嵌套/弹窗全禁）
04结构化反馈收集与命名 remix（feedback.json/feedback-pending.json schema + 版本化 Board + /api/reload）
05worker 隔离式并行生成（test-time scaling，防方案收敛）
06批准门禁与生产移交（approved.json → 产品实现 → 真实浏览器任务验证）
07Board 内任务观察协议（noticed first / knew next step / disclosure 帮助或遮蔽 / 自然或意外的状态转换）

3外部依赖

类型依赖
clipython3（build_board.py，纯 stdlib）
cligstack design 可执行（可选：serve Board + /api/feedback + /api/reload；未装则开文件直用）
clicurl（可选：Board 重载探测/触发）

4风险提醒 风险提醒：蓝色 · 知晓即可

风险提醒：蓝色 · 知晓即可
  • 候选原型 JS 在 allow-scripts 沙箱内可执行任意 UI 逻辑 — CSP 禁网/禁 frame，但脚本可操控 iframe 内 DOM、弹 modal（allow-modals）；恶意候选可做 UI 内钓鱼/假状态——候选来源是 agent 自己生成的本地文件，属低风险但非零。
  • feedback/approval 文件含用户原始表述 — session-dir 里的 feedback*.json/approved.json 记录用户原话与决策，若会话目录被同步/分享会外泄产品决策上下文。
  • 实施阶段依赖 agent 守约 — 『只改受影响候选/不改产品数据模型/不写产品组件目录』等是文本纪律；build 校验管不到 agent 后续在真实产品树里的编辑。
风险提醒：蓝色，知晓即可。自带 stdlib python 脚本，写 session-dir 本地文件，无网络外发（反而在渲染层禁网）、无凭证读取；可选 gstack design serve 为本地服务。写盘对象是会话工作区产物与（批准后）产品源码——后者是任务本意，由用户确认门禁控制；无破坏性/删除操作。

5第二遍独立确认

  • [ok] 穿越/symlink/外部资源拒绝 — resolve_variant: symlink 拒 + relative_to(root) 校验；validate_self_contained: RESOURCE_PATTERNS 扫 script/img/link/video/url()，仅放行 data:/blob:/about:。
  • [ok] CSP 断网声明 — 模板 241 行 CSP 含 connect-src 'none'; frame-src 'none'; object-src 'none'；srcdoc + sandbox allow-scripts allow-forms allow-modals 双保险。
  • [ok] sha256 去重与变体数上限 — seen_hashes 重复即 ContractError；'2 <= len(variants) <= 8'。
  • [ok] 无网络外发/凭证 — build_board.py imports 仅 stdlib（argparse/hashlib/html/json/re/sys/html.parser/pathlib）；无 http/密钥。
  • [unlocatable] gstack serve/reload 集成 — 依赖外部 gstack 工具（仓库外），本环境未安装；SKILL 中 serve/reload/反馈端点语义无法端到端验证，代码侧仅见模板对 __GSTACK_SERVER_URL 与 ./api/feedback 的 POST。
  • [unlocatable] Board 内候选交互可用性（UI 层） — 模板 434 行含 tab/对比视图/反馈面板 JS，未在浏览器实测；fixtures+test_build_board.py 覆盖构建层而非视觉层。

6结论

  • 把『可运行、可点、可比较』立为产出底线，静态图只作支持证据
  • 构建器把安全/合规做成硬校验（穿越、外链、重复、缺失状态全拒），不是文档劝告
  • 运行隔离到 CSP/sandbox 层：候选 JS 物理上无法联网或嵌 frame
  • worker 隔离式并行=把 test-time scaling 落到产品设计流程
  • 生产门禁严格：approved.json 前不动产品代码，QA 点击不冒充用户验证
    • 适合：适合交互不确定性高的单面/单流程决策：层级、工作流、披露、选择模型、任务交接『感觉不专业但说不出哪』时给出可操作对比；适合多 worker 宿主做并行假说生成（test-time scaling）；适合与 design-style-picker 接力（先定视觉再比交互）或 gstack 系列协同。
    不适合：不适合一行 CSS 调整/已有批准规格的纯实现（SKILL 明说）；不适合宿主无浏览器且无 gstack 的纯文本环境（Board 要人点）；决策不依赖『点击后发生什么』的静态视觉选择应走 design-style-picker；原型数据需真实后端回包的产品场景（SKILL 要求 honest local state，不模拟产品没有的后端）。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-09
    方式 A · 人下载镜像包下载 interaction-design-board.tar.gz
    sha256: bb7d5b878d07fe8e…
    方式 B · JSON 格式安装指南，复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗
    本页镜像锁定 commit d5c4678cb5；上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库daymade / daymade/claude-code-skills
    原始 GitHubdaymade/claude-code-skills ↗
    Stars1385
    最近推送2026-09-09
    本 skill commitd5c4678cb5
    许可MIT（仓库根 LICENSE；GitHub API spdx MIT）
    本站信息
    收录日期2026-09-06
    分类设计
    侦查报告2026-09-06 · 2 遍
    本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。