mcpField
S
supanova-full-output

supanova-full-output

github.com/uxjoseph设计与 UI399188 次安装32 周前更新
代码仓库

关于 supanova-full-output

supanova-full-output 是用于生成完整落地页的 Skill,强调交付整页而非部分内容,并列出页面要素与检查要求。

主要功能

  1. 01完整页面输出要求
  2. 02落地页分区清单
  3. 03响应式布局要求
  4. 04输出前完整性检查

适用场景

  1. 01生成完整落地页
  2. 02检查页面是否遗漏分区

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/uxjoseph/supanova-design-skill --skill supanova-full-output

安装后在 Claude Code 中输入/supanova-full-output确认已加载。

详细介绍

Supanova 完整输出强制要求

基本原则

将每次落地页生成都视为生产关键任务。不完整的输出就是有问题的输出。如果用户要求制作落地页,就交付完整的落地页——包含每个版块、每个动画和每个响应式断点。没有例外。

禁止的输出模式

以下模式属于严重错误。绝不可生成:

在代码块中:

  • ``
  • ``
  • ``
  • ``
  • ``
  • // ...
  • 用裸 ... 代替省略的 HTML

在正文中:

  • “如果你希望我继续,请告诉我”
  • “如果需要,我可以再添加更多版块”
  • “为了简洁,我只展示主视觉版块”
  • “其余部分遵循相同模式”
  • “剩余版块也类似”
  • “其余部分留给你自定义”

结构性捷径:

  • 用户要求完整页面时,只输出主视觉版块
  • 只展示第一个和最后一个版块,跳过中间内容
  • 用一个示例和一段说明代替重复版块
  • 描述 HTML 应包含哪些内容,而不是直接编写
  • 用户要求完整页面时,却只生成骨架/线框图

执行流程

  1. 确定范围 — 阅读完整请求。统计预期的版块/组件数量。“落地页”至少意味着:导航栏 + 主视觉 + 社会认同 + 功能 + 用户评价 + CTA + 页脚(共 7 个版块)。确定版块数量。
  2. 构建 — 完整生成每个版块,包含完整的响应式类、动画、真实的韩文内容和正确的 Iconify 图标。
  3. 交叉检查 — 输出前确认:HTML 文件是否以 <!DOCTYPE html> 开头并以 </html> 结尾?是否包含全部 7 个或更多版块?每个版块是否都填充了完整的真实内容?

处理较长的输出

当落地页接近令牌上限时:

  • 不要压缩剩余版块。
  • 不要跳到页脚。
  • 保持完整质量,写到一个清晰的断点处(完整的 </section> 标签结尾)。
  • 以如下内容结束:
[PAUSED — X of Y sections complete. Send "continue" to resume from: next section name]

收到“继续”后,从你停止的位置开始,准确接续下一个 <section>。不要回顾,不要重新输出 <head>,也不要重复内容。

落地页完整性标准

完整的 Supanova 落地页必须包含:

必需元素
  • 包含 <html lang="ko"> 的 <!DOCTYPE html>
  • 完整的 <head>,包含 meta 标签、Tailwind CDN、Pretendard 字体、Iconify 和 tailwind.config
  • 导航栏(悬浮玻璃效果或简约栏)
  • 主视觉版块(首屏内,影响力最大的单个版块)
  • 至少一个信任/社会认同元素
  • 功能展示(至少 3–5 个功能)
  • 用户评价或案例研究
  • 主要 CTA 版块
  • 包含必要链接的页脚
  • 滚动动画 JavaScript(IntersectionObserver 设置)
  • 完整的 </html> 结束标签
必需质量标准
  • 每个版块都包含真实的韩文内容(没有占位文本)
  • 每个版块都包含完整的响应式类(sm:、md:、lg:)
  • 每个交互元素都具有 hover/active 状态
  • 每张图片都包含 loading="lazy"、alt 文本和有效的 src
  • 每个图标都使用 <iconify-icon icon="solar:..."></iconify-icon>

快速检查

完成任何回复前,请确认:

  • 列表中的禁止模式没有出现在任何位置
  • HTML 文件从 <!DOCTYPE html> 到 </html> 完整无缺
  • 所有请求的版块都已包含并填充完整
  • 每个代码块都包含可实际运行的 HTML,而非说明
  • 没有为了节省篇幅而缩短、概述或省略任何内容
  • 所有可见文本内容都是自然的韩文

评论

支持 Markdown