← Back to Skills Marketplace
Gin Ssr Template
by
@qqz · @qwwe · @qqdq · @qdad · @ddac
· GitHub ↗
· v0.0.14
· MIT-0
216
Downloads
0
Stars
0
Active Installs
14
Versions
Install in OpenClaw
/install gin-ssr-template
Description
根据 Figma 设计稿截图生成可直接运行的 Gin SSR 页面模板（HTML + CSS）。当用户发送“gin前端模板”或提供 Figma 页面截图时触发：生成的页面必须优先保证可运行、可预览、结构完整；禁止输出任何 {{.data}}、{{.Path}}、{{.Config}} 这类动态取值；head 中...
README (SKILL.md)
Gin SSR 前端模板生成（OpenClaw）
0. 最高优先级
- 必须生成两个真实文件
- HTML：
app/templates/page/{页面名}.html - CSS：
app/static/css/{页面名}.css
- 必须保证页面可运行
- 输出的 HTML 必须是完整可渲染结构
- 不要依赖
{{.data.Config.*}}、{{.data.Path}}、{{.Title}}这类动态模板变量 - 除
{{define "页面名"}}和{{end}}外，默认不要输出其他 Go 模板变量 - 优先生成“直接打开就有完整结构”的静态页面骨架
- 必须最终回复
- 回复中必须包含：页面名、HTML 路径、CSS 路径
- Telegram 会话必须追加两个
MEDIA:行 - 禁止静默结束
- main 必须按截图严格还原
- 不允许只写占位注释
- 不允许 main 为空
- 必须把截图里的核心模块、文案、按钮、输入框、卡片、列表都写出来
1. 页面名规则
1.1 标题识别
- 优先识别截图顶部标题或页面主标题
- 如果标题太泛（如“详情”“设置”“中心”），必须结合 main 首屏核心内容决定页面名
- 如果识别不到标题，在 HTML 顶部加注释：
\x3C!-- 页面标题识别失败，需确认 -->
1.2 页面名生成
页面名必须和“标题 + main 语义”一致，禁止随便命名。
优先级：
- 优先用准确英文语义命名：
个人信息+ 资料编辑表单 →user_profile收货地址+ 地址列表 →address_list订单详情+ 订单信息卡片 →order_detail修改密码+ 表单 →password_edit
- 无法稳定翻译时，使用拼音小写下划线：
漫画分类→manhua_fenlei
最终：
- HTML define：
{{define "{页面名}"}} - HTML 文件：
app/templates/page/{页面名}.html - CSS 文件：
app/static/css/{页面名}.css
2. 输出原则
2.1 禁止动态取值
生成内容时，禁止出现以下写法：
{{.data...}}{{.Config...}}{{.Path}}{{.Title}}{{range ...}}{{if ...}}
也就是说，页面内容、SEO、链接、标题、描述、JSON-LD 都必须使用硬编码静态值。
2.2 允许保留的模板语法
只允许保留：
{{define "{页面名}"}} ... {{end}}
这是为了兼容 Gin 模板文件结构。
## 3. head 模板要求
head 必须完整，字段不得缺失。所有值全部硬编码，保证页面开箱可运行。
```html
{{define "{页面名}"}}
\x3C!doctype html>
\x3Chtml lang="zh-CN">
\x3Chead>
\x3Cmeta name="viewport" content="width=device-width, initial-scale=1.0" />
\x3Cmeta charset="UTF-8" />
\x3Cmeta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
\x3Cmeta name="renderer" content="webkit" />
\x3Cmeta name="HandheldFriendly" content="true" />
\x3Cmeta http-equiv="x-dns-prefetch-control" content="on" />
\x3Cmeta name="referrer" content="same-origin" />
\x3Cmeta name="yandex-verification" content="YANDEX_VERIFICATION_REPLACE_ME" />
\x3Cmeta name="msvalidate.01" content="MS_VALIDATE_REPLACE_ME" />
\x3Ctitle>页面标题\x3C/title>
\x3Cmeta property="og:title" content="页面标题" />
\x3Cmeta property="og:site_name" content="站点名称" />
\x3Cmeta property="og:type" content="website" />
\x3Cmeta property="og:url" content="https://example.invalid/current-page" />
\x3Cmeta property="og:image" content="https://example.invalid/favicon.ico" />
\x3Cmeta property="og:description" content="页面描述" />
\x3Cmeta name="twitter:title" content="页面标题" />
\x3Cmeta name="twitter:description" content="页面描述" />
\x3Cmeta name="twitter:card" content="summary_large_image" />
\x3Cmeta name="twitter:image" content="https://example.invalid/favicon.ico" />
\x3Clink rel="shortcut icon" href="https://example.invalid/favicon.ico" />
\x3Cmeta name="description" content="页面描述" />
\x3Cmeta name="keywords" content="关键词1,关键词2,关键词3" />
\x3Clink rel="canonical" href="https://example.invalid/current-page" />
\x3Cmeta name="robots" content="index, follow" />
\x3Cmeta name="rating" content="adult" />
\x3Cmeta name="theme-color" content="#ffffff" />
\x3Cmeta name="apple-mobile-web-app-capable" content="yes" />
\x3Cmeta name="apple-mobile-web-app-status-bar-style" content="#ffffff" />
\x3Cmeta name="template" content="Mirages" />
\x3Clink rel="icon" type="image/x-icon" href="https://example.invalid/favicon.ico" />
\x3Cscript type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://example.invalid/#org",
"name": "站点名称",
"url": "https://example.invalid",
"logo": {
"@type": "ImageObject",
"url": "https://example.invalid/static/images/logo.png"
}
},
{
"@type": "WebSite",
"@id": "https://example.invalid/#website",
"url": "https://example.invalid",
"name": "站点名称",
"inLanguage": "zh-CN",
"publisher": {
"@id": "https://example.invalid/#org"
},
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.invalid/{search_term_string}",
"query-input": "required name=search_term_string"
}
},
{
"@type": "CollectionPage",
"@id": "https://example.invalid/#webpage",
"url": "https://example.invalid/current-page",
"name": "页面标题",
"description": "页面描述",
"inLanguage": "zh-CN",
"isPartOf": {
"@id": "https://example.invalid/#website"
},
"about": {
"@id": "https://example.invalid/#org"
}
}
]
}
\x3C/script>
\x3Cscript src="/static/js/imgDecypt.js">\x3C/script>
\x3Cscript src="/static/js/index.js">\x3C/script>
\x3Cscript src="/static/js/bootstrap.bundle.min.js">\x3C/script>
\x3Clink rel="stylesheet" href="/static/css/bootstrap.min.css" />
\x3Clink rel="stylesheet" href="/static/css/style.css" />
\x3Clink rel="stylesheet" href="/static/css/{页面名}.css" />
\x3C/head>
\x3Cbody>
\x3Cheader class="page-header">
\x3Cdiv class="page-header__inner">
\x3Ca class="page-header__logo" href="/">LOGO\x3C/a>
\x3Cnav class="page-header__nav">
\x3Ca href="/">首页\x3C/a>
\x3Ca href="/list">列表\x3C/a>
\x3Ca href="/about">关于\x3C/a>
\x3C/nav>
\x3C/div>
\x3C/header>
\x3Cmain class="{页面名}-page">
\x3C!-- 必须在这里用原生 HTML 严格还原截图 -->
\x3C/main>
\x3Cfooter class="page-footer">
\x3Cdiv class="page-footer__inner">
\x3Cp>© 2026 Site Name. All Rights Reserved.\x3C/p>
\x3C/div>
\x3C/footer>
\x3C/body>
\x3C/html>
{{end}}
```
## 4. main 区域还原规则
### 4.1 结构必须完整
main 中必须包含截图里能看到的真实结构，例如：
- 页面标题区
- 面包屑/说明文案
- 卡片区
- 表单区
- 列表区
- 操作按钮区
- 头像/封面/图标区
- 标签/状态区
### 4.2 文案必须补齐
- 能识别出的文案必须直接写入 HTML
- 看不清时写中文注释：
```html
\x3C!-- 文案待确认 -->
```
- 不能因为文案看不清就把整个模块省略掉
### 4.3 CSS 必须可用
CSS 必须包含：
- 页面根容器
- 每个区块容器
- 字号、行高、颜色
- 边框、圆角、背景、阴影
- Flex / Grid 布局
- 间距（margin/padding/gap）
- 按钮、输入框、列表项样式
- 必要的移动端适配
## 5. 响应式规则
- PC 稿：默认桌面样式
- 有 H5 稿：补充
```css
@media screen and (max-width: 824px) {
/* H5样式 */
}
```
- 只有 H5 稿：补充
```css
@media screen and (min-width: 825px) {
/* PC样式 */
}
```
## 6. 生成步骤
1. 先识别截图 title
2. 再识别 main 里的所有模块和文案
3. 生成页面名 `{页面名}`
4. 先输出完整 HTML 骨架
5. 再把 main 按截图补全
6. 生成对应 CSS
7. 写入两个文件
8. 回复文件路径和附件
## 7. 最终回复格式
最终回复必须是：
```text
✅ 生成完成
页面名: {页面名}
HTML: app/templates/page/{页面名}.html
CSS: app/static/css/{页面名}.css
```
Telegram 会话必须追加：
```text
MEDIA:app/templates/page/{页面名}.html
MEDIA:app/static/css/{页面名}.css
```
```
```
Usage Guidance
This skill is instruction-only and coherent with its goal: it will generate two static files (HTML and CSS) and expects the agent to create them at app/templates/page/{name}.html and app/static/css/{name}.css. There are no downloads or credentials requested, which lowers technical risk. Before installing or running: (1) ensure you are comfortable allowing the agent to write files into your project repository or runtime filesystem at those paths; (2) review generated files before deploying — the skill intentionally hardcodes SEO/JSON‑LD and other values (example.invalid and site placeholders) and forbids dynamic template variables, so you must manually replace any environment-specific or sensitive values; (3) note the SKILL.md includes Telegram-specific output (MEDIA: lines) — if you use a different integration you may want to adjust or ignore that requirement. If you need dynamic template variables or to fetch live assets, request a change to the skill instructions; otherwise this skill appears consistent and not suspicious.
Capability Analysis
Type: OpenClaw Skill
Name: gin-ssr-template
Version: 0.0.14
The skill bundle provides instructions for an AI agent to generate Gin SSR (Server-Side Rendering) HTML and CSS templates based on Figma design screenshots. It defines specific file paths (app/templates/page/ and app/static/css/), enforces strict coding standards to ensure static previewability, and includes standard SEO/metadata boilerplate. No indicators of data exfiltration, malicious execution, or harmful prompt injection were found in SKILL.md or _meta.json.
Capability Assessment
Purpose & Capability
Name/description (generate Gin SSR templates from Figma screenshots) match the runtime instructions which describe how to produce two files (HTML + CSS) under app/templates/page and app/static/css. No unrelated credentials, binaries, or installs are requested.
Instruction Scope
SKILL.md is detailed and stays on task (construct full static templates, forbid dynamic Go template variables except wrapper, and return file paths). Two behavioral notes: it requires creating real files at repo-like paths (expected for a template generator), and it includes platform-specific output formatting (Telegram MEDIA: lines) — these are not malicious but are implementation details the integrator should be aware of.
Install Mechanism
No install spec and no code files — lowest-risk model. The skill is instruction-only so nothing is downloaded or written by an installer.
Credentials
The skill requests no environment variables, credentials, or config paths. The declared requirements are proportional to the stated purpose.
Persistence & Privilege
always is false and the skill does not request persistent system-wide changes. The instructions ask the agent to write template files in specified paths (normal for this functionality) but do not attempt to modify other skills or global configs.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install gin-ssr-template - After installation, invoke the skill by name or use
/gin-ssr-template - Provide required inputs per the skill's parameter spec and get structured output
Version History
v0.0.14
- Removed多余全局样式文件路径引用，仅保留必要的 {页面名}.css。
- 无功能或逻辑变化，仅对 head 区域的静态样式文件引入部分做精简。
v0.0.13
- 页面生成规则全面升级，主张“优先保证页面可运行、结构完整”，移除所有动态取值相关用法。
- 仅保留基本模板语法（`{{define}} ... {{end}}`），header/footer 改为内置静态 HTML，而非模板插槽。
- 强调 main 区域务必还原所有截图内容（不可只用注释或留空），并要求文案补齐。
- 完善页面命名、输出响应式 CSS、输出流程和最终回复标准的规范说明。
- head 区 SEO/meta/application/ld+json 全部写死静态示例，禁止动态读取。
- 移除辅助技能与复杂流程描述，明确聚焦“静态模板、可运行页”的交付目标。
v0.0.12
- 完善了页面名和文件名生成规则，需结合截图 title 及 main 主要内容语义（推荐先OCR辅助取文案），避免随意命名
- head 区模板所有 SEO/meta 字段全部硬编码，明确禁止使用任何 {{.data.Config.*}} 或动态取值
- 更新了示例占位内容（如 yandex/msvalidate/example.invalid），防止误用真实配置
- 新增建议先进行 OCR 文案提取再结构还原，提升主内容还原度
- 明确最终回复的 MEDIA 路径需按实际输出（含具体文件名），补充细节规范
v0.0.11
- 强化和规范了 head 区域模板，全部字段要求硬编码且字段不可缺失，彻底禁止出现 {{.data}} 取值。
- 明确 main 区域实现要求，HTML/CSS 必须对齐截图，必要时用中文注释标注待确认项，不可省略模块。
- 详细规定页面命名和文件命名的生成策略，优先按截图标题语义映射，其次用拼音或规范英文。
- 完整细化了最终回复内容及 Telegram 附件回传规则，确保两个文件都能正确生成及传回。
- header/footer 强制集成指定模板，不得手写导航和底部内容，进一步统一结构标准。
v0.0.10
**Summary:** Major SKILL.md overhaul to improve clarity and update template/SEO rules.
- Clarified and expanded instructions on handling SEO, now recommending hardcoded placeholder values over dynamic template expressions.
- Added comprehensive head/meta/JSON-LD template examples with standard placeholders for common site data.
- Strengthened emphasis on always generating and saving HTML/CSS files, and not just posting code.
- Updated priority and workflow steps, including explicit rules for screenshot and responsive handling.
- Improved documentation on template functions, output conventions, and when to use dynamic data.
- Refined CSS section for clearer responsive and style-accuracy guidelines.
v0.0.9
## gin-ssr-template 0.0.9 Changelog
- Major rewrite of SKILL.md for greater clarity and brevity.
- Execution flow and must-do actions made more explicit, with emphasis on not ending silently.
- Telegram-specific file attachment instructions clarified and standardized.
- HTML and CSS file generation requirements reorganized and focused.
- Template examples and field documentation condensed and restructured.
- Outdated explanations and redundant details removed for streamlined onboarding.
v0.0.8
- Improved instructions for version declaration: versions should only be mentioned if explicitly included in the markdown body, not read from frontmatter.
- Clarified and enforced the requirement for a final reply at the end of each task, always listing generated HTML and CSS file paths.
- Enhanced file sending rules: permit OpenClaw attachment sends in Telegram, but always require a text reply with file paths, regardless of attachment delivery status.
- Updated and reorganized the sending restrictions to explicitly prohibit external APIs or webhooks and require OpenClaw-mediated communication.
- Minor formatting and instruction cleanups for better clarity.
v0.0.7
- Enforced that outputs must be written to files, not just displayed in chat.
- Added requirement to explicitly attach both HTML and CSS files as MEDIA attachments in Telegram sessions.
- Clarified file paths, version output (from frontmatter), and updated progress feedback steps.
- Prohibited using Telegram Bot API or external sending methods; rely solely on OpenClaw's MEDIA mechanism.
- Improved wording throughout for consistency and precision regarding output mechanism and workflow.
v0.0.6
- 明确要求生成前先输出当前 skill 版本号（如 `v1.2`）
- 更新执行约定说明，突出版本声明步骤
- 聊天对话产出方式描述简化为“直接发送文件给用户”
- 无其他逻辑、接口或结构性变更
v0.0.5
- Added instructions for nav/footer: screenshots typically include top nav and bottom footer; may be omitted or minimized in HTML output.
- Clarified output method: now distinguishes between chat (send code directly) and other contexts (write to disk and inform user).
- No changes to template code or core logic. Documentation clarifies production and output behavior.
v0.0.4
**Summary:**
This version streamlines and clarifies the usage of the gin-ssr-template skill, focusing on direct skill output and improved documentation, especially for Open Claw integration.
- Simplified usage: Skill now only outputs HTML and CSS code in response to Figma screenshots or clear "gin前端模板" triggers, without writing files or asking follow-up questions.
- Focused for Open Claw: Documentation now makes clear the skill is designed for Open Claw, not Cursor.
- Revised instructions: Output, naming, and directory conventions are clarified; detailed progress feedback phrases added.
- Expanded template examples: More explicit head/body/footer HTML and JSON-LD schemas for common Gin SSR page types.
- CSS and layout guidance is now more precise, emphasizing exact visual reproduction based on Figma designs.
- File path examples and naming standards updated; code comments and prompts refined for clarity.
v0.0.3
**Summary: Streamlined rules and default output for direct Figma/screenshot-to-Gin SSR page generation, removing pre-output confirmation.**
- Now always outputs both HTML and CSS files directly upon trigger (no template-type confirmation stage).
- Updated default behaviors for missing structure: Uses generic field names and marks them with Chinese comments for later confirmation.
- Expanded and clarified screenshot handling rules, including dual-PC/H5 logic.
- Revised activation triggers and output file placement rules for simplicity and predictability.
- Added concise user reply guideline: always respond with “已生成两个文件”，avoid long explanations or back-and-forth questions.
- Clarified and restricted what should NOT be asked or produced by default; removed broader project scaffolding.
v0.0.2
- 增加了对激活方式的更详细说明（支持 “gin前端模板” 关键词和 Figma 截图自动激活）
- 新增“截图处理规则”章节，明确了 PC/H5 单独或组合截图下的模板生成细则及响应式样式补充方式
- 保持原有输出、模板结构、CSS 规范和模板函数说明不变
- 改进文档结构和部分说明表达，提升易读性
v0.0.1
Initial release of gin-ssr-template skill:
- Generates Gin SSR (Server-Side Rendered) HTML + CSS templates based on Figma designs or screenshots.
- Produces output files and directory structure according to project conventions (HTML/CSS split, file naming and paths).
- Implements standard SEO, OpenGraph, and JSON-LD meta tags in the HTML template.
- Provides strict CSS specs to closely match the original Figma visual style—including dual PC/mobile adaptation.
- Lists available Gin template functions for rich data rendering and formatting.
Metadata
Frequently Asked Questions
What is Gin Ssr Template?
根据 Figma 设计稿截图生成可直接运行的 Gin SSR 页面模板（HTML + CSS）。当用户发送“gin前端模板”或提供 Figma 页面截图时触发：生成的页面必须优先保证可运行、可预览、结构完整；禁止输出任何 {{.data}}、{{.Path}}、{{.Config}} 这类动态取值；head 中... It is an AI Agent Skill for Claude Code / OpenClaw, with 216 downloads so far.
How do I install Gin Ssr Template?
Run "/install gin-ssr-template" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Gin Ssr Template free?
Yes, Gin Ssr Template is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Gin Ssr Template support?
Gin Ssr Template is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Gin Ssr Template?
It is built and maintained by @qqz · @qwwe · @qqdq · @qdad · @ddac (@jasper-zzq); the current version is v0.0.14.
More Skills