creation-flow-prototype

creation-flow-prototype is a skill for Claude Code, Codex from tianemon/EasyMint. It costs 39 tokens per session (1,399 once invoked), scanned A, original, MIT.

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

Written for no agent in particular: nothing here depends on one.

Good fit Use it to clarify features, layouts, visual direction, responsive behavior, and important states such as errors and dialogs before full implementation.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/tianemon/easymint/creation-flow-prototype
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.

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.

Wrote 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.

agentmods badge for creation-flow-prototype

README.md
[![agentmods](https://agentmods.dev/badge/skills/tianemon/easymint/creation-flow-prototype/github.svg)](https://agentmods.dev/skills/tianemon/easymint/creation-flow-prototype)
Your own site
<a href="https://agentmods.dev/skills/tianemon/easymint/creation-flow-prototype"><img src="https://agentmods.dev/badge/skills/tianemon/easymint/creation-flow-prototype/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.

agentmods 80×15 button for creation-flow-prototype

Your own site · 80×15
<a href="https://agentmods.dev/skills/tianemon/easymint/creation-flow-prototype"><img src="https://agentmods.dev/badge/skills/tianemon/easymint/creation-flow-prototype.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
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,399 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.1 $0.00039 $0.01399
Opus 5.5 $0.00016 $0.00560
Sonnet 5.5 $0.00008 $0.00280
Haiku 4.5 $0.00004 $0.00140

Measured 29d ago against content hash c4f294102354, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 29d 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 · 75 lines

How it starts

The opening of the file, as written. The whole thing — 75 lines — stays where its author put it; the contents beside it link to each section on GitHub.

快速原型

你(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 变量)
  • 起点由你指定,子 Agent 不自选:prompt 里必须写明 模板:<文件名>(可选 template-landing.html / template-dashboard.html / template-form.html / template-detail.html,参考版式用,位于项目 .easymint/templates/)或 自由设计(附明确的设计方向)。不要只说"匹配模板"就撒手—— 子 Agent 会去翻目录、读多个模板做对比,白耗回合
  • 需求匹配不上任何一个模板时,明确写「自由设计」并给出方向
  • 要求视觉四件套:色板 / 字体角色 / 布局线框 / 签名元素(大胆只花一处,其余克制)
  • Mint-D 交付前必须做渲染正确性自查(下面"交付前渲染正确性审查"的代码级 5 条;有渲染能力时可再截图核对)

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

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

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

审查可以渲染截图核对:有渲染能力时用 Playwright 渲染并截图、直接读图判断(配色糊、间距崩、首屏空白、弹窗盖住页面这类问题看图最快);读不到图(纯文本模型)再回退到从代码推理。上面的代码级清单仍然要做——它查的是"读代码就能确定的缺陷",比截图更快更准。「打开给用户看」与「审查」仍是两件事:用户说"打开 / 看看效果"时只调 open 或 show_prototype,不夹带验证。

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

原型修改(分档)

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

Read the full file on GitHub · 75 lines

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. 29d ago Changed · +5 lines c4f294102354
  2. 1mo 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 (79 stars, last pushed 7d ago), licensed MIT. It adds 39 tokens to every session and 1,399 once invoked, about $0.0002 per session on Opus 5.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

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

impeccable

Use when the user wants distinctive, production-grade frontend design, anti-generic AI aesthetics, UX critique, technical UI audits, or final polish through bundled Impeccable references and an optional upstream detector CLI.

Peiiii/nextclaw · 47 tokens

ui-ux-pro-max

Use when the user wants professional UI/UX design guidance, design-system generation, UX review, or stack-specific frontend guidance through a bundled local UI/UX Pro Max dataset and Python search runtime.

Peiiii/nextclaw · 45 tokens

nextclaw-skin-studio

A studio for browsing, applying, creating, refining, switching, inspecting, and removing custom NextClaw skins. A skin changes an app's visual appearance and can include CSS, JavaScript, images, SVG, layout changes, and motion.

Peiiii/nextclaw · 115 tokens

eval-hooks

Audit Claude Code and Codex hooks for validity, safety, and correctness across settings.json, hooks.json, config.toml, plugin, and skill or agent frontmatter hooks. Resolves each command, checks event names, handler types, matchers, exit-code and JSON decision strategy, and timeouts against each host's documented…

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

design-patterns

Detect, suggest, and evaluate GoF design patterns in TypeScript/JavaScript codebases. Use when refactoring code, applying singleton/factory/observer/strategy patterns, reviewing pattern quality, or finding stack-native alternatives for React, Angular, NestJS, and Vue.

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