com um clique
frontend-design
生成单文件自包含的现代网页(落地页/看板/表单/原型),产出 site.html 可在产物区实时预览。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Menu
生成单文件自包含的现代网页(落地页/看板/表单/原型),产出 site.html 可在产物区实时预览。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
深度调研一个 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 替代。