Design AI Skills

Build a documentation, article or reference page with Bullframe CSS. Use for docs, guides, changelogs, help center articles, blog posts, or any prose-first page.

Improve or implement purposeful motion systems, micro-interactions, gestures, and transition behavior for production-grade UI. Use when the user mentions animation, motion, transitions,…

Use when the user asks to create / generate / make a NEW design from a prompt — a deck or slides, poster, flyer, social post, business card, a video (animated post, reel, clip with music or…

Critique a design on layout, accessibility, responsiveness, dark mode and edge cases, with Pass, Needs work or Fail verdicts. Use on a built screen.

Extract, document, or normalize a product UI design system from code, screenshots, or brand sources. Use for visual tokens, theme variables, typography, spacing, colors, radii, shadows, component…

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO…

Build narrative-driven, speaker-centric keynote decks (20-35 slides, default 28) for conference talks, TED-style presentations, and standalone speaker decks. Triggers, "keynote", "keynote deck",…

Write accessible HTML, CSS, and JavaScript that conforms to RAWeb 1.1 (Luxembourg Web Accessibility Framework, based on EN 301 549 / WCAG 2.1). Use when developing web interfaces, components, forms,…

Creates a new animation style in drawn-by-code (code kit + template + skill + style test). Use it when the user asks for a look no style in styles/ covers (e.g. kinetic typography, flat/product motion…

Dispatcher for the creative suite: diagnoses a multi-asset creative request with a few questions, then routes it through the right sequence of creative skills, naming the artifact each step passes to…

Use when implementing translucent glass surfaces, vibrancy/blur materials, the 2025 Liquid Glass language, app icons (the continuous-corner squircle), or SF Symbols. Part of the apple-design family.…

Workshop-specimen language for a heritage Japanese blade maker selling craft to professional buyers. Plaster ground, graphite ink, one oxide-red seal. Use for craft-heritage launch and distribution…

Guide for creating logos, brand identities, and visual assets with AI tools: which tool fits which scenario (Recraft, Midjourney, Firefly, DALL-E, Stable Diffusion), prompt engineering per tool,…

Generate AI music on RunComfy via the `runcomfy` CLI — a smart router across the music-model catalog. Routes to ElevenLabs AI Music Generation (premium 44.1 kHz stereo vocal tracks, 5 s–5 min,…

Complete brand development system with emotive foundation. Triggers on requests for brand identity, logos, visual systems, or design guidelines. Creates distinctive, anti-AI-slop design from strategy…

Evaluate interface descriptions against 195 research-backed UX/UI principles. Returns structured findings with severity, remediation, and business impact. API key optional — enriched output requires…

Turn a startup idea, product, URL, pitch, or existing visual identity into a distinctive startup brand system and a polished standalone HTML report. Use when Codex needs to create or refine startup…

Use when organizing, critiquing, or implementing navigation, labels, taxonomy, hierarchy, search, content grouping, or wayfinding for a digital product.

Translate a brand's strategy — its emotional target and muses — into the concrete visual system: color, typography, composition, pattern & texture, iconography, illustration, and photography, as one…

Apply or adapt a dual-theme soft-neumorphic UI board for dashboards, workspaces, settings panels, admin tools, and design-system previews. Use when Codex should build or restyle interface work in a…

Guidelines and instructions for Agent execution step counters limits

Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.

Converts demo UIs into believable, end-to-end product workflows. Use when building, reviewing, or finishing apps, dashboards, CRUD flows, forms, onboarding, checkout, settings, auth-like surfaces,…

Create distinctive, production-grade frontend interfaces with strong art direction. Use when building or restyling web components, pages, dashboards, landing pages, React apps, HTML/CSS layouts, or…

Generate a screen using Google Stitch or Claude Code from a text description. Use when the user wants to create a new web page, landing page, dashboard, pricing page, about page, or any UI design.…

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

Finds open-licence SVG illustrations for empty states, onboarding, errors or heroes, ranks them for fit, recolors them to the design tokens with light, dark and themed variants, and wires them in.

The page-level Moodboard in Web Anatomy. Build a section-by-section visual reference board for a whole page (homepage, landing page, money page): for every section, the current state captured large,…

Apply requested Figma review comments to their pinned screens with scoped discovery, idempotent fixes and private evidence. Existing authorization governs writes; public replies need an explicit…

OKLCH color-system guidance for cohesive palettes and contrast-safe tokens. Use when choosing colors, generating ramps, fixing muddy palettes, creating semantic state colors, checking WCAG contrast,…

Extract template contracts from a .pptx file. Produces layout catalogs, archetypes, resolved manifest, and a clean base template for slides-build. Use when the user provides a PowerPoint template,…

Premium mobile UI skill for React Native and Expo apps. Enforces native-grade interaction patterns, platform-specific motion, gesture physics, and non-generic visual systems for iOS and Android.

Direction and intent for frontend design. Use with design when defining purpose, tone, domain, color world, and review bar; includes cross-domain lens from cinema, architecture, marketing, UX,…

Use this skill when designing narrative content — landing pages, case studies, onboarding flows, marketing campaigns, sales decks, ad arcs. Trigger when picking how to frame a customer story, when…

Brand strategy, visual identity, positioning, corporate design, portfolio presentation, and consistent brand management across all digital touchpoints.

After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading…

Experimental DryUI layout-only skill that prioritizes app shell chrome, rails, and persistent navigation before content blocks. Use when testing responsive page layout extraction from web app…

Whole-app redesign of an existing React Native / Expo app - full audit (tokens, navigation vs the Nav Read rules, screen archetypes, dial reading), preserve-vs-overhaul decision, then a phased…

Live CSS playground for tweaking element styles in real-time in the browser. Use when the user says 'open css playground', 'let me tweak styles', 'live edit CSS', 'try different styles', 'experiment…

为 Codex 打造的顶级网站 image-to-code skill。遇到视觉重要的网页任务时，必须先自行产生设计图、深入分析后，再实现出尽可能贴近设计图的网站。在 Codex 中必须偏好大张、可读、针对单一 section 的图片而非压缩过的小图板；为 section 或细节视图产生全新的独立图片而非裁切旧图；避免偷懒少产图；避免卡片套卡片再套卡片的 UI；并让 hero…

Design meaningful interactions, microinteractions, animations, state machines, gesture patterns, error prevention, and product behavior. Specify how products respond to user input across all states…

Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion…

UIForge's motion layer — art-directs motion for React/Next.js + Tailwind interfaces built with Motion-Primitives (the shadcn-style copy-in registry, powered by Motion / ex Framer Motion). Use whenever…

Color theory and palette engineering - harmony schemes, 60-30-10, OKLCH scales, semantic color roles, dark mode, WCAG contrast math, color-blind safety, cultural color meanings, gradients and print vs…

Design intent grilling session. Interviews the user relentlessly about visual direction — brand personality, audience, references, color, typography, animation level, component style — before any UI…

阶段 1-7 持续维护的 design.md 主写手——把调研（六维试吃）+ 双轮深度采访 + 视觉锚定三件套 + 动效实现 prompt 集全部压缩为 Agent 可执行的设计契约。kun 版 15 段三轮写作顺序（原 12 段 + 新增 §12 Moodboard Prompt / §13 Page Mockup Prompt / §14 Motion Prompts…

首屏与价格页——决定官网转化的两屏。包含首屏形式选择、标题约束、CTA 层级、证据条、价格档位设计、锚定、对比表和价格数字排版。当新建落地页/官网/SaaS 营销页，或转化率低、访客不往下滚、价格页没人下单时使用。

Design, build, and verify distinctive one-off visual artifacts such as landing pages, interactive prototypes, component explorations, product mockups, dashboards, onboarding flows, and motion studies.…

Audits a Figma file to see whether it is set up well enough for AI to design on-brand, build-ready emails in it, and produces a scored report plus a fix list. Run it before using email-design on a new…

Use when designing how users move through a product: flows, screen states, wireframes, Figma mockups, funnels, paywalls. Triggers: "юзер флоу", "add a screen" / "добавь экран", "mockups" / "макеты".…

Use when designing, building, or reviewing any checkout, cart, payment, or purchase flow — e-commerce carts, one-off purchases, donation forms, in-app buying. Also use when users report cart…