Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Renais-Star/html-style-generator --skill html-style-generatorgit clone --depth 1 https://github.com/Renais-Star/html-style-generatorWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/renais-star/html-style-generator/html-style-generator)<a href="https://agentmods.dev/skills/renais-star/html-style-generator/html-style-generator"><img src="https://agentmods.dev/badge/skills/renais-star/html-style-generator/html-style-generator/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/renais-star/html-style-generator/html-style-generator"><img src="https://agentmods.dev/badge/skills/renais-star/html-style-generator/html-style-generator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00029 | $0.05860 |
| Opus 5 | $0.00015 | $0.02930 |
| Sonnet 5 | $0.00006 | $0.01172 |
| Haiku 4.5 | $0.00003 | $0.00586 |
Grade A, and why
html-style-generator scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 610 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML Prototype Style Generator
功能描述
批量生成多页面 HTML 原型，支持多种设计风格。
触发命令
/html-style
使用场景
- 创建产品原型
- 批量生成 UI 页面
- 快速搭建演示系统
- 根据需求文档生成完整页面集
底层设计要求（必须遵守）
无论选择什么风格，所有生成的 HTML 必须遵守以下规则：
1. 语言要求
- 所有输出必须使用简体中文
- 包括：代码内注释、页面文本、按钮文字、提示信息等
2. 设计视角
- 以设计师的视角输出美观且用户友好的 UI/UX
- 注重细节、留白、视觉层次
- 避免程序员思维，追求设计美感
3. 页面互联
- HTML 之间可以整合或跳转到其他页面
- 导航菜单链接到各页面
- 相关操作有合理的页面跳转
4. 字体排版
- 选用独特且富有表现力的字体
- 禁止使用：Inter、Roboto、Arial 等常见字体
- 推荐搭配：展示性字体（标题）+ 精致正文字体
- 示例：
- 标题：思源宋体、站酷高端黑、庞门正道标题体
- 正文：思源黑体、Noto Sans SC
5. 色彩与主题
- 通过 CSS 变量构建统一的美学风格
- 采用主色调搭配鲜明点缀色
- 避免单调的黑白灰，要有视觉焦点
6. 图片资源
- 使用 Unsplash 图片：
https://images.unsplash.com/photo-{ID}?w={宽度}&q=80 - 根据页面主题选择相关的 Unsplash 图片
- 示例：
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80" alt="科技产品">
7. 技术栈
- HTML5：使用语义化标签（header、nav、main、section、article、footer 等）
- CSS：原生 CSS（CSS 变量、Flexbox、Grid、动画）
- Font Awesome：使用 Font Awesome 图标（通过 CDN）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> - Tailwind CSS（可选）：如果风格模板中明确使用 Tailwind，则引入
<script src="https://cdn.tailwindcss.com"></script> - JavaScript：仅用于基础交互（菜单切换、滚动效果等），保持轻量
- ECharts（当需求涉及可视化图表时）：使用 Apache ECharts 绘制图表
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>- 适用场景：数据仪表盘、统计图表、趋势分析、排行榜等
- 配置图表主题色与页面主色调保持一致
- 确保图表具有响应式适配
8. 空间构成（必须遵守）
核心原则：页面空间不是被动容器，而是主动的设计语言。必须通过以下手法赋予页面动态张力：
-
不对称布局
- 避免左右完全对称的"双栏镜像"结构
- 主次内容采用不等宽比例（如 3:2、5:3、7:5）
- Hero 区域文字与视觉元素不居中对齐，形成视觉引力
-
元素叠压
- 关键元素（卡片、图片、徽章、数字）适度超出容器边界或相互叠压
- 利用
position: absolute+z-index制造前后层次感 - 浮动小卡片、数据标注、装饰图形跨越父容器边缘放置
-
对角线流向
- 页面视觉动线从左上引导至右下（或右上至左下）
- 使用倾斜背景色块（
clip-path: polygon(...)或transform: skewY(-3deg)）打破水平分割 - 大标题、图形、CTA 按钮沿对角线方向排布形成张力
-
留白与密度的刻意控制
- 充裕留白：展示型页面（官网、着陆页）每个区块的 padding 不低于
80px 0 - 精心密集：数据型区域（统计、表格、列表）允许紧凑，但须保持内在节奏感
- 禁止：整页均匀平铺、所有区块同等间距——必须有节奏的松紧对比
- 充裕留白：展示型页面（官网、着陆页）每个区块的 padding 不低于
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 610 lines · 29 tokens per session scan A a88b3128e152
html-style-generator is a skill published in the GitHub repository Renais-Star/html-style-generator (24 stars, last pushed 5mo ago), licensed MIT. It adds 29 tokens to every session and 5,860 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
better-colors
Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.