Design AI Skills

Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.

Create, refine and assemble scientific figures from data, images or editable artwork; check image reuse, deliver publication-ready outputs and an optional Figure Studio editing page.

This skill should be used when the user asks to create custom Remotion transitions, asks about "cool transitions", "cinematic transitions", "striped transitions", "glitch transitions", "custom…

基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。

当 Codex 需要基于一张网页总设计图、image2 生成图、截图、Mockup、Figma 导出图或本地参考图集，对现有网站前端进行像素级复刻或视觉重构时使用。本 skill 强制遵守：总设计图是唯一视觉来源、只从参考图裁切素材、不自创设计元素、不使用外部素材、严格保留业务功能，并通过截图、素材边缘、遮挡、响应式、z-index 与回归检查确保网页尽量一比一复刻。

Turns a photo of a person into a short 8-bit pixel-art video via a two-step pipeline. Gemini stylizes the photo as an 8-bit still, then Replicate's seedance-2.0 animates that still into an MP4. Use…

This skill should be used when the user asks about Storybook, design systems, UI components, extracting HTML, or building interfaces using existing components. Activates for component listing, HTML…

证据驱动的跨载体视觉设计与交付系统。用于海报、图文/社交内容、PPT/演示和产品 UI：理解主题与情绪，学习优秀人工参考，选择有依据且足够丰富的设计手法，制作 HTML 母版并完成可编辑交付与审查。

在撰写、改写、校对或审阅中文技术文档、产品文案、界面文案、Markdown 文档、API 说明、操作手册、故障排查或运维文档时使用。采用克制、准确、可扫读的中文技术写作风格；保留原文事实、限制和机器可读内容；按任务读取术语排版、API 状态文案、项目覆盖或受控中文技术写作参考。

Use when planning a multi-shot AI video (TikTok Reel, Instagram Ad, YouTube Shorts, product explainer) where the target duration exceeds what a single AI generation can produce (>15s), and you need a…

