Design AI Skills

Launch and operate a local Codex drawing workspace: a lightweight vector board where the user and Codex share editable scene state through a browser UI, workspace-backed JSON, local API mutations, and…

Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns,…

Audita e reconstrói um fluxo ou tela para reduzir atrito e fricção de UX.

Use when the user wants a research-paper figure Skill Factory: build, patch, package, or use reusable specialized paper-figure-making skills from lawful literature/corpus evidence. Generated skills…

《DaVinci Resolve 21 中文操作手册》——达芬奇**操作类问题的首选 / 优先检索入口**（数据来自 DaVinci Resolve 21.1 官方参考手册（V2 汉化，2026 年 9 月；原文汉化 @谜一样的剪辑师，收集整合 @一个成熟的剪辑猿）。 汉化表述有歧义或缺失时，以 Blackmagic Design 英文原版 21.1 Reference Manual 为准。…

End-to-end stateful workflow for designing and generating editable PowerPoint decks from briefs, templates, reference decks, brand assets, data, ImageGen comps, or user-supplied slide images. Uses…

Use when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi…

Reference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography,…

Create, vary, review, or extend product interfaces. Routes design generation, design systems, components, existing-site analysis, UX review, presentations, WeChat layouts, brand color, and anti-AI…

Use when Codex should improve visual UI/UX through a screenshot-driven design loop with imagegen assets, vision review, responsive checks, interaction states, accessibility, A/B variants, design…

把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。

Design, build, refactor, or review terminal interfaces—full-screen TUIs, interactive prompts, and command-line tools. Use for terminal-app layout and UX, CLI behavior, ncurses-style tools, dashboards,…

Use when an existing CoDesign design should move — "animate this", "make it move", "turn this post/poster/carousel into a video", "motion version", "make a loop of this". Turns a still single- or…

Generate a complete design system (design.md, design-guidelines.md, design-components.md) from any reference materials — images, PDFs, links, or descriptions.

Design systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy…

Design, improve, and validate UI/UX for applications, websites, native interfaces, and games: an art direction derived from the product, a coherent visual system kept in the project's DESIGN.md (read…

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS…

