payoff-action-modeling
安全 78对结果后的 UI 操作进行建模
由 JohnWayneeee
产品团队经常在成功状态中堆叠过多内容,却没有明确的下一步。此技能会在有意义的结果出现后,将用户意图转化为范围明确、优先级清晰的 UI 操作。
把你常用的技能整理成可复用合集,再用一条命令安装。
对结果后的 UI 操作进行建模
由 JohnWayneeee
产品团队经常在成功状态中堆叠过多内容,却没有明确的下一步。此技能会在有意义的结果出现后,将用户意图转化为范围明确、优先级清晰的 UI 操作。
将设计转换为 FSD Tailwind 代码
由 JohnWayneeee
设计交接常常会破坏架构、tokens 和可访问性。此 skill 指导 Claude、Codex 和 Claude Code 将选定的 Figma 或 Pencil 画面转换为分层的 Tailwind 代码。
设置 Next.js 品牌资产
由 JohnWayneeee
Next.js 团队经常遗漏 favicon、PWA 和社交图片要求。此技能会审计项目,准备精确的资产规格,并按照 App Router 约定接入生成的文件。
Turn Reference Videos Into Ecommerce Ad Prompts
由 jingyi-wu-richael
Recreating a successful video ad from observation is slow and inconsistent. This skill converts reference footage into an evidence-based timeline and production-ready adaptation prompt.
创建小红书信息图系列
由 JimLiu
将长内容转化为社交图片卡片既耗时又容易不一致。此技能可规划小红书风格的信息图系列,包括样式、布局、提示词和输出路径。
基于内容创建幻灯片组图像
由 JimLiu
将长篇内容转化为一致的视觉幻灯片组需要规划和提示词编写。此技能会创建结构化大纲、幻灯片提示词以及生成的幻灯片图像。
从结构化内容创建信息图
由 jimliu
将笔记或报告转化为清晰的视觉内容可能需要做出许多设计决策。此技能会分析内容、推荐布局和风格,并为 Claude、Codex 或 Claude Code 工作流准备图像提示词。
使用 OpenAI 和 Google 生成图像
由 jimliu
图像提示通常需要提供商设置、尺寸以及可重复使用的输出路径。此技能会运行一个基于 API 的生成器,并提供宽高比、质量和参考图像选项。
生成 Gemini Web 图像和文本
由 jimliu
团队需要快速生成图像和文本,而不必构建单独的 UI。此技能为 Gemini Web 提示、图像、参考和会话提供 CLI 工作流。
创建文章封面图
由 JimLiu
文章封面通常需要在开始图像生成前先明确视觉概念。此技能会分析内容,并创建与风格匹配的封面提示词,包含标题和布局指导。
跨平台压缩图像
由 jimliu
大型图像文件会拖慢交接流程,并让代码仓库更难共享。此技能会使用可用的命令行工具,将本地图像压缩为 WebP、PNG 或 JPEG。
从源材料创建知识漫画
由 JimLiu
冗长的源材料很难转化为清晰的视觉课程。此技能会引导 Claude、Codex 或 Claude Code 完成分析、分镜设计、图像提示词和 PDF 组装。
用一致的视觉元素为文章配图
由 JimLiu
长文章通常需要视觉元素,但选择图片位置和编写提示词很耗时。此技能会分析 Markdown 内容,规划插图,并创建一致的提示词和图片放置位置。
创建 MaxArt 图像和视频提示词
由 jerrylearner187
创意简报在渲染前通常需要清晰的视觉提示词。此技能可将简报和参考素材转化为适用于 MaxArt 的提示词包、运动方案和测试思路。
Build and Compare UI Variants
由 jakubkrehel
Teams often compare superficial UI alternatives without learning which design decision matters. This skill builds distinct, accessible variants and a shareable picker for informed selection.
提升界面精致度
由 jakubkrehel
细小的 UI 细节常常会让完成品显得粗糙。此技能帮助 Claude、Codex 和 Claude Code 审查排版、界面层次、动效和交互精致度。
Review Interface Changes with Clear Evidence
由 jakubkrehel
Interface changes can introduce visual, accessibility, and content regressions across connected surfaces. This skill resolves the change scope and produces evidence-based findings with clear status labels.
Explain How a Web Interface Was Built
由 jakubkrehel
Web interfaces hide their implementation behind compiled styles and runtime behavior. This skill gathers evidence and explains the design system or visual effect.
Polish Existing Interface Motion
由 jakubantalik
Inconsistent timing and easing can make interface motion feel slow or distracting. This skill audits existing motion and maps each usage to suitable transitions.dev tokens.
Add Polished CSS Transitions to Web Apps
由 jakubantalik
Interface motion often becomes inconsistent, inaccessible, or difficult to maintain. This skill provides 32 reusable transition patterns with shared tokens and reduced-motion support.