Generates production-grade WebGL fluid glass card interfaces with a fixed canonical material core (144px-tall, 30px-radius wide cards, transparent canvas, cyan

Interview a team about their recurring workflows, bottlenecks, data sources, and tools — one question batch at a time — then map the workflows to AI opportunities scored on impact × feasibility and…

Design, create, or validate saved and transient Vapi voice assistants. Use for new phone or web agents, production system prompts and first messages, saved-versus-transient architecture,…

当用户需要为特定情绪/风格/场景选择专业影视摄影机+镜头组合、或需要在AI视频prompt中添加具体摄影机锚点时调用。 核心 trigger：用户提到"用什么摄影机"、"什么镜头"、"电影感"、"摄影机型号"、"镜头选择"、"画质风格"、"胶片感"、"数字感"。 不适用于：纯剪辑问题（用 shot-design）、纯调色问题（用 color-grading）、纯叙事问题（用 directing）。

Use when authoring, reviewing, or debugging Blueprint Factory input used by `gen/generate.sh --config`, especially when adding environments, shared platforms, environment platforms, hub changes, or…

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build,…

当用户希望基于明确的产品信息，梳理电商商品详情页内容、生成详情页内容结构、详情页文案、手机长图 HTML 黑白线框稿时使用。

Create HTML system architecture diagrams — microservice maps, dependency graphs, deployment topologies, data ownership maps, integration diagrams. Useful during incidents, design reviews, onboarding,…

Give your coding agent some design taste. Humanize your UI with proven components.

Analyze an uploaded or local reference poster, extract its reusable design system, and transpose that system to an original poster with a new theme, title, subtitle, or campaign copy.

Create high-detail, fact-checked English cinematic educational animations in Blender for science, engineering, architecture, construction, manufacturing, machines, infrastructure, energy, medicine,…

Review an existing design and connect it to design system components.

Turn an approved script, provided talking-head/voiceover media, and gathered assets into a polished, creator-grade vertical (9:16) short rendered with HyperFrames. Encodes a non-negotiable…

Create beautiful web presentations from a topic, rough notes, or an outline, and edit decks afterward — adding, removing, or revising slides. Generates a custom theme and a short two-slide preview,…

Add a new design.md catalog entry to ko-design-md. Use this skill IMMEDIATELY when the user wants to onboard a new brand into THIS project's catalog — produce services/{slug}.md (Stitch v0.1 format)…

Create an animated sticker pack from a supplied character image or a text-defined character by collecting a style and Emoji or short reaction descriptions, generating and approving a static sheet,…

Builds, revises, restyles, and critiques deliberate, editable Feishu / Lark whiteboards from content, references, existing SVGs, or live boards. Use for whiteboards, infographics, diagrams, system…

Senior-level Android engineering expertise for Jetpack Compose, Material 3, shared element transitions, navigation, performance, security, background work, notifications, adaptive layouts, Coil image…

Guides users through a stricter 7-step agile PM workflow. Invoke when users have a rough product idea and need interactive HTML prototype, PRD, mermaid flowcharts, and versioned delivery.

Research a topic (a company, service, website, or product) and render a short promo video as an MP4 drawn entirely in code, in one of the bundled styles or any style the user describes or shows. The…

Generate an ink-wash editorial poster prompt and the matching bitmap image from a user's theme, sentence, object, mood, article idea, photo, content brief, poem, memory, event, place, or other…

RYUX - design intelligence for AI agents and designers. Tell it what you are doing and it routes to Analyze (understand an existing interface), Design (create or improve UI and UX in Figma, pen.dev,…

Enforces accessibility as a correctness property authored into each widget — Semantics(button/label) or ExcludeSemantics on every node, a11y state read from MediaQuery not app state, never…

Critique generated UI, copy, or code when the user requests a quality review of AI output.

Use when creating polished technical diagrams as self-contained HTML+SVG files for software architecture, system design, process flows, cloud infrastructure, security boundaries, network topology,…

Extract structured UI data from design images. Use when a UI screenshot or mockup plus sliced assets must become layout hierarchy, positions, text, asset references, and ui_structure.json for…

Apply designed cinematic captions to an existing HyperFrames video by selecting hero words from speech, building ordered mixed-case stacks, placing type around a speaker, and using subject-aware…

Builds standard operating procedures from a guided interview, screen-recording transcript, or existing draft. Use when the user says "write an SOP", "document this process", "make an SOP for X", "I…

Generate and edit images, videos, speech, and music with PixVerse CLI; run effect templates, MiniApps, and connected Canvas workflows. Use for PixVerse generation, asset management, and creative…

极速规划、构建、部署或审计以 Google 自然流量和询盘为目标的静态外贸 B2B 网站。 默认使用 Vite、React 与 TypeScript 在构建时为每个网址预生成完整 HTML，并配合 Cloudflare Pages、Pages Functions、D1 与 Resend， 支持图片随站部署或使用 R2 两种媒体模式。需要 CMS、草稿发布、前台编辑或复杂内容运营时改用…

Build custom dropdown/select/autocomplete/multiselect components using Mantine's Combobox primitives. Use this skill when: (1) creating a new custom select-like component with Combobox primitives, (2)…

Distill a reference into reusable mechanisms instead of copying surface style. Keep new results unreviewed by default, separate capture from reuse approval, and hand only public-safe, scope-matched…

Comprehensive skill for Anime.js v4 - a fast and flexible JavaScript animation library. This skill should be used when implementing web animations, creating timelines, working with SVG animations,…

Generate concise, human-readable GitHub Trending briefings from WebFetch/WebSearch results, compare against prior markdown reports when available, and write daily or weekly trend summaries. Use when…

将 X 长文、网页、书籍资料、PDF、文字稿或零散笔记整理成完整的小红书内容发布包，并可改写为公众号文章与贴图。在用户要求制作小红书知识卡、读书卡、教程卡、图文笔记、发布正文、标题标签、公众号长文、公众号横版配图，或要把一份原始素材转成可发布、可检查、可复盘的内容工作流时使用。

Taiwan .edu.tw student benefits tracker and reminder system. Discovers, tracks, and reminds students of 50+ free subscriptions and credits available to Taiwan university students (GitHub Student Pack,…

Use this skill when validating CSS for Divi 5 / Divi 5.11 compatibility, checking unsupported features or units, troubleshooting Divi CSS that isn't applying, debugging plugin conflicts (WP Rocket,…

Automated design system construction from repository analysis to production-ready implementation. Analyzes codebases, extracts design patterns, builds token hierarchies with OKLCH color management,…

Define how multiple brands, sub-brands, and product lines relate to each other under one organization. Use when the user says "brand architecture", "sub-brand", "brand portfolio", "master brand",…

Use when creating, revising, or reviewing explanatory data charts for a blog, report, paper, slide, newsletter, or social post. Includes matplotlib, seaborn, pandas .plot, ggplot2, Plotly,…

Implements Syncfusion® .NET MAUI Accordion (SfAccordion) - a vertically collapsible panel with stacked headers for expanding/collapsing content. Use when working with accordions, collapsible panels,…