Load when reviewing UI code, designing a component or layout, picking an easing curve or transition, deciding whether something should animate or make a sound, choosing typography, color (OKLCH,…

Create or update BRAND.md files for strategy, audience, positioning, personality, messaging, voice, approved identity primitives, governance, and sub-brand inheritance. Use for durable verbal and…

用 reveal.js 製作或修改 HTML 簡報（單檔、可離線、深色專業版型、真實截圖、QR、互動頁、觀眾手機即時投票），逐頁截圖 QA 並驗證 QR，再輸出講義 PPTX／PDF 或原生可編輯 PPTX。當使用者說「做一份 HTML 簡報」「reveal.js 簡報」「簡報加底圖／截圖／QR」「簡報加互動／現場投票／觀眾用手機作答」「HTML 簡報轉…

Create high-converting, visually distinctive landing pages. Use when building marketing pages, product launches, SaaS homepages, or any single-page conversion-focused website. Guides…

Builds 15-slide all-hands decks for company-wide team meetings with balance of wins and candor. Trigger phrases: all-hands deck, town hall deck, monthly all-hands, company-wide meeting, team meeting…

用前端渲染生成图片 —— 不依赖模型的多模态能力，任何能写 HTML/CSS 的模型 (DeepSeek / Claude / Kimi / GPT 等) 都能用。 当用户要「生成/做/画一张图」且属于以下任意一种时使用：头像、图标、公众号封面、 OG 分享图、Banner/横幅、小红书封面、知识卡片、金句卡、代码片段图、数据卡、…

Produce high-quality design documents through research, divergent thinking, and iterative refinement. Use when asked to design a system, component, or architecture — e.g., "design a task queue",…

Directs the creation of a code-made animation or video in drawn-by-code, from brief to final MP4. Use it whenever the user asks for a video, animation, motion graphics, explainer, product/launch…

用 Smartisan OS（锤子科技 / 坚果手机）的 UI 风格做前端界面：轻拟物、细腻纵向渐变、极细描边、柔和投影与内凹阴影、灰阶为主 + 低饱和蓝强调 + 锤子红品牌色。当用户提到 Smartisan、锤子、锤子风格、坚果 OS、Smartisan OS、老罗/罗永浩那种拟物风、"像锤子手机一样的 UI"，或要求把网页/组件/App…

Generate production-quality SVG character animations — state machines that morph between N SVG states (2–10) with per-state idle motion (breathing, blinking, swaying). Use whenever the user wants to…

生成"黑墨手绘涂鸦"风格的动画架构图/流程图：米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML（SVG+CSS），可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化，或提到"手绘风""涂鸦风""动图""animated diagram""GIF…

Produces branded visual identity elements — logo concepts, icon sets, seamless patterns, brand illustrations, and textures — as generation-ready prompt specs, and generates them via FAL.ai…

Анимация, в которой объект собирается из деталей LEGO по шагам, в стиле фирменной инструкции. Все нарисовано кодом на Canvas 2D, без картинок и 3D-движка, рендер в mp4 вертикально 1080x1920 или…

Use when creating, improving, converting, or redesigning design-system-driven PPT, PowerPoint, PPTX, slides, decks, webpage PPT, HTML-first presentations, pitch decks, reports, defense decks,…

Deploy 8 radically different visual direction demos for a website or webapp project. Creates self-contained Next.js pages under /demo/ with distinct identities (typography, color palette, layout,…

Design and generate polished, on-brand presentation decks as clean 1920×1080 HTML — with real charts, tables, and AI or stock imagery. Use whenever someone wants to create, design, or improve a…

Design and build client-ready websites and mobile web apps in a working studio's proven house style, shown throughout on two fictional brands (AURA Heights, The Assembly): tinted grounds, editorial…

万能复刻 / universal website copy-remix workflow with evidence-based reference recon. Use when the user wants to copy, clone, recreate, remix, migrate, or rebuild any reference website's look, interaction…

Author or change screens of an AINDF design system through its DS-MCP only. Use when asked to build, change or fix a page/screen of a product whose design system exposes an AINDF MCP (tools get-ds,…

Design, build, redesign, critique, audit, and refine frontend interfaces with strong visual direction and production-ready UX. Use for websites, landing pages, dashboards, application UI, components,…

Use this skill for any pencil.dev work, such as designing UI in a .pen file, editing an open Pencil canvas, sketching or mocking screens, instantiating components from a .lib.pen library, reading an…

Comprehensive ISA-101 design rules for Human Machine Interfaces in process automation, with detailed reference files covering color design, display hierarchy, navigation, alarms, human factors,…

Audit and improve iOS/SwiftUI app aesthetics — typography, color, spatial composition, motion, and atmospheric depth. Use when reviewing UI design, critiquing screenshots, or improving SwiftUI view…

Use this skill whenever the user asks for an HTML-first visual design deliverable or design judgment: interactive prototype, slide deck, motion demo, infographic, dashboard, landing page, whitepaper,…

Add a Canva-style visual Edit Mode to any HTML presentation/slide deck. Use this skill EVERY TIME you create, generate, or finish building an HTML presentation, slide deck, or מצגת for the user -…

Use when designing or building a website, landing page, Framer template, pitch visual or brand system in the "classical painting × modern tech" art direction (Renaissance / neoclassical oil paintings…

Create production-quality Manim Community Edition explainer videos, math animations, algorithm visualizations, paper/PDF explainers, data stories, and architecture diagrams. Use when a user asks for…

UI design and implementation for real product surfaces with taste-first critique, reference routing, project-specific design briefs, variation comparison, and implementation verification. Use when…

Use when designing, critiquing, implementing, or revising UI/UX/frontend work for accessibility and inclusion.

Use when user mentions "brand", "Open Session colors", "Aperol", "Charcoal", "Vanilla", "brand guidelines", or works on UI following Open Session standards.

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

B端工业级设计系统与组件规范执行Skill。将资深UI/UX设计系统、组件选型否定判据(avoidWhen/doNot)、弹窗抽屉模态解耦、六大业务页面模板骨架、0.5px微边框与光学同心圆角转化为可执行的AI生成与审查约束。用于B端页面设计、组件搭建、代码审查与高保真原型还原。

Правила дизайна интерфейса для проверки и правки: типографика, цвет, отступы, иерархия, иконки, формы, состояния, навигация, онбординг, компоненты, мобильная вёрстка, графики, документы и слайды,…

UX co-pilot — conversational UX designer with live preview. Discovery, audit, preview, export.