Design & Motion · daymade/claude-code-skills

interaction-design-board

Name: interaction-design-board
Author: daymade/claude-code-skills

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.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit

Author daymadeGitHub daymade/claude-code-skills ↗Stars 1385License MIT（仓库根 LICENSE；GitHub API spdx MIT）Commit d5c4678cb5

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Process Gate: First freeze the Decision Contract (user job/decision scope/immutable facts/existing language/first-view invariant/interaction states/stop condition), then propose 3 distinct interaction architecture candidates (families such as command-first/queue-detail/object-dominant/comparison-led/ledger-first, etc.). Each candidate represents an interaction hypothesis rather than a visual reskin, varying only navigation/selection/disclosure/action ownership/information order.

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.' Static images serve merely as supporting evidence: 'A screenshot cannot prove a collapse state, keyboard path, selection model, or task handoff.'

build_board.py serves as a compliance gate: Reads board.json (schemaVersion=interaction-design-board/v1), validates 2–8 variants, ensures variant files do not escape the manifest directory and are not symlinks, deduplicates via sha256 (rejecting byte-identical files), and enforces that each variant is self-contained HTML (forbids external script/img/link/poster/url() resources and CSS @import, requires a title, forbids <base>), before populating the template to produce a single-file 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 checks 'candidate.relative_to(root.resolve())' to prevent directory traversal; validate_self_contained inspects for @import using StyleBlockExtractor while ignoring comments/raw-text containers; enforces 'variants must contain between 2 and 8 candidates'.

Runtime Isolation = Template-injected CSP + srcdoc sandbox iframe: Each candidate is enclosed in a srcdoc frame where the Board injects a default-src 'none' CSP (permitting only unsafe-inline styles/scripts + data:/blob: media, while completely blocking connect-src/frame-src/object-src/form-action), layered with 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 copies the candidate HTML into documentCopy, prepends the CSP meta tag, and assigns it to 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: When independent worker contexts are available, dispatch one candidate per worker, sharing the same frozen contract while keeping outputs completely isolated from one another to prevent convergence into sibling designs; if workers are unavailable, generate serially but always re-read the frozen contract instead of referencing the previous candidate.

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.'

Feedback Loop: The Board submits feedback.json / feedback-pending.json (including regenerateAction iterate|remix when regenerated:true) → agent retains accepted aspects, alters failed axes, and regenerates only the affected candidates → versions the Board file → sends POST /api/reload (response: {"reloaded":true}) if gstack serve is already active; repeatedly running serve does not count as 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>"}'

Template deliver(): If __GSTACK_SERVER_URL or http(s) protocol is present, sends POST ./api/feedback first; falls back to downloading feedback.json on failure or in local file mode—'A successful response or downloaded file is transport evidence, not approval'.

Production Implementation Gate: approved.json is written (recording selected/approved interaction rules/first-view invariant/rejected trade-offs/actual exercised states/remaining unknowns/prototype file identities) only after the user confirms the feedback summary; only then does it proceed to production implementation and verification of the same representative task in a real browser—pixel similarity alone does not count.

daymade-codex/interaction-design-board/SKILL.md

Then—and only then—implement in the product.

SKILL final constraint: '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.'

2Core Capabilities

01Multiple candidate runnable HTML interaction prototypes (varying interaction architecture under identical business facts/design language)

02board.json compliant construction: 2–8 variants, sha256 deduplication, self-contained enforcement, traversal/symlink rejection

03Two-layer prototype runtime isolation via CSP + srcdoc sandbox (blocking network, nesting, and popups)

04Structured feedback collection and named remixes (feedback.json/feedback-pending.json schema + versioned Board + /api/reload)

05Worker-isolated parallel generation (test-time scaling, preventing solution convergence)

06Approval gating and production handoff (approved.json → production implementation → real browser task verification)

07In-Board task observation protocol (noticed first / knew next step / disclosure helped or obscured / natural or unexpected state transitions)

3External Dependencies

Kind	Dependency / Endpoint
cli	python3（build_board.py，纯 stdlib）
cli	gstack design 可执行（可选：serve Board + /api/feedback + /api/reload；未装则开文件直用）
cli	curl（可选：Board 重载探测/触发）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Execute local scripts or commands: python3 build_board.py (pure stdlib; reads manifest and variant HTML, writes design-board.html)
环境变量 / API Key: Read vendor service credentials: None
本地工作目录: File I/O and artifact output: build_board.py writes session-dir/design-board.html; agent writes boa in session-dir following the workflow

Audit Notes: Uses built-in stdlib Python scripts, writes local files to session-dir, contains no outbound network transmissions (explicitly blocks network access at the rendering layer), and reads no credentials; optional gstack design serve runs as a local service. Disk writes are confined to session workspace artifacts and (post-approval) production source code—the latter being the explicit intent of the task and gated by user confirmation; contains no destructive or delete operations.

5Second-Pass Verification

[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 覆盖构建层而非视觉层。

6Verdict & Scenarios

Sets 'runnable, clickable, and comparable' as the non-negotiable baseline, treating static images merely as supporting evidence

Builder enforces security/compliance through strict validation (rejecting traversal, external links, duplicates, and missing states) rather than advisory guidelines

Runtime isolation at the CSP/sandbox level: candidate JS is physically blocked from network access or iframe embedding

Worker-isolated parallelism operationalizes test-time scaling directly within the product design workflow

Strict production gating: product code remains untouched until approved.json is finalized, and QA click-throughs never impersonate user validation

Best for: Ideal for single-surface/single-flow decisions with high interaction uncertainty: provides actionable comparisons when hierarchy, workflow, disclosure, selection models, or task handoffs 'feel unprofessional, but it is hard to pinpoint why'; suitable for multi-worker hosts performing parallel hypothesis generation (test-time scaling); perfect for handoffs with design-style-picker (determining visual style before comparing interactions) or integrating with the gstack suite.

Not for: Not suited for single-line CSS adjustments or pure implementation of an already approved spec (explicitly stated in SKILL); not suited for text-only environments lacking both a browser and gstack (the Board requires human click interactions); static visual selections that do not depend on 'what happens after clicking' should use design-style-picker; not for product scenarios where prototype data demands a real backend response (SKILL requires honest local state without mocking non-existent backends).

Install Agent-Ready

① Verified Mirror 2026-09-09

Option A · Direct DownloadDownload interaction-design-board.tar.gz

sha256: bb7d5b878d07fe8e…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit d5c4678cb5.