资源中心

插件|skill 原创

免费

gsap-skills

codex和claude code的神级外挂。提供了一套标准化的技能文件，直接让主流AI工具写出最标准的官方级动画代码。

管理员 1 浏览

插件|skill 非原创

免费

Scrapling--网络爬虫框架

一个自适应的网络爬虫框架，能够处理从单一请求到全面爬取的所有任务！

管理员 1 浏览

插件|skill 非原创

免费

公众号排版 Skill--gzh-design-skill

把Markdown一键排成可直接粘进公众号编辑器的精致HTML6套精选主题+主题生成器+双关卡校验。An Al-agent skill that turnsMarkdown into paste-ready WeChatarticle HTML.该 skill 目前内置了 6 套主题模版（后续会持续更新），也可以自己设计主题模版。这个skill，适配WorkBuddy/Codex/Claude Code等 Agent 工具，以下就是 WorkBuddy 安装gzh-designskill 排版出的效果。

管理员 1 浏览

插件|skill 非原创

免费

flyfish-dev / file-viewer--206 种文件预览

File Viewer 最初要解决的问题很朴素：企业系统里的附件越来越复杂，用户希望直接在浏览器里看，不想为了一个 Word、一个 CAD 图纸、一个压缩包或者一封邮件，再额外跳到本地软件、服务端转码、云端转换。File Viewer 的基础能力：206 个扩展名映射。24 条 renderer 链路。52 个 npm 发布目标。16 个组件目标。27 条 smoke 渲染链。432 个组件渲染目标。Apache-2.0 协议，支持商用、二开、企业内部集成和私有化部署。从格式覆盖看，项目现在主要面向这些场景：Office：Word、Excel、PPTX、RTF、ODT、ODS 等。PDF / OFD / Typst：页面渲染、缩放、搜索、目录、打印和导出持续完善。CAD / 工程图纸：DWG、DXF、DWF、DWFX、XPS 等走工程图纸链路。压缩包：ZIP、RAR、7Z、TAR、GZ、ISO、APK、CBZ 等，支持目录读取和内部文件继续预览。邮件：EML、MSG、MBOX，支持正文、头信息、附件和附件继续预览。绘图与脑图：Draw.io、Excalidraw、Mermaid、PlantUML、XMind。设计与数据：PSD、SQLite、Parquet、Avro、GeoJSON、KML、GDSII、OASIS 等。常规文件：Markdown、代码、patch、git bundle、图片、HEIC、音视频、字体、3D 模型等。 它的核心价值在于分层：不同格式拆成独立 renderer，再通过 preset 和 full 包给不同团队选择。想轻量就按需装，想快速验收就用 full，想工程化就用 Vite 插件和离线资产复制。

管理员 0 浏览

提示词 原创

免费

极简 SaaS 落地页（Minimal SaaS Landing）

Design a minimal SaaS product landing page.Background & layout:- Page background: pure #ffffff — no light gray, no warm white, no sections with background fills- Section separators: 1px solid #f1f5f9 horizontal rule only — no background color changes- Max content width: 1120px centered- Section padding: 80px vertical minimumTypography:- Font: Inter (700/600/500/400 weights)- Hero heading: 48-56px, font-weight 700, letter-spacing -0.03em, color #0f172a- Section heading: 28-32px, font-weight 700, letter-spacing -0.02em- Body: 16-17px, font-weight 400, line-height 1.65, color #475569- Label/overline: 11px, font-weight 600, uppercase, letter-spacing 0.1em, color #2563ebColor:- Primary: #2563eb (mid-saturation blue — not too vivid)- Text dark: #0f172a- Text mid: #475569- Text light: #94a3b8- Border: #f1f5f9 (barely-there)- Never: gradients, tinted section backgrounds, multi-color CTAsButtons:- Primary: background #2563eb, text white, border-radius 8px, no gradient, no shadow- Ghost: text only with icon, no border, no background- Only ONE primary CTA per page section — do not add secondary filled buttonsIcons:- Lucide icons only, line style (strokeWidth 1.5)- Size: 18px in feature cards, 16px inline with text- Color: same as text context or primary blue for feature icons- No emoji, no filled icons, no colorful iconsComponents:- Feature cards: white bg, 1px border #f1f5f9, border-radius 10px, padding 24px Icon container: 36x36px, background #eff6ff, border-radius 8px, icon color #2563eb- Navigation: white bg, bottom border 1px #f1f5f9, height 60px- Stats/proof bar: background #f8fafc, border-top 1px #f1f5f9Rules:- No glassmorphism- No dark sections (footer can be exception)- No box-shadows except: box-shadow 0 1px 3px rgba(0,0,0,0.06) on interactive elements- No hero background image or gradient

