creation-flow-prototype

A workflow for creating an interactive prototype before building a medium-sized or larger project with a user interface. It uses the prototype to confirm what the product should look and do like.

In plain words
What is it for?
Use it to clarify features, layouts, visual direction, responsive behavior, and important states such as errors and dialogs before full implementation.
Why use it?
It reduces the risk of building the wrong screens or user flows before the requirements are agreed.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/tianemon/easymint/creation-flow-prototype
Any agent
npx skills add tianemon/EasyMint --skill creation-flow-prototype
Clone the repo
git clone --depth 1 https://github.com/tianemon/EasyMint

Made for: Claude Code, Codex.

Per session 39 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,146 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00039 $0.01146
Opus 5 $0.00019 $0.00573
Sonnet 5 $0.00008 $0.00229
Haiku 4.5 $0.00004 $0.00115

Measured 2d ago against content hash 8e9d8d257cc2, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

creation-flow-prototype 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 2d 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.

resources/skills/creation-flow-prototype/SKILL.md · 70 lines

What it actually says

快速原型

你(Mint)在创建项目引导的原型阶段,出原型让用户"先看再定"。

原型 Gate(G3/G4)

  • 触发条件:有 UI 且中等及以上项目——极简 / 简单 / 无 UI(纯后端 / CLI / API / 库)项目跳过本 skill,直接进入技术方案或编码
  • 原型是用户与 AI 对"最终产品是什么"的共同确认,确认后成为开发事实依据
  • 用户确认原型后才写完整项目文档(需求文档 + 技术架构 + task.json)

按场景分级

  • 商业交付:高保真完整(核心页 + 流程 + 状态 + 异常 + 视觉 + 品牌 + 响应式)
  • 实际使用:核心页面 + 核心流程
  • 兴趣创作:强调视觉探索与创作
  • 想法验证:核心用户路径,快速可交互
  • 学习实践:可选(用户参与设计也是学习)
  • 技术实验:可跳过(无明显 UI 时)

白话风格选项

  • 现代简约(白底卡片)/ 活力彩色(鲜艳渐变)/ 商务专业(深色克制)/ 科技感(暗色光效)
  • 配品牌库参考图,不问设计术语

委派前需求确认(必经,先对齐再动手)

出原型前,先和用户确认需求理解,等用户说「开始/可以」再委派,不要跳过此步直接动手:

  1. 汇总当前已确认的输入:核心功能清单、项目场景、UI 风格方向、完成度/范围(表单已采集 + 对话已确认的)
  2. 用自己的话复述:"我准备按这个方向做原型:功能 [A/B/C]、风格 [X]、[场景] 场景。你看还有要补充或调整的吗?"
  3. 等用户确认(或补充调整后再次确认)——确认后才委派 Mint-D

为什么:原型是用户与 AI 对"最终产品是什么"的共同确认,必须先对齐输入再做,否则原型做偏、白做一轮。

调 Mint-D 出原型

  • 委派 Mint-D 设计师产出 HTML 原型(种子模板 + 品牌库 + :root 变量)
  • 要求视觉四件套:色板 / 字体角色 / 布局线框 / 签名元素(大胆只花一处,其余克制)
  • Mint-D 交付前必须做渲染正确性自查(从代码推理,不依赖截图)

交付前渲染正确性审查(必经,Mint 负责)

收到 Mint-D 的原型后,先审读 prototype/index.html 代码,从代码层面确认能正常显示,通过后才调 show_prototype 让用户看:

  • 无 CSS 规则覆盖元素显隐(display/visibility 覆盖 hidden,导致弹窗/遮罩默认显示、页面被盖住)
  • 无 CSS 变量错误(自引用 var(--x: var(--x))、拼写错误、未定义引用)
  • 遮罩/弹窗默认隐藏、定位不盖住首屏;z-index 层级合理
  • 标签配对完整、CSS 无无效声明
  • 首屏内容可见(无纯白背景配浅色文字、无关键内容被意外隐藏)

审查只从代码推理,不要用 Playwright 渲染、不要启动 http 服务器、不要截图分析——模型不一定支持看图,且审查目的是发现代码级缺陷;打开给用户看(open / show_prototype)与审查是两件事。

若代码审查发现问题,退回 Mint-D 修改,或按下方"原型修改"分档直接改。确认无渲染异常后才 show_prototype。

原型修改(分档)

  • 小改(颜色/文案/布局微调):Mint 直接改 prototype/index.html——原型迭代不受"单文件 ≤ 20 行"限制,快速响应用户反馈,不重新委派
  • 大改(结构重排/重新设计):重新委派 Mint-D(它掌握设计规范/品牌库/种子模板)
  • 每次改动后做一次渲染正确性审查(同上),通过后再展示

确认后(G4 通过)——写完整文档,再问是否开始开发

原型确认后(功能需求、架构可能已随原型调整),此时才写完整项目文档(需求文档 + 技术架构 + task.json),然后 Read creation-flow-techspec 进入技术方案与开发。

Changes

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.

  1. 2d ago First seen · 70 lines · 39 tokens per session scan A 8e9d8d257cc2

Subscribe to this mod's changes

creation-flow-prototype is a skill published in the GitHub repository tianemon/EasyMint (21 stars, last pushed 2d ago), licensed MIT. It adds 39 tokens to every session and 1,146 once invoked, about $0.0002 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.

Related

Other skills, from other repositories

huashu-design

花叔Design(Huashu-Design)——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索、设计方向顾问与专家评审。HTML是工具不是媒介,根据任务embody UX设计师/动画师/幻灯片设计师/原型师,避免web design tropes。触发词:做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、app原型、iOS原型、导出MP4/GIF、60fps视频、设计风格、配色方案、视觉风格、评审、review this…

zhukunpenglinyutong/desktop-cc-gui · 295 tokens

coss

Give your AI assistant deep knowledge of coss ui components, patterns, and best practices.

zhukunpenglinyutong/desktop-cc-gui · 18 tokens

mermaid-diagram

Use when the user asks for a flowchart, architecture diagram, sequence diagram, ER diagram, state machine, gantt chart, or any visual that fits Mermaid syntax. Hope Agent's chat renders Mermaid blocks natively, so the diagram appears inline.

shiwenwen/hope-agent · 55 tokens

nextclaw-product-visual-assets

当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用;也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。.

Peiiii/nextclaw · 115 tokens

source-command-audit-whitepapers

Audit version freshness, FR/EN parity, and metadata quality of all whitepapers and recap cards.

FlorianBruniaux/claude-code-ultimate-guide · 26 tokens

self-assessment

Interactive skill assessment with personalized learning path generation.

FlorianBruniaux/claude-code-ultimate-guide · 12 tokens