中文为主,English summary included below.
IdeaToDesign 是一个面向产品构思与设计推进场景的 Agent Skill。
它的目标不是替代设计师,也不是生成冗长流程文档,而是把模糊想法逐步整理为清晰的产品结构、分阶段视觉草稿,以及一份可供设计评审和后续开发参考的正式设计文档。
IdeaToDesign 适用于以下场景:
- 只有一句模糊想法,希望快速整理为产品方案
- 已有部分页面、流程或参考图,希望继续推进设计
- 希望借助成熟设计模式减少补充细节的负担
- 希望网页设计更有语境化创意,避免模板化、陈旧或 AI 味
- 希望将零散设计过程收敛为正式的设计文档
它强调:
- 先任务流,后页面
- 先结构化规格,后视觉出图
- 先语境化创意方向,后高保真出图
- 先核心页面,后扩展页面
- 让最终交付保持轻量、清晰、可读
IdeaToDesign 的默认目标是产出三类核心结果:
Design-Spec.md正式设计文档,作为主要交付物assets/分阶段设计图资产目录state.json机器可读状态文件,用于断点续跑与低成本延续
这意味着它不是“只会生图”的技能,也不是“只会写文档”的技能,而是一套从想法到正式设计说明的推进机制。
默认语言约束:
- 面向用户、设计师、开发者阅读的正式产物默认使用中文
- 仅供 Agent 内部使用的状态字段、辅助提示或内部说明可保留英文
IdeaToDesign 默认使用三种入口模式:
Start from idea从模糊想法开始整理Continue current design基于现有状态、文档或图稿继续推进Finalize design doc将已存在的结构与图稿整理为正式设计文档
内部流程分为五个阶段:
ScopeStructureVisual DirectionImage IterationFinalize
设计上刻意保持“前台简单、后台有序”:
- 用户不需要一次性补齐所有细节
- 技能会主动给出合理假设和候选结构
- 复杂流程信息尽量隐藏在后台文件中
- 最终对外只暴露轻量交付结果
本技能遵循以下核心原则:
task-flow-first先定义核心用户任务流,再展开页面spec-as-source-of-truth结构化规格是事实来源,图片只是表达手段reference-driven-hypothesis当用户输入不完整时,可参考成熟设计模式生成可编辑假设contextual-creative-direction视觉方向应符合行业、用户与信任要求;传统项目可以传统,但不能粗糙或模板化stage-gated-progression通过阶段门禁控制推进,避免跳步失控selective-fidelity-escalation默认只对核心页面提升保真度designer-friendly-output最终输出应让设计师愿意看、开发拿得动
很多“从想法到设计”的流程容易出现两个问题:
- 过度依赖用户逐项补细节,导致推进成本高
- 最终堆出大量文档和过程材料,设计师与开发都不想看
IdeaToDesign 的处理方式是:
- 使用成熟产品模式帮助补全结构假设
- 使用轻量创意方向和审美评审降低同质化、过时感和 AI 模板感
- 控制默认范围,只深做核心 flow 和核心页面
- 将过程留档与正式交付分开
- 用单一主文档承载最终设计说明,降低阅读成本
当前仓库结构如下:
idea-to-design/
SKILL.md
quick-start.md
templates/
design-spec-template.md
state-template.json
references/
stage-gates.md
prompt-patterns.md
review-checklists.md
creative-direction-system.md
aesthetic-review-system.md
说明:
SKILL.md主技能定义quick-start.md超短上手说明,用于降低高频使用时的 token 开销templates/正式设计文档与状态文件模板references/阶段门禁、出图 prompt 模式、创意方向与评审清单
IdeaToDesign 不会默认把所有项目都做成最新潮流风格。它会先判断产品语境,再选择合适的新鲜度:
- 传统信任型项目可以保持克制、正式、稳定
- SaaS 和工具型产品强调清晰、效率和现代实用感
- 消费、内容和品牌项目可以增加更强的视觉记忆点
默认只做轻量检查:
Context FitAudience FitOne Memorable MoveAnti-AI-Slop CheckReal Content First
只有核心页面、首页、营销页或高保真页面才展开更完整的差异化方向和审美评审。
核心页面会记录 visual_dna,包括已批准方向、禁用风格、材质语言、组件性格和下一轮 prompt 约束。后续页面应继承这些 DNA,但不能机械复制同一套构图。
如果你希望将本技能用于自己的技能目录,推荐做法:
- 复制
idea-to-design/整个目录 - 放入你的 Agent Skill 路径
- 在实际项目中以
Start from idea、Continue current design或Finalize design doc模式使用
建议先从一个小范围任务开始,例如:
- 一个核心用户流程
- 3 到 5 个关键页面
- 一份轻量正式设计文档
这样最容易验证该技能是否符合你的设计推进习惯。
本项目默认追求以下输出特征:
- 正式但不过度官僚
- 友好但不过度口语
- 清晰、克制、便于交接
- 强调设计决策,而不是堆积过程噪音
IdeaToDesign is an agent skill for turning vague product ideas into structured design outcomes.
It helps:
- shape rough concepts into flows and pages
- use mature design patterns as editable references
- choose contextual creative directions instead of generic trendy output
- review high-fidelity visuals with lightweight aesthetic gates
- iterate visuals in controlled stages
- consolidate outputs into a formal
Design-Spec.md
Default outputs:
Design-Spec.mdassets/state.json
Recent additions:
Creative Direction Summarybefore high-fidelity core visualsAesthetic Reviewbefore accepting core-page assets- project-level
visual_dnamemory for continuity without repeated long prompts
The goal is not to generate more documentation.
The goal is to generate a design package that is readable, reviewable, and practical for downstream implementation.
Current version is an initial public release focused on:
- usability
- controlled scope
- token efficiency
- contextual creative direction
- designer-friendly final output
Future refinement may include:
- stronger example outputs
- improved quick-start workflows
- lighter continuation patterns
This repository is currently shared as a public skill project for reference and reuse.
If you plan to adapt it for your own workflow, it is recommended to adjust:
- tone of output
- final document depth
- image iteration strategy
- archival detail level
to fit your team and project size.