Design AI Skills

Defines system product requirements: users, outcomes, capabilities, business rules, scope, and acceptance. Use for a new service or system, or a change to its product expectations.

Follows Airbnb's design-led development and Figma's craft quality standards. Use when building user-facing features, making UI/UX decisions, determining when details matter, or applying design system…

Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user…

生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖，在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。

Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces. This skill should be used when brand colors, visual formatting,…

When the user wants to find Slack groups, Discord servers, Reddit communities, forums, or online communities where their target audience hangs out. Also use when the user mentions "where to promote",…

Generate production-ready 2D TSX video files for VidTSX (Remotion-based) from a shot, scene, or video description. Use whenever the user wants to create or generate a VidTSX video, a 2D TSX shot or…

Decide when to delegate to Honey's read-only subagents (hive-scout, hive-reviewer) instead of working inline, so the expensive tokens — large file reads and review passes injected back into the…

3D asset engineer that finds, downloads, and integrates GLB/GLTF models into Three.js browser games. Use when a 3D game needs real models instead of primitive BoxGeometry/SphereGeometry shapes.

Structure a dev-tool homepage that converts developers into champions. Use when the landing page is written for the buyer instead of the developer, reads as salesy, buries what the product does, or…

Control-plane workflow for coordinating multi-agent, multi-session project work from a single Codex, GitHub Copilot, or agent-app control session. Use this skill whenever the user asks to orchestrate…

Build 16:9 spoken-video compositions as standalone Remotion projects with React, TypeScript, frame-based animation, estimated durations, and direct mp4 rendering. Use when the user wants video files,…

根据 BDN 品牌筹备阶段指南，从消费者画像、真实使用场景与商品事实出发，制作低成本的多语言 Listing、A+ 和创意草稿，并设计页面验证。用于品牌筹备、页面基础薄弱、缺小语种运营人员或 AI 文案不贴近真实需求的场景。

Author, validate, render, edit, and publish trusted MP4 video presentations as an autonomous root Agent studio.

Creates high-converting landing page copy and responsive HTML with proven frameworks. Delivers publish-ready pages using AIDA, PAS, and other conversion-optimized copywriting structures.

Comprehensive building services knowledge for architects covering HVAC system selection and spatial impact, plumbing and drainage design, electrical systems and power distribution, vertical…

Use for marketing, social, replies, product copy, launch copy, and writing in the user's voice when their Emulo writing profile should guide the task. Do not use for unrelated execution or UI/UX…

Create distinctive, production-grade web frontend interfaces with high design quality. Use when the user explicitly asks to build or substantially redesign a web component, page, or application. Only…

For creators, educators, and social-video editors who need a tactile paper-collage language for narration, knowledge points, opinions, or abstract topics. Users provide source copy, story beats, or a…

Design and review APIs with suggestions for endpoints, parameters, return types, and best practices. Use when designing new APIs from requirements, reviewing existing API designs, generating API…

Upgrade a coded website to award-tier, editorially-crafted design using fal.ai. Takes a local HTML file or a dev-server URL, screenshots it, has an opus-4.7 vision model write a gpt-image-2 edit…

Aligns on a design or plan before implementation by proposing it in confirmable chunks, with recommended decisions and alternatives.

用 HyperFrames 制作讲解/解释/产品介绍类视频的完整工作流。从脚本撰写、TTS 生成、分镜设计、HTML Composition 到最终渲染，覆盖全流程与常见坑点。

当用户要求生成图片、配图、插图、logo、吉祥物、封面、海报、og 图、favicon 源图、真人场景图，或建站时页面缺图、仍有占位图时使用。包括“画一张”“出一套图”“网站需要配图”“image gen”。本 Skill 负责提示词、生成、三道验收、压缩与落盘；只是让 Codex CLI 做代码代理任务时用 codex，普通派单走 agent-fleet，页面 SEO 与上线闸门走…

Evolve API Platform APIs via deprecation (deprecationReason/sunset, RFC 8594/9745), the recommended alternative to versioning; plus path/header strategies

Install and integrate HyperFrames registry blocks and components. Use when a composition needs a reusable registry element or its wiring instructions.

Generate machine-readable index files in .ai/index/ (component inventory, uses/usedBy graph, stats) for AI agents. Triggers: index my codebase, build a relationship graph, what depends on what. Not an…

通过 Codex 内置生图生成或编辑图片，并将该能力接入 Claude Code、Claude 桌面版或其他本地 MCP Agent。用于 cs-codex-image、内置生图、不用 API Key 出图、Claude 调用 Codex 生图。固定 KAI 封面和小黄角色仍由对应品牌 Skill 决定视觉规范。

Genre pack: neo-brutalism for the web — loud consumer energy with hard discipline. Bright warm paper, ink-black 2.5px borders on everything, hard offset shadows, one dominant hot accent plus one…

When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta…

Conduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.

Design any user-facing experience end-to-end: task flows, multi-step workflows, navigation structures, onboarding, settings, search, content creation, collaboration, signup, checkout, dashboards,…

Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.

Audit web pages and components for WCAG 2.2 accessibility compliance. Use when a user asks to check accessibility, find a11y issues, audit for WCAG compliance, fix screen reader problems, check color…

Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "progress indicator", "progress bar", "loading…

Use this skill when the user requests to generate, create, or write professional research reports including but not limited to market analysis, consumer insights, brand analysis, financial analysis,…

Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo app,…

2D Game Development workflow skill. Use this skill when the user needs 2D game development principles. Sprites, tilemaps, physics, camera and the operator should preserve the upstream workflow, copied…

UI/UX design intelligence. Use when user asks for UI/UX design, component architecture, layout, color system, or visual hierarchy decisions. Includes 50+ styles, 161 palettes, 57 font pairings.

For creators, educators, and social-video editors who need a tactile paper-collage language for narration, knowledge points, opinions, or abstract topics. Users provide source copy, story beats, or a…

Use when user provides a URL and wants to replicate or clone a website's UI, design, or visual style for their own product. Entry point for the full 4-phase SRIP pipeline.

Resolve motion tools or native View Transitions.

Use when diagnosing a FLUX 3 brief before generation. Resolve missing, conflicting, or schema-changing requirements.

Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square…

Reviews an existing UI with scores based on evidence, then fixes the highest-impact problems. Use when a page or app screen looks generic, cluttered, or unfinished, or before you ship UI work. Run as…

Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.

Use when the user wants a scene, place, environment or situational design, an environment-centered visual concept, or a targeted revision to an existing setting.

Suede AI Answer Engine Optimization Skills. Use when asked to "improve our AI citations" or optimize for ChatGPT/Perplexity: crawler policy, entity consistency, citation-ready pages, off-site evidence…

Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React…

Demo-Ready Mode — prepare your app for demos, screenshots, and presentations. Use when user wants to demo their app, take screenshots, prepare for a presentation, or clean up dev artifacts.

| 商业文案写作专家。精通品牌文案、营销邮件、产品描述、广告策划、社交媒体内容。 基于 AIDA 模型和广告法合规要求，提供高转化率的文案创作与诊断。 「写文案」「营销文案」「品牌Slogan」「广告语」「产品描述」「推广文案」「文案优化」触发。