메뉴
HTML prototype generation workflow for frontend UI exploration. Load this skill (which auto-loads html-output) before generating any HTML prototype. Specifies output directory, naming convention, style alignment, and iteration flow.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.
Build polished front-end UI together with a signature motion effect in a single self-contained HTML file, combining SVG.js / SVG filters and the Canvas 2D API. Use when the user asks to build a web page, landing page, dashboard, or component that has a special visual effect, animation, particle system, fluid/water distortion, text-reveal, deconstruction/reconstruction, or any "make the UI react / ripple / shatter / reassemble" request. Covers three worked patterns: (1) mouse-driven water ripple distortion over real UI, (2) particle cascade that deconstructs UI and rebuilds it as text, and (3) hop-step cluster that strikes DOM elements row-by-row with squash/stretch physics.
Produce rich, self-contained, single-file HTML as the default output format instead of Markdown — for specs, plans, code reviews, PR write-ups, reports, explainers, design explorations, slide decks, SVG diagrams, and small interactive editors with copy-as-prompt/JSON export. USE WHEN the user asks to "make an HTML file/artifact", or wants a richer, more readable, shareable deliverable (anything you'd otherwise write as a long Markdown doc: plans, reviews, reports, explainers, mockups, dashboards, editors). DO NOT USE WHEN the user explicitly wants Markdown/plain text, a Feishu/Lark doc, or a real multi-file production web app with a build step.
| name | prototype-workflow |
| description | HTML prototype generation workflow for frontend UI exploration. Load this skill (which auto-loads html-output) before generating any HTML prototype. Specifies output directory, naming convention, style alignment, and iteration flow. |
| license | MIT |
| compatibility | Requires html-output skill. Designed for dscode web frontend design system. |
| metadata | {"version":"1.0"} |
| requires | ["html-output"] |
在 explore 阶段讨论前端 UI 后生成 HTML 原型时的完整流程和约束。
当 explore 讨论涉及以下关键词时触发： UI, 页面, 界面, 组件, 交互, 样式, 视觉, CSS, frontend, landing, dashboard, 原型, prototype, redesign, 动效
docs/prototypes/<change-name>-<descriptor>.html
mcp-tool-progress-execution-view.htmlweb/index.css 中的 --color-* CSS 自定义属性作为 design tokenswarm-design-system 规范（12px 圆角气泡、8px 面板、6px 按钮、1px solid 分割线、无阴影、无渐变）--color-bg (#f8f7f5)--color-surface (#f3f2ef)--color-border (#e6e4e0)--color-text (#2d2a26)--color-accent (#ca8a04)docs/prototypes/README.md 了解上下文web/index.css 中的实际 CSS 变量值docs/prototypes/<change-name>-<descriptor>.html/opsx:propose — 原型将作为 change 的 prototype artifact 被整合docs/prototypes/ 中docs/prototypes/mcp-toolcard-execution-view-prototype.html — 完整展示了"HTML 原型→视觉迭代→捕获决策→实现"的标准流程本 skill 声明依赖 html-output skill。加载本 skill 时自动加载 html-output。