القائمة
Frontend UI prototype workflow — clarify intent, explore directions, preview across viewports, diff against references, deliver with screenshot evidence
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Excel 电子表格读写与编辑最佳实践 — 用 xlsx_read/xlsx_write/xlsx_edit 处理 .xlsx 时遵守的公式、数字格式与可维护性纪律
生成与读取 PDF 文档（报告、合同、交付文档）——原生 pdfkit 渲染，自动解析系统 CJK 字体支持中文，支持 heading/paragraph/table/code/list 内容块与页码页脚
PowerPoint 演示文稿生成纪律 — 用 pptx_create/pptx_read 产出有设计感、零 AI 味的 .pptx（PPT、幻灯片、deck、演讲稿、汇报）
在任意项目中执行开发任务时的测试方法论——包括测试能力探测、RED→GREEN 纪律、探针管理、环境模拟、测试策略选择。当面对 bugfix、功能开发、重构等需要验证的代码改动时使用。
创建计划文档——Plan Mode 下写设计文档；独立使用时写可执行实现计划（含 TDD/验证命令）
认知对齐前置闸门：复杂任务前强制完成意图保存、问题层级标注、证据时间线标注和关键词扩展搜索。 防止 AI 过早把用户的复杂意图压缩成局部工程任务。 触发词：「认知对齐」「cognitive alignment」「先对齐」「别急着写代码」「我们在解决什么问题」。 也可由 deep-brainstorm / brainstorming 在复杂任务前自动前置调用。
| name | design-prototype |
| description | Frontend UI prototype workflow — clarify intent, explore directions, preview across viewports, diff against references, deliver with screenshot evidence |
| triggers | ["设计","UI","原型","landing","界面","mockup","prototype","dashboard","首页","落地页","wireframe","视觉","layout"] |
对标 Codex Product Design 插件的方法论，适配天枢交付纪律。
开始动手前，若以下任一项不明，只问一个最关键的问题：
不要一次抛多个选择题。
每个方向输出单文件 HTML 原型：
文件命名：prototype-{direction}.html（如 prototype-minimal.html）
每个方向完成后：
ui_preview — mobile / tablet / desktop 三视口截图ui_responsive_audit — 抓横向溢出、过小点击区、过小字号有问题先修 HTML，再进入下一步。不要带着 overflow 交付。
用户提供参考图或竞品截图时：
ui_palette — 从参考图提取色板，写入 CSS variablesui_diff — 与参考/mockup 像素对比，目标 mismatch < 5%交付设计任务时必须附带：
ui_preview 截图路径ui_responsive_audit 结果（零 high 级 issue，或明确列出已知遗留）ui_diff mismatch 百分比口头描述「已经 responsive 了」不算交付。
| 工具 | 何时用 |
|---|---|
ui_preview | HTML/URL → 多视口 PNG |
ui_diff | 实现 vs 参考 mockup |
ui_palette | 参考图 → CSS/Tailwind tokens |
ui_responsive_audit | 布局问题清单 + 截图 |
<table> 做整页布局（2020 年代前的 hack）tianshu-design 插件时会话里调用上述工具——先 /plugin install 或让用户安装CHROME_PATH