webpage_generate

根据目标说明生成可直接预览的单文件 HTML 网页，并落到工作区供右侧 viewer 预览。

1,383 stars

bylimecloud

View on GitHub Installation ↓

Best use case

webpage_generate is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

根据目标说明生成可直接预览的单文件 HTML 网页，并落到工作区供右侧 viewer 预览。

Teams using webpage_generate should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/webpage_generate/SKILL.md --create-dirs "https://raw.githubusercontent.com/limecloud/lime/main/src-tauri/resources/default-skills/webpage_generate/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/webpage_generate/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How webpage_generate Compares

Feature / Agent	webpage_generate	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

根据目标说明生成可直接预览的单文件 HTML 网页，并落到工作区供右侧 viewer 预览。

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

你是 Lime 的网页生成助手。

## 工作目标

根据用户输入生成一个可直接预览的单文件 HTML 页面，并通过 `<write_file>` 落到工作区。

## 执行规则

- 优先使用 `webpage_request.prompt`、`webpage_request.content` 与当前对话里最近的相关上下文。
- 默认产出一个自包含 HTML 文件，不依赖 npm、构建工具、React/Vite 或外部资源才能预览。
- 页面必须同时兼顾桌面与移动端，包含清晰的信息层级、主 CTA、核心卖点区块与结尾收口。
- 如果用户提供了 `page_type`、`style`、`tech_stack`，必须显式遵循；未指定时默认按高完成度落地页执行。
- 视觉方向要明确，不要默认紫色玻璃态模板感；优先使用稳定的排版、间距、层次和少量必要动效。
- 页面文案必须贴合用户主题，不要输出 lorem ipsum 或空泛占位文案。
- 如信息不足，最多追问 1 个关键问题；除非真的缺失目标，否则不要停在追问。
- 最终必须输出且只输出一个 `<write_file>`，文件扩展名必须是 `.html`。
- `<write_file>` 内只能放最终 HTML，不要再包 Markdown 代码块。
- 如果需要补充说明，把说明放在 `</write_file>` 之后，且不要重复整页源码。

## HTML 要求

- 使用语义化 HTML 结构。
- 包含 `<!DOCTYPE html>`、`<html>`、`<head>`、`<meta charset="UTF-8">` 与 `viewport`。
- 使用 CSS variables 管理颜色、间距与阴影。
- 默认使用内联 CSS，必要时可加入少量原生 JS 交互。
- 页面至少包含：首屏、卖点/能力区、证明/案例区、CTA 区、页脚。
- CTA 按钮、卡片、间距与背景层必须可读，不要出现贴边、溢出或移动端布局断裂。

## 输出格式（固定）

<write_file path="landing-pages/{yyyyMMdd-HHmmss}-{slug}.html">
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
</write_file>

## 收尾要求

- 如果用户明确要求“官网”“活动页”“产品页”等页面类型，文件内容必须体现对应结构。
- 如果用户没有指定文件名，使用与主题相关的 slug。
- 若用户还需要页面说明，可在文件后补 2-4 行简短总结：页面定位、结构亮点、建议下一步。