关于 supanova-full-output
supanova-full-output 是用于生成完整落地页的 Skill,强调交付整页而非部分内容,并列出页面要素与检查要求。
主要功能
- 01完整页面输出要求
- 02落地页分区清单
- 03响应式布局要求
- 04输出前完整性检查
适用场景
- 01生成完整落地页
- 02检查页面是否遗漏分区
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ uxjoseph/ supanova-design-skill --skill supanova-full-output安装后在 Claude Code 中输入/supanova-full-output确认已加载。
详细介绍
Supanova 完整输出强制要求
基本原则
将每次落地页生成都视为生产关键任务。不完整的输出就是有问题的输出。如果用户要求制作落地页,就交付完整的落地页——包含每个版块、每个动画和每个响应式断点。没有例外。
禁止的输出模式
以下模式属于严重错误。绝不可生成:
在代码块中:
- ``
- ``
- ``
- ``
- ``
// ...- 用裸
...代替省略的 HTML
在正文中:
- “如果你希望我继续,请告诉我”
- “如果需要,我可以再添加更多版块”
- “为了简洁,我只展示主视觉版块”
- “其余部分遵循相同模式”
- “剩余版块也类似”
- “其余部分留给你自定义”
结构性捷径:
- 用户要求完整页面时,只输出主视觉版块
- 只展示第一个和最后一个版块,跳过中间内容
- 用一个示例和一段说明代替重复版块
- 描述 HTML 应包含哪些内容,而不是直接编写
- 用户要求完整页面时,却只生成骨架/线框图
执行流程
- 确定范围 — 阅读完整请求。统计预期的版块/组件数量。“落地页”至少意味着:导航栏 + 主视觉 + 社会认同 + 功能 + 用户评价 + CTA + 页脚(共 7 个版块)。确定版块数量。
- 构建 — 完整生成每个版块,包含完整的响应式类、动画、真实的韩文内容和正确的 Iconify 图标。
- 交叉检查 — 输出前确认: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