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 idea2realClaw/myAgent --skill brand-website-buildergit clone --depth 1 https://github.com/idea2realClaw/myAgentWrote 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/idea2realclaw/myagent/brand-website-builder)<a href="https://agentmods.dev/skills/idea2realclaw/myagent/brand-website-builder"><img src="https://agentmods.dev/badge/skills/idea2realclaw/myagent/brand-website-builder/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/idea2realclaw/myagent/brand-website-builder"><img src="https://agentmods.dev/badge/skills/idea2realclaw/myagent/brand-website-builder.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.00099 | $0.01872 |
| Opus 5 | $0.00049 | $0.00936 |
| Sonnet 5 | $0.00020 | $0.00374 |
| Haiku 4.5 | $0.00010 | $0.00187 |
Grade A, and why
brand-website-builder 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 8d 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 — 152 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Brand Website Builder
概述
根据公司品牌信息，生成一套完整的响应式 HTML5 企业官网，电脑端和手机端均自适应。网站包含以下板块：
- 导航栏：固定顶部，滚动后背景变实色，移动端汉堡菜单
- Hero：全屏品牌展示 + 统计数据 + 浮动卡片
- 关于我们：公司介绍 + 特色亮点
- 服务/产品：6 宫格卡片，支持高亮核心服务
- 成功案例：3 个代表案例
- 联系我们：联系信息 + 咨询表单
- Footer：多列布局 + 备案号
工作流程
Step 1：收集品牌信息
向用户提问（不要一次全问，分 2-3 轮，按重要性排序）：
第一轮（核心信息）：
- 公司名称、一句话标语
- 主品牌色（HEX）
- 主营业务 / 行业
第二轮（内容细节）：
- 服务项目（最多 6 项，每项需标题 + 一句描述）
- 成功案例（最多 3 个）
- 联系方式（地址、电话、邮箱）
第三轮（可选补充）：
- 统计数据（如"500+ 客户"、"98% 满意度"）
- Hero 浮动卡片文案
- 网站备案号
Step 2：运行生成脚本
收集完品牌信息后，调用 scripts/generate_site.py 生成网站。
方法 A：直接传入配置字典（推荐）
根据收集到的用户信息，构建 brand.json 配置文件，然后运行：
python3 ~/.workbuddy/skills/brand-website-builder/scripts/generate_site.py \
--config /path/to/brand.json \
--output /path/to/output-dir
方法 B：生成默认演示（用户只想快速预览）
python3 ~/.workbuddy/skills/brand-website-builder/scripts/generate_site.py \
--output /path/to/output-dir
查看完整配置字段：
python3 ~/.workbuddy/skills/brand-website-builder/scripts/generate_site.py --print-schema
Step 3：品牌色定制
生成脚本会自动在 styles.css 顶部注入品牌色覆盖：
:root {
--brand-primary: #HEX; /* 主色，用于按钮、链接、标签 */
--brand-secondary: #HEX; /* 辅色，用于勾选标记、次要高亮 */
--brand-accent: #HEX; /* 强调色，用于徽章、特殊标注 */
--brand-dark: #HEX; /* 深色背景（Hero/Footer） */
--brand-darker: #HEX; /* 更深色背景 */
}
常用品牌色参考：
- 科技/互联网：primary
#1A56DB（蓝）、accent#FF5A1F（橙） - 金融/专业服务：primary
#1C3A5E（深蓝）、accent#C9A84C（金） - 医疗/健康：primary
#0E9F6E（绿）、accent#3F83F8（蓝） - 教育：primary
#7E3AF2（紫）、accent#F05252（红） - 零售/消费：primary
#E02424（红）、accent#FF8A4C（橙）
Step 4：输出与交付
生成完成后：
- 用
preview_url工具预览（如已启动本地服务）；或 - 告知用户用浏览器直接打开
output/index.html； - 如用户需要进一步调整，直接修改输出目录下的文件，说明对应的 CSS 变量或 HTML 位置。
brand.json 配置字段说明
| 字段 | 说明 | 示例 |
|---|---|---|
| COMPANY_NAME | 公司名称 | "极光科技" |
| COMPANY_TAGLINE | 网站 meta description | "专注数字营销" |
| COMPANY_ADDRESS | 地址 | "北京市朝阳区..." |
| COMPANY_PHONE | 电话 | "400-000-0000" |
| COMPANY_EMAIL | 邮箱 | "[email protected]" |
| COMPANY_ICP | 备案号 | "京ICP备XXXXXXXX号" |
| BRAND_PRIMARY | 主色 HEX | "#1A56DB" |
| BRAND_SECONDARY | 辅色 HEX | "#0E9F6E" |
| BRAND_ACCENT | 强调色 HEX | "#FF5A1F" |
| BRAND_DARK | 深色背景 HEX | "#111928" |
| BRAND_DARKER | 更深背景 HEX | "#0D1526" |
| LOGO_ICON | Logo Emoji | "🚀" |
| HERO_BADGE | Hero 徽章 | "✦ 行业领先" |
| HERO_TITLE | Hero 主标题（支持 HTML span 高亮关键词） | "驱动增长" |
| HERO_SUBTITLE | Hero 副标题 | "一句话描述..." |
| CTA_PRIMARY | 主按钮文字 | "免费咨询" |
| CTA_SECONDARY | 次按钮文字 | "了解更多" |
| STAT1_NUM ~ STAT3_NUM | 统计数字 | "500+", "98%", "10年" |
| STAT1_LABEL ~ STAT3_LABEL | 统计标签 | "服务客户" |
| CARD1_ICON / CARD2_ICON | 浮动卡片图标 | "📊" |
| CARD1_TEXT / CARD2_TEXT | 浮动卡片文字 | "数据驱动" |
| ABOUT_TAG | About 区域标签 | "关于我们" |
| ABOUT_TITLE | About 标题 | "十年深耕..." |
| ABOUT_DESC | About 副标题 | "..." |
| ABOUT_BODY | About 正文段落 | "..." |
| FEATURE1 ~ FEATURE4 | 四项特色亮点 | "专业团队" |
| ABOUT_ICON | About 卡片图标 | "🏆" |
| ABOUT_CARD_TITLE | About 卡片标题 | "行业认可" |
| ABOUT_CARD_DESC | About 卡片描述 | "..." |
| SERVICES_TAG | 服务区标签 | "我们的服务" |
| SERVICES_TITLE | 服务区标题 | "全方位服务" |
| SERVICES_DESC | 服务区副标题 | "..." |
| SVC1~6_ICON | 服务图标 Emoji | "💻" |
| SVC1~6_TITLE | 服务标题 | "系统开发" |
| SVC1~6_DESC | 服务描述 | "..." |
| CASES_TAG | 案例区标签 | "成功案例" |
| CASES_TITLE | 案例区标题 | "他们选择了我们" |
| CASES_DESC | 案例区副标题 | "..." |
| CASE1~3_TITLE | 案例标题 | "某零售集团改造" |
| CASE1~3_DESC | 案例描述 | "..." |
| CONTACT_TAG | 联系区标签 | "联系我们" |
| CONTACT_TITLE | 联系区标题 | "开启合作" |
| CONTACT_DESC | 联系区副标题 | "..." |
| FOOTER_DESC | Footer 品牌描述 | "..." |
| YEAR | 版权年份（自动注入当前年） | "2026" |
What ships with it
5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 8d ago First seen · 152 lines · 99 tokens per session scan A 16c50014263e
brand-website-builder is a skill published in the GitHub repository idea2realClaw/myAgent (2 stars, last pushed 19d ago), licensed MIT. It adds 99 tokens to every session and 1,872 once invoked, about $0.0005 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-31.
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-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…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…