Agent skill · design visual · aiskillstore
design-exploration
新功能设计探索流程。当用户有模糊想法要做新功能/新模块时使用。通过"需求收敛 → 技术调研 → ASCII 批量探索 → HTML 设计稿 → 全状态覆盖 → 需求总结"的结构化流程，从模糊想法产出可交付的设计参考文档，作为 PRD 阶段的输入。
Why this skill is useful
Provides a structured design exploration process that includes specific documentation outputs and decision-making guidelines not commonly found in general design practices.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
用户有一个模糊的想法，想做一个新功能或新模块，但还没想清楚具体要什么。通过结构化的探索流程，帮助用户从模糊想法收敛到明确的设计方案，并产出完整的设计参考文档。 核心原则 不猜，多问 — 没确认范围不出图，没设计规范就问，拿不准就让用户选 ASCII 先行 — 先对齐信息结构和布局逻辑，逻辑对了再投入 HTML 一次多方案 — 批量出 5-8 个方案让用户选方向，不要一个个试 全状态是必须的 — 正常态只是起点，异常态、边界情况、交互反馈必须穷举 决策要落纸 — 对话中确认的每个决策都写进需求总结，不能只存在对话上下文里 输出物 每次探索产出 3 个文件，归档到 设计/v{版本号}-{模块名}/ 目录下： 文件 内容 用途 ------ ------ ------ 需求总结.md 背景、目标、功能范围、关键决策、技术约束 PRD 阶段的输入，讲清楚"为什么做、做什么" {模块名}-设计稿.html 主界面 HTML mockup PRD + 前端开发的视觉参考 {模块名}-全状态设计参考.html 所有页面状态、Toast、边界情况、交互规则表 前端开发直接对照实现 版本号和模块名由用户决定，必须问用户确认。 工作流程 第 1 步：需求发散与收敛 用户说了模糊想法后，主动追问： 痛点是什么 — 现在遇到了什么问题？为什么想做这个？ 核心场景 — 最典型的使用场景是什么？ 边界在哪 — 这个版本要做什么？不做什么？ 整理成结构化的需求共识： 禁止：用户说了一句话就开始出图。必须先对齐需求边界。 第 2 步：技术调研（按需） 判断是否需要调研：如果功能涉及外部数据（配置文件、API、第三方系统、文件格式），必须先调研技术约束。如果是纯 UI 功能不涉及外部依赖，跳过。 调研内容： 数据存储位置和格式 现有系统的接口和限制 技术可行性验证 调研结果会直接影响设计方案（比如发现两个工具配置格式不同，决定了界面需要展示"类型"列）。 禁止：跳过调研直接画图，画出来发现技术上实现不了。 第 3 步：ASCII 批量探索 一次出 5-8 个不同思路的 ASCII 布局方案，每个方案包含： ASCII 布局图 一句话说明核心思路 用户可以： 直接选一个方案 组合多个方案的元素（"B 的结构 + E 的开关风格"） 全部否掉，补充新的方向 禁止： 只出 1-2 个方案（用户没有选择空间） 超过 10 个方案（选择困难） 方案之间差异太小（换汤不换药） 第 4 步：确认设计风格 问用户以下问题： 1. 有没有已有的设计规范？（如 design-system.html） 有 → 读取并严格遵循 design tokens（颜色、字号、圆角、间距） 没有 → 问风格偏好，或直接出图让用户挑感觉 2. 有没有要参考的已有页面？（外框、导航结构） 有 → 读取参考页面，对齐外框样式（如 mac-window、sidebar 布局） 没有 → 按独立页面处理 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-exploration