技能 design-exploration
📐

design-exploration

安全

設計探索工作流程

透過結構化的探索流程，將模糊的功能構想轉化為可交付的設計文件。本技能引導使用者從模糊的概念到具體的設計規格，使用經過驗證的工作流程來收斂需求、進行技術研究並建立全面的 UI 文件。

支持: Claude Codex Code(CC)
📊 69 充足
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“design-exploration”。 使用者說：我想做一個 MCP 服務管理工具

预期结果:

產出設計目錄: 設計/v0.11-MCP管理/ 包含 需求總結.md（背景、目標、功能範圍、關鍵決策）、mcp-manager-設計稿.html（主介面 mockup）、mcp-manager-全狀態設計參考.html（所有狀態、Toast、互動規則表）

正在使用“design-exploration”。 使用者說：我想做一個檔案上傳功能

预期结果:

完整狀態覆蓋：正常態（拖放上傳區）、上傳中態（進度條）、成功態（檔案卡片）、失敗態（錯誤提示）、空態（引導文案）、大檔案邊界情況、長檔案名稱截斷規則

正在使用“design-exploration”。 使用者說：設計一個設定頁面

预期结果:

ASCII 批量探索：5-8 個不同版面配置方案（卡片清單、表格檢視、分組開關等），使用者選擇方向後產出 HTML mockup，包含所有設定項狀態和儲存回饋

安全审计

安全
v1 • 3/20/2026

All static findings are false positives. The backtick patterns are markdown syntax for inline code formatting (template variables like {模块名} and ASCII art boxes). No Ruby/shell command execution exists. The high-entropy flags are caused by Chinese UTF-8 characters in documentation. No cryptographic content or malicious patterns found.

2
已扫描文件
286
分析行数
3
发现项
1
审计总数
中风险问题 (1)
SKILL.md:18SKILL.md:22SKILL.md:23SKILL.md:24SKILL.md:40-49SKILL.md:49-72SKILL.md:72-86SKILL.md:86-174SKILL.md:174-178SKILL.md:178-180SKILL.md:180-185templates/需求总结-模板.md:64templates/需求总结-模板.md:65templates/需求总结-模板.md:67
False Positive: Markdown Backtick Syntax Misidentified
Static scanner flagged 'Ruby/shell backtick execution' at 14 locations. These are markdown inline code syntax (backticks for formatting), NOT Ruby command execution. Examples include template variables {模块名}, {版本号}, and ASCII art boxes like ┌───┐.
低风险问题 (2)
SKILL.md:1templates/需求总结-模板.md:1
False Positive: High File Entropy Due to Chinese Characters
Static scanner flagged high entropy (7.26 and 6.33 bits) as possible encrypted content. This is caused by UTF-8 Chinese characters which naturally have higher byte entropy than ASCII. No binary or encrypted content exists.
SKILL.md:2SKILL.md:3SKILL.md:102SKILL.md:103SKILL.md:122templates/需求总结-模板.md:67
False Positive: Weak Cryptographic Algorithm Detection
Static scanner flagged 'Weak cryptographic algorithm' at 6 locations. No cryptographic code exists. Scanner likely misidentified template variable syntax or markdown header patterns.
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
31
社区
96
安全
83
规范符合性

你能构建什么

新功能構思

當產品經理對新功能有模糊的想法，但在確定具體設計方向前需要探索不同方案時。

設計文件交接

當開發團隊需要全面的設計參考資料，包括所有 UI 狀態、錯誤處理和互動規則以供實作時。

利害關係人對齊

當團隊需要在配置開發資源前，與利害關係人視覺化和驗證功能概念時。

试试这些提示

基本功能請求 
I want to add a feature to [describe context]. The main pain point is [describe problem]. Help me explore the design.
參考現有設計 
I need to design [feature name]. We have an existing design system at [path]. The reference page is [URL or path]. Please follow our design tokens.
包含技術限制 
We are building [feature]. The data comes from [data source]. I have already researched and confirmed [technical constraints]. Start with requirement alignment.
完整探索請求 
Complete design exploration for [feature]. Include requirement convergence, technical research, ASCII exploration, HTML mockup, and complete state coverage. This is for [carrier type].

最佳实践

  • 在產生任何設計前，始終先澄清需求範圍——詢問功能應該做什麼和不應該做什麼
  • 產生多個 ASCII 版面配置選項（5-8 個），在使用者投資 HTML 模擬稿前提供有意義的選擇
  • 在需求摘要中記錄每個已確認的決策——不要只將決策留在對話情境中

避免

  • 不要在使用者用一句話描述想法後立即開始產生 HTML 模擬稿
  • 不要只產出快樂路徑——始終覆蓋載入狀態、錯誤狀態、空狀態和邊界情況
  • 不要在涉及外部資料來源或 API 的功能中跳過技術研究

常见问题

這個技能實際輸出什麼？
三個檔案：需求摘要文件（Markdown）、主要 HTML 模擬稿供視覺參考，以及包含所有 UI 狀態和互動規則的完整狀態覆蓋文件。
這與簡單的設計工具有何不同？
此技能強制執行結構化工作流程，確保需求對齊、涵蓋所有邊界情況和錯誤狀態，並產生可供 PRD 和開發交接的文件。
我需要提供設計規格嗎？
不是必需的但建議提供。若有現有的設計 token 或參考頁面，技能會使用它們。若沒有，技能會詢問樣式偏好。
這能取代 UI 設計師嗎？
不行。此技能有助於探索和記錄設計概念，但無法取代複雜設計系統或創意方向的專業設計判斷。
如果我只有模糊的想法呢？
這正是使用此技能的時機。工作流程從需求澄清開始，幫助您將想法提煉為可執行的規格。
這是否與程式碼儲存庫整合？
沒有直接整合。技能輸出可手動添加到儲存庫或文件系統的設計文件。

开发者详情

作者

yunshu0909

许可证

MIT

仓库

https://github.com/yunshu0909/yunshu_skillshub/tree/master/design-exploration

引用

master

文件结构

📁 templates/

📄 需求总结-模板.md

📄 SKILL.md