管理员 1 浏览

提示词 原创

免费

修图提示词

移除物体图片5.0Lite-提示词移除[化妆品/产品]及其阴影、反光和所有相关投影、产品原位置需根据周边环境自然填补(如延伸背景图案、延续材质纹理或还原原始表面)，不留任何删除痕迹。画面中所有其他元素在位置、形状、色彩、细节上需100%保持不变------场景融图图片5.0Lite-提示词去掉产品的白色背景，保持产品位置和细节不变。修正图像中不真实的重叠效果，增强光照一致性，自然融合元素，赋予其自然光影。色温、亮度及饱和度需与环境协调，呈现真实的高光、阴影，消除视觉接缝，最终呈现无违和感的融合效果。-----精修产品图片5.0Lite-提示词产品精修，纯白背景，正视平视图3D高清渲染，精准还原物体色彩与[XX】材质。修复划痕，毛刺磨损，污渍，去除杂乱反光。呈现[XX]材质质感，表面光滑，纹理自然。优化光影立体感，强化细节，纹理清晰，质感高级，符合电商主图标准。-----产品光效图片5.0Lite-提示词保留产品原始细节与背景完整性，在产品图的基础上，将[XX】外壳变为半透明材质，内部精密机械结构和元件清晰可见，LED光效环绕，蓝色和橙色科技光带流动，未来主义美学设计，高饱和度，光影层次丰富，材质质感真实，科技感十足，8K超高画质渲染。-----产品打光图片5.0Lite-提示词保留产品原始细节与背景完整性，为这张产品海报添加高级感光影效果，产品受光呈现清亮通透质感，整体辅以冷/暖色氛围光，光晕自然漫射并点亮周边环境，光影层次丰富，8K分辨率，超高画质，电影级光影，焦外过渡自然，专业棚拍质感。-----海报复刻图片5.0Lite-提示词保持图2产品一致性，参考图1海报风格、排版、构图、配色和质感，为图2设计一个类似的场景，统一画面光源和投影，可适当调整图像的镜头视角与背景颜色，使其在场景中无违和感

管理员 1 浏览

提示词 原创

免费

UI规范

UI规范：1. 整体极简商务风，圆角8px，细浅阴影，细边框分割，充足留白2. 字体统一思源黑体，层级清晰：标题加粗深灰，正文浅灰，辅助文字淡灰3. 交互柔和hover变色，无夸张动画，符合办公软件视觉习惯4. 适配桌面窗口尺寸，布局自适应，干净专业，适合职场员工日常记录工作内容Color system:- Primary: #3b82f6 (blue) — buttons, links, active states only- Semantic colors (use low-saturation backgrounds for badges): success: text #059669, bg #d1fae5 warning: text #d97706, bg #fef3c7 error: text #dc2626, bg #fee2e2 info: text #2563eb, bg #dbeafe- Neutral scale: #111827 / #374151 / #6b7280 / #9ca3af / #e5e7eb / #f9fafb- Never use semantic colors as full background fills — only as subtle badge backgroundsComponent rules:- Cards: background white, border 1px solid #e5e7eb, border-radius 8px, shadow shadow-sm- Tables: row height 52px, header 40px, alternating row bg transparent/#f9fafb- Buttons: primary filled, secondary outlined, no gradient buttons- Form inputs: border #d1d5db, focus ring #3b82f6 with 2px offsetTypography:- Page title: 20px/700- Section label: 11px/600, uppercase, letter-spacing 0.08em, color #6b7280- Table cell: 14px/400- Caption/helper: 12px/400, color #9ca3afSpacing rhythm:- Card internal padding: 24px- Section gap: 24px- Table row padding: 12px 16px

管理员 1 浏览

提示词 原创

免费

轻简约潮流社交风

UI/UX 设计系统说明文档：轻简约潮流社交风1. 设计核心理念 (Core Philosophy)奶白基底 (Creamy Base)：放弃纯白，使用柔和的奶白色作为主色调，降低视觉疲劳，提升高级感。潮流撞色 (Trendy Accents)：以电竞蓝（Electric Blue）为核心识别色，辅以高饱和度的状态色（如玫瑰红、琥珀橙）。圆润极简 (Rounded Minimalism)：大圆角设计，去除繁琐边框，利用阴影和层级区分空间。微交互 (Micro-interactions)：全站覆盖触压反馈（Scale Down），增强操作的“手感”。2. 视觉规范 (Visual Specs)颜色系统 (Palette)主背景 (Light): #FDFBF7 (Creamy White)主背景 (Dark): slate-950核心品牌色: #3b82f6 (Electric Blue)文本色: slate-900 (标题), slate-500 (描述), slate-400 (辅助)装饰色:成功/通过: emerald-500警告/待定: amber-500错误/驳回: rose-500形状与投影 (Shapes & Shadows)大容器 (Cards): rounded-2xl (16px), 投影 shadow-sm 或极轻的蓝色投影。按钮/输入框: rounded-xl (12px)。玻璃拟态: backdrop-blur-md 结合 bg-white/80，用于顶栏和浮动卡片。3. 关键 CSS 组件代码 (Tailwind CSS)您可以将以下类名定义在您的全局 CSS 中：/* 基础卡片 */.h5-card { @apply rounded-2xl border border-white/60 bg-white/80 shadow-[0_8px_24px_rgba(59,130,246,0.03)] backdrop-blur-md transition-all duration-300 active:scale-[0.98];}/* 主按钮 */.h5-btn-primary { @apply inline-flex min-h-[48px] items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 px-6 py-3 text-[14px] font-bold text-white shadow-[0_8px_20px_rgba(59,130,246,0.25)] transition-all active:scale-[0.95];}/* 潮流输入框 */.h5-input { @apply block h-12 w-full rounded-xl border border-slate-100 bg-white px-4 text-[14px] text-slate-900 shadow-[inset_0_1px_2px_rgba(0,0,0,0.01)] transition-all focus:border-blue-400/50 focus:ring-[6px] focus:ring-blue-500/5;}/* 呼吸感背景 */.h5-app-bg { @apply fixed inset-0 -z-20 bg-[#FDFBF7]; background-image: radial-gradient(#3b82f6 1.2px, transparent 1px); background-size: 32px 32px; opacity: 0.04;}4. 典型页面布局结构 (Blade/HTML)首页快捷入口 (3列布局)<nav class="grid grid-cols-3 gap-3 mb-5"> <a href="#" class="flex flex-col items-center gap-2 rounded-2xl bg-white/80 p-4 shadow-sm active:scale-95"> <div class="h-12 w-12 rounded-xl bg-blue-50 text-blue-500 flex items-center justify-center"> <!-- SVG Icon --> </div> <span class="text-xs font-bold text-slate-700">功能名称</span> </a></nav>最新公告卡片 (强调型)<section class="rounded-2xl border border-blue-100 bg-blue-50/30 p-4"> <div class="flex items-center gap-2 mb-1"> <span class="text-[10px] font-bold text-blue-500 uppercase tracking-widest">LATEST</span> </div> <h3 class="text-sm font-bold text-slate-800 truncate">这里是公告标题</h3></section>5. 开发提示词 (Prompt for AI)如果您想让 AI 按照这个风格生成新页面，可以使用以下提示词：Prompt: 请按照“轻简约潮流社交风”设计一个[页面名称]页面。 视觉要求：基底色使用奶白色 (#FDFBF7)，卡片使用白色半透明 (#FFFFFFCC) 并带有 12px 的毛玻璃模糊。圆角统一：大卡片 16px (2xl)，按钮和输入框 12px (xl)。核心色使用电竞蓝 (#3b82f6)，用于主按钮、图标背景和强调文字。字体使用 Inter 结合 Noto Sans SC，标题加粗，字间距略微拉开。交互：所有可点击元素在 active 状态下都要有 scale(0.95-0.98) 的缩放效果。布局：保持空间紧凑，利用 10px 的小字号（加粗、全大写、Tracking-widest）作为 Section Kicker。背景：添加一个极淡的蓝色径向渐变网格装饰。

管理员 1 浏览

提示词 原创

免费

透明物理幕布·手势交互

单文 HTML, p5.js + MediaPipe Hands, Canvas 2D.核心概念: 屏幕里技一块隐形的布，表面是摄像头实时画面(布完全看不见)，背后藏着上传的图或视频。手在空中pinch(持指食指捏合)抓住布，甩起或放下---掀开的瞬间，背后画面被揭示。光学伪装是关键: 三层渲染。底层全屏画摄像头，中层把上传媒体定在布的初位置；顶层用布的周长做cx.cip() 再画一次摄像头。三层初始位置完全重合所以布消失，一动就漏出中层内容。Verlet 布料物理:网格 38x35， 顶行 pin住。 FRICTION 0.94.GRAVITY 0.08,约束迭代12代, stick stiffness 0.4 偏软避免锁死。每个点随机偏移 (X±20， Y -35-5)用于甩起时不规则堆叠。Perlin noise 微风营造布科呼吸感。质感渲染: 遍历每与个quad 计算当前面积与原面积之比，压缩区域叠色 (最高 alpha 120)做褶皱阴影，拉伸区域叠白色(最高alpha 60)做高光。边缘双层Curve描边一一内圈黑alpha 30 strokeWeight 4, 外圈 alpha 180 strokeWeight 1.5 + shadowBlur 12, 制液态光泽边缘.手势识别: MediaPipe Hands 双手同时操作。pinch 距高 hypot (拇指-食指)， 带hysteresis 防料(按下阈值 0.05，松开 0.08)。坐标取两指中点，x轴镜像。帧间手部追踪用200px， 半径匹配最近上一帧手，防止左右手切换时丢状态。抓取半径 150px。鼠标和触摸有fallback。

管理员 4 浏览

提示词 非原创

免费

桌面小猫

基于原视频进行真实感视频编辑，保留原始竖屏构图、笔记本电脑、桌面背景、室内光线、双手位置和真实手机拍摄质感。画面中电脑屏幕里的灰色折耳小猫逐渐变成真实立体的小猫:当我的双手靠近屏幕时，小猫先好奇地看向镜头，然后从屏幕里伸出两只前爪，前爪穿过屏幕边界，屏幕表面产生轻微真实的玻璃/光影扭曲。我的双手自然托在小猫的腋下，小猫被我从电脑屏幕中慢慢抱出来，身体从二维屏幕内过渡到真实空间中，躯干自然下垂，随我的动作微微摆动，毛发蓬松柔软，有真实体积、阴影、遮挡关系和接触感。小猫动作可爱、温顺、略带惊讶，眼睛口润明亮。保持镜头稳定，动作连贯自然，真实光照匹配原视频，手和猫之间有准确的前后遮挡、接触阴影和透视关系。最终小猫完全离开屏幕，被双手抱在屏幕前，像真实存在于现实空间中一样。重点表现“从屏幕内到现实空间”的过渡:先伸爪，再探头，再露出身体，最后被双手抱出;每一步都要有真实遮挡、接触阴影和屏幕边缘的空间穿越感

管理员 3 浏览