メニュー
拋棄式 HTML mockup 比稿：產出 2 到 3 個設計立場不同的變體（密度 / 版式 / 強調軸，不是換色），各附取捨說明，最後給有立場的對比結論。適用：「畫個草圖」「比較 A 版 B 版」「先看方向再做」「給我看幾種做法」。要 production 元件或設計已定案時不適用。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/seikaikyo/dash-skills --skill sketchコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use when reviewing code for security vulnerabilities, implementing authentication/authorization, handling user input, or discussing web application security. Covers OWASP Top 10:2025, ASVS 5.0, LLM Top 10 (2025), and Agentic AI security (2026).
Guides authoring of high-quality YARA-X detection rules for malware identification. Use when writing, reviewing, or optimizing YARA rules. Covers naming conventions, string selection, performance optimization, migration from legacy YARA, and false positive reduction. Triggers on: YARA, YARA-X, malware detection, threat hunting, IOC, signature, crx module, dex module.
Throwaway HTML mockups: 2-3 design variants to compare.
| name | sketch |
| description | 拋棄式 HTML mockup 比稿：產出 2 到 3 個設計立場不同的變體（密度 / 版式 / 強調軸，不是換色），各附取捨說明，最後給有立場的對比結論。適用：「畫個草圖」「比較 A 版 B 版」「先看方向再做」「給我看幾種做法」。要 production 元件或設計已定案時不適用。 |
| source | adapted from openclawyhwang-hub/tGD tgd-sketch (Apache-2.0，上游改作自 gsd-build/get-shit-done MIT) |
| updated | "2026-07-13T00:00:00.000Z" |
在投入實作前，用 2 到 3 個可互動的拋棄式 HTML mockup 比較設計方向。每個變體是一個自足的 HTML 檔：inline CSS、擬真內容、基本互動。目的是視覺比較，不是可出貨的程式碼。
只做一版是原型不是比稿，比稿的價值在正面對決。兩個變體多一倍工，消掉八成重做風險。
不適用：要 production 元件（走 frontend-design / interface-design 正規做）、要單一精緻 HTML 成品、要圖表或架構圖、設計已定案（直接做）。
intake → 變體 → 正面對決 → 選出勝者（或再一輪）
產變體前先拿到三件事，一次一題：
每個變體要有不同的設計立場，不是不同的像素值。可用的立場軸：
挑一條軸拉開距離。只差主色的兩個變體是浪費，使用者無法區辨。
每個變體是單一自足 HTML 檔：
<style>，不需建構步驟寫完用 agent-browser 開 file:// 截圖實看，抓純看原始碼看不出的版面問題（字型載入失敗、flex 容器塌掉），修到每個變體看起來是對的。
## 變體：<立場名>
### 設計立場
一句話講驅動這個變體的原則。
### 關鍵選擇
版式 / 字型 / 色彩 / 互動各一行。
### 取捨
強在哪、弱在哪。
### 適合誰
這個變體實際服務的使用者或情境。
全部做完後給對比，不能只列清單，要有立場：
| 維度 | 安靜編輯感 | 工具感高密度 | 玩心分割版 |
|------|-----------|-------------|-----------|
| 密度 | 低 | 高 | 中 |
| 主動作可見度 | 低 | 高 | 中 |
| 掃讀性 | 高 | 中 | 低 |
我的判斷：重度使用者選工具感高密度，內容導向選安靜編輯感。
玩心分割版最弱，兩頭想抓、兩頭不沾。
讓使用者選勝者、合併兩案成混血、或再來一輪。
open <路徑>/index.html草圖夠互動的標準：主動作點下去有可見反應（狀態變化、modal、toast）、至少一個有意義的狀態轉換、可辨識的元件有 hover。超過這些是過度打磨拋棄品，低於這些是截圖。