Menu
生成单文件自包含的现代网页（落地页/看板/表单/原型），产出 site.html 可在产物区实时预览。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
深度调研一个 GitHub 仓库（README/结构/关键源码/活跃度），产出研究报告。纯提示词技能，依赖 web_fetch 工具。
图像生成的风格模板库与提示词写法指南（纯提示词技能，配合 image_generate 工具使用）。
把数据渲染成图表：产出 PNG 图片与 ECharts option JSON（柱状/折线/饼图）。
生成可下载的演示文稿（.pptx）或独立 HTML 文档（Markdown 转网页）。
用 DuckDB 分析用户上传的 CSV/JSON 数据文件（概览统计或执行 SQL 查询），产出结果文件。
统计给定文本的词数与字符数，并生成 JSON 产物
| name | frontend-design |
| description | 生成单文件自包含的现代网页（落地页/看板/表单/原型），产出 site.html 可在产物区实时预览。 |
把需求变成单文件自包含 HTML（内联 CSS/JS，零外链——产物区 iframe 沙箱可直接渲染）。
先在回复里想清结构，再把完整 HTML 交给渲染脚本落盘：
script_runner(
skill="frontend-design",
script="render_page.py",
script_args={"title": "产品落地页", "html": "<!DOCTYPE html><html>…完整文档…</html>"}
)
产出 site.html（产物区自动预览，allow-scripts 下交互可用）。
<style>、JS 写 <script>；不引外部字体/CDN（沙箱无网络凭据）。color-scheme: dark。max-width:100%。font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif；
行高 1.6-1.8。沙箱预览 iframe 无网络凭据，页面里只有内联 data-URI 的图片能显示。两类图的正确写法
（render_page.py 自动替换成 data-URI）：
image_generate（产出 image-N.png，编号在本会话内续接），HTML 里用
<img src="generated/image-N.png"> 引用（文件名以 image_generate 观察结果里列出的为准）。
本会话此前轮次生成的图也仍在 generated/ 可直接引用——改版式/改布局无需重新生图。script_runner 调用时必须传
input_files=["原图文件名.jpeg"]（本轮或本会话此前轮次上传的文件名均可，无需用户重传），HTML 里用
<img src="原图文件名.jpeg"> 裸文件名引用。忘传 input_files 则无法内联，
渲染输出会打「警告: N 个本地图片引用未找到」——看到警告必须补上 input_files 重新渲染。绝不要在最终页面留下任何未内联的本地路径（<img src="xxx.jpg"> 而文件不在沙箱内），
那会让预览里图片空白、用户误判任务失败。不需要真实照片时，可用纯 CSS 装饰/emoji/inline SVG 替代。