← 返回
未分类
中文
Landing Page Builder
Build a single-page landing page from a text prompt or design brief. USE WHEN: - User asks for a landing page, marketing page, product page, sales page, or s...
根据文字提示或设计简报构建单页着陆页。使用时机：用户请求着陆页、营销页、产品页、销售页或类似页面。
未分类
clawhub
v1.0.0 1 版本 100000 Key: 无需
#latest
概述
版本历史 (1)
安全
概述
Landing Page Builder Generate polished, conversion-optimized landing pages from natural language descriptions.
Workflow If user provides a reference HTML template: Read the provided template Identify all text content, branding, and copy Modify the existing template — do NOT rewrite from scratch Replace copy, brand name, colors, and content to match the user's brief Preserve ALL CSS, animations, layout structure, SVG filters, and JavaScript exactly Output the adapted .html file If no template provided: Ask the user (if not provided): product/service name, what it does, target audience, desired tone Read the base template at assets/template.html Replace all {{PLACEHOLDER}} tokens with content tailored to the user's request Customize colors, copy, sections — add or remove sections as needed Output a single self-contained .html file Template Placeholders (base template only) Placeholder Description --- --- {{TITLE}}Page </code></td></tr><tr><td><code>{{BRAND}}</code></td><td>Brand/company name</td></tr><tr><td><code>{{PRIMARY_COLOR}}</code></td><td>Hex color (e.g., <code>#6366f1</code>)</td></tr><tr><td><code>{{BG_COLOR}}</code></td><td>Background color</td></tr><tr><td><code>{{TEXT_COLOR}}</code></td><td>Body text color</td></tr><tr><td><code>{{ACCENT_COLOR}}</code></td><td>Accent color</td></tr><tr><td><code>{{HEADLINE}}</code></td><td>Hero headline — punchy, benefit-driven</td></tr><tr><td><code>{{SUBHEADLINE}}</code></td><td>1-2 sentence supporting text</td></tr><tr><td><code>{{CTA_TEXT}}</code></td><td>Button text (e.g., "Start Free Trial")</td></tr><tr><td><code>{{CTA_URL}}</code></td><td>Button link</td></tr><tr><td><code>{{FEATURES_HEADING}}</code></td><td>Section heading</td></tr><tr><td><code>{{FEATURES}}</code></td><td>HTML feature cards (use <code>.feature-card</code> divs)</td></tr><tr><td><code>{{PRICING_HEADING}}</code></td><td>Section heading</td></tr><tr><td><code>{{PRICING_CARDS}}</code></td><td>HTML pricing cards (use <code>.price-card</code> divs)</td></tr><tr><td><code>{{TESTIMONIALS_HEADING}}</code></td><td>Section heading</td></tr><tr><td><code>{{TESTIMONIALS}}</code></td><td>HTML testimonial cards (use <code>.testimonial</code> divs)</td></tr><tr><td><code>{{FINAL_CTA_HEADING}}</code></td><td>Bottom CTA heading</td></tr><tr><td><code>{{FINAL_CTA_TEXT}}</code></td><td>Bottom CTA description</td></tr><tr><td><code>{{YEAR}}</code></td><td>Current year</td></tr></tbody></table><h2>Design Principles</h2><ul><li>Mobile-first responsive design</li><li>Clean typography with Inter font</li><li>Subtle shadows, rounded corners, generous whitespace</li><li>Conversion-focused: clear hierarchy, single primary CTA repeated</li><li>Fast: no JS frameworks, no external dependencies beyond Google Fonts</li><li>Accessible: semantic HTML, good contrast ratios</li></ul><h2>Common Mistakes to Avoid</h2><ul><li><strong>Don't rewrite templates from scratch</strong> — when adapting a reference, modify in place. Rewriting loses the design quality.</li><li><strong>Don't use generic stock copy</strong> — every line should feel specific to the business, not "lorem ipsum with nouns swapped in"</li><li><strong>Don't add sections the user didn't ask for</strong> — less is more. A tight 3-section page beats a bloated 8-section page.</li><li><strong>Don't break responsive behavior</strong> — test mentally that your changes work at mobile widths</li></ul><h2>Customization</h2><p>Feel free to:</p><ul><li>Add/remove entire sections (not all pages need pricing or testimonials)</li><li>Change the grid layouts, add animations with CSS</li><li>Swap the font via the Google Fonts link</li><li>Add custom CSS variables for additional theming</li><li>Embed forms, videos, or other interactive elements as needed</li></ul><h2>Output</h2><p>Save the final HTML file to the user's workspace or specified path. Suggest deployment options:</p><ul><li><strong>Quick:</strong> Open locally or share the file</li><li><strong>Free hosting:</strong> GitHub Pages, Netlify, Vercel, Cloudflare Pages</li><li><strong>Custom domain:</strong> Pair with any of the above</li></ul></div>
</div>
</div>
<div id="tab-versions" class="detail-content">
<div class="detail-section">
<h2>版本历史</h2>
<p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p>
<ul class="version-list">
<li>
<div>
<span class="version-tag">v1.0.0</span>
<span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div>
<div style="font-size:12px;color:#94a3b8;">
2026-05-12 05:49 安全 安全 </div>
</li>
</ul>
</div>
</div>
<div id="tab-security" class="detail-content">
<div class="detail-section">
<h2>安全检测</h2>
<div class="sec-grid"> <div class="sec-card">
<h4>腾讯云安全 (Keen)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://tix.qq.com/search/skill?keyword=77c52d204aa49dbd3920b441d82bd071" target="_blank">查看报告</a> </div>
<div class="sec-card">
<h4>腾讯云安全 (Sanbu)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/26/459462_a4fd7d25dd8c05838d853bb13d20e2a4.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1783174751%3B1814710751&q-key-time=1783174751%3B1814710751&q-header-list=host&q-url-param-list=&q-signature=2b9446e0be5349102201b18fdede19e73200f664" target="_blank">查看报告</a> </div>
</div>
</div>
</div>
<!-- Recommended Skills -->
<div style="margin-top:24px;">
<h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2>
<div class="rec-grid">
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">content-creation</span>
<h3><a href="/s/humanizer-zh">humanizer-zh</a></h3>
<div class="rec-owner">liuxy951129-cpu</div> <div class="rec-desc">去除文本中的 AI 生成痕迹。适用于编辑或审阅文本，使其听起来更自然、更像人类书写。
基于维基百科的"AI 写作特征"综合指南。检测并修复以下模式：夸大的象征意义、
宣传性语言、以 -ing 结尾的肤浅分析、模糊的归因、破折号过度使用、三段</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 65</span>
<span style="color:#5b6abf;">📥 30,947</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">business-ops</span>
<h3><a href="/s/nova-invoice-generator">Invoice Generator</a></h3>
<div class="rec-owner">valenciajenkins97-create</div> <div class="rec-desc">根据自然语言或结构化输入生成专业发票。使用场景：用户请求创建发票、账单或付款请求时。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 0</span>
<span style="color:#5b6abf;">📥 231</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">content-creation</span>
<h3><a href="/s/marketing-skills">Marketing Skills</a></h3>
<div class="rec-owner">jchopard69</div> <div class="rec-desc">访问 23 个营销模块，提供转化率优化（CRO）、SEO、文案撰写、分析、发布、广告和社交媒体的清单、框架及可直接使用的交付物。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 146</span>
<span style="color:#5b6abf;">📥 31,737</span>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
document.querySelectorAll('.detail-tab').forEach(function(btn){
btn.addEventListener('click',function(e){
var tab = this.getAttribute('data-tab');
document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')});
document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')});
this.classList.add('active');
var el = document.getElementById('tab-'+tab);
if(el) el.classList.add('active');
});
});
});
</script>
<div class="footer">
<p>Skill工具集 © 2026</p>
</div></body>
</html>