Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add yunshu0909/yunshu_skillshub --skill design-explorationgit clone --depth 1 https://github.com/yunshu0909/yunshu_skillshubWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yunshu0909/yunshu_skillshub/design-exploration)<a href="https://agentmods.dev/skills/yunshu0909/yunshu_skillshub/design-exploration"><img src="https://agentmods.dev/badge/skills/yunshu0909/yunshu_skillshub/design-exploration/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/yunshu0909/yunshu_skillshub/design-exploration"><img src="https://agentmods.dev/badge/skills/yunshu0909/yunshu_skillshub/design-exploration.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00268 | $0.02415 |
| Opus 5 | $0.00134 | $0.01208 |
| Sonnet 5 | $0.00054 | $0.00483 |
| Haiku 4.5 | $0.00027 | $0.00242 |
Grade A, and why
design-exploration scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 218 lines — stays where its author put it; the contents beside it link to each section on GitHub.
用户有一个模糊的想法，想做一个新功能或新模块，但还没想清楚具体要什么。通过结构化的探索流程，帮助用户从模糊想法收敛到明确的设计方案，并产出完整的设计参考文档。
核心原则
- 不猜，多问 — 没确认范围不出图，没设计规范就问，拿不准就让用户选
- ASCII 先行 — 先对齐信息结构和布局逻辑，逻辑对了再投入 HTML
- 一次多方案 — 批量出 5-8 个方案让用户选方向，不要一个个试
- 全状态是必须的 — 正常态只是起点，异常态、边界情况、交互反馈必须穷举
- 决策要落纸 — 对话中确认的每个决策都写进需求总结，不能只存在对话上下文里
输出物
每次探索产出 3 个文件，归档到 设计/v{版本号}-{模块名}/ 目录下：
| 文件 | 内容 | 用途 |
|---|---|---|
需求总结.md |
背景、目标、功能范围、关键决策、技术约束 | PRD 阶段的输入，讲清楚"为什么做、做什么" |
{模块名}-设计稿.html |
主界面 HTML mockup | PRD + 前端开发的视觉参考 |
{模块名}-全状态设计参考.html |
所有页面状态、Toast、边界情况、交互规则表 | 前端开发直接对照实现 |
版本号和模块名由用户决定，必须问用户确认。
工作流程
第 1 步：需求发散与收敛
用户说了模糊想法后，主动追问：
- 痛点是什么 — 现在遇到了什么问题？为什么想做这个？
- 核心场景 — 最典型的使用场景是什么？
- 边界在哪 — 这个版本要做什么？不做什么？
整理成结构化的需求共识：
做什么：
- xxx
- xxx
不做什么：
- xxx
载体：独立应用 / 已有应用的新 Tab / 插件 / ...
禁止：用户说了一句话就开始出图。必须先对齐需求边界。
第 2 步：技术调研（按需）
判断是否需要调研：如果功能涉及外部数据（配置文件、API、第三方系统、文件格式），必须先调研技术约束。如果是纯 UI 功能不涉及外部依赖，跳过。
调研内容：
- 数据存储位置和格式
- 现有系统的接口和限制
- 技术可行性验证
调研结果会直接影响设计方案（比如发现两个工具配置格式不同，决定了界面需要展示"类型"列）。
禁止：跳过调研直接画图，画出来发现技术上实现不了。
第 3 步：ASCII 批量探索
一次出 5-8 个不同思路的 ASCII 布局方案，每个方案包含：
- ASCII 布局图
- 一句话说明核心思路
方案 A：卡片列表 + 工具勾选
┌──────────────────────────────────┐
│ ┌────────────────────────────┐ │
│ │ pencil [✓] CC [✓] CX│ │
│ └────────────────────────────┘ │
└──────────────────────────────────┘
方案 B：表格视图，一行一个
┌──────────────────────────────────┐
│ 名称 类型 CC CX │
│ pencil stdio [✓] [✓] │
│ github http [✓] [✓] │
└──────────────────────────────────┘
用户可以：
- 直接选一个方案
- 组合多个方案的元素（"B 的结构 + E 的开关风格"）
- 全部否掉，补充新的方向
禁止：
- 只出 1-2 个方案（用户没有选择空间）
- 超过 10 个方案（选择困难）
- 方案之间差异太小（换汤不换药）
第 4 步：确认设计风格
问用户以下问题：
-
有没有已有的设计规范？（如 design-system.html）
- 有 → 读取并严格遵循 design tokens（颜色、字号、圆角、间距）
- 没有 → 问风格偏好，或直接出图让用户挑感觉
-
有没有要参考的已有页面？（外框、导航结构）
- 有 → 读取参考页面，对齐外框样式（如 mac-window、sidebar 布局）
- 没有 → 按独立页面处理
-
载体形式？
- 已有应用的新页面/Tab → 必须对齐已有页面的外框和导航
- 独立应用 → 自定义外框
- 其他 → 问清楚
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 13d ago First seen · 218 lines · 268 tokens per session scan A 28b7486c398d
design-exploration is a skill published in the GitHub repository yunshu0909/yunshu_skillshub (757 stars, last pushed 1mo ago), licensed MIT. It adds 268 tokens to every session and 2,415 once invoked, about $0.0013 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.