Design AI Skills

Universal brand guideline engine for producing, reviewing, and suggesting brand-compliant marketing materials for ANY company. Use this skill whenever a task involves brand identity, visual…

Use when building any UI that displays prices, P&L, holdings, orders, trades, charts, order books, watchlists, or streaming market data. Covers patterns from Kraken, Coinbase, TradingView, Bloomberg,…

Use when bringing a design system into an EXISTING codebase - migrating hardcoded values to tokens, replacing one-off components, planning incremental adoption, running the audit-infer-migrate…

Design and build instrument-grade marketing pages and in-product surfaces (app pages, dashboards, panels, and subpanels) that feel like the product, not a template. When the look is not decided yet,…

Evaluates whether a design is well made, has taste, and should exist. Use when a designer asks 'does this have taste', 'why does this look off', 'is the craft solid', 'does this have a point of view',…

Create stunning, animation-rich exploratory visual web pages from text content. Supports both Slides mode (presentation-style with slide navigation) and Scrolling mode (scroll-driven narrative with…

WordPress UX and design enforcement — Core Web Vitals, mobile-first layout, typography, color systems, navigation, page builder patterns, image optimization, form UX, loading and error states, admin…

诊断并消灭界面的「AI 味」——那种一眼就能看出是模板生成、廉价、没有判断的观感。包含一套可执行的扫描清单、严重度分级、修复优先级和前后对照。当用户说「看起来像 AI 做的」「很土」「不高级」「廉价」「一眼假」，或要求新建落地页/官网/作品集时使用。这是设计类任务的起点技能。

Use when building or restyling React UI in a project that uses Fine (fine-design, @fine/ components, theme-ledger, theme-folio, theme-poster), or when asked to install or use Fine components. Fine is…

AI-native design spec generator. Six-phase workflow (Anchor-Frame-Search-Systematize-Compose-Verify) outputs three-layer W3C DTCG tokens (primitive-semantic-component) + layout-spec + preview.…

Audits web UI and raises it from competent to exceptional. Catches what AI tools ship and people notice at once: broken or shifting layouts, cards and values off a shared line, orphaned words and lone…

Create hand-drawn, morphing line animations (boiling ink, riso-style fills) from simple shapes and export them as animated SVG, Lottie JSON, HTML or shareable links. Use when the user wants an…

Use when designing, reviewing, or rewriting Omarchy-branded UI, websites, themes, posters, illustrations, logos, icons, product copy, menus, keyboard shortcuts, or community artifacts that must match…

Turn any static SVG mascot, logo, icon, or character into physics-driven animation, using Anime.js v4 as the default engine for interactive contexts and baked CSS keyframes for README and docs assets.…

Extract visual design systems from existing websites into reusable markdown style guides, optional website demos, and optional app UI style guides. Use when analyzing a live site, screenshots, or…

Design and edit web pages as a validated HTML file with inline CSS, then fine-tune them on a local canvas. Use this skill whenever the user wants to design, mock up, wireframe, redesign or restyle a…

Blind, adversarial review of a finished email design in Figma, scored against the brand's EMAIL.md and a weighted rubric before anyone builds it. The critic role: the deliverable is a scorecard and a…

把「大纲 Markdown」渲染成单文件横向翻页 HTML PPT（浏览器放映、B 键静态、WebGL 水墨背景、5 套主题）。在任何目录放大纲都能渲染，无需依赖具体工作区。支持 M05–M14 元件三控（字号/垂直/水平）、L01–L27 ＋ L12b 共 28 个版式（含 L19 条形图／L20 KPI 塔／L21 闭环图／L22 系统同心圆／L23 多图证据墙／L24 论断陈述／L25…

Audit a web page for RGAA v4.1.2 Theme 3 – Colors accessibility compliance. Checks that information is not conveyed by color alone, that text contrast ratios meet minimums (4.5:1 for normal text, 3:1…

Advise on and critique UI/UX design work through the lens of Luke Wroblewski's published principles, using his MCP archive to retrieve relevant writings, presentations, videos, and other source…

Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar…

A checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building,…

为数字界面、平面海报、实物周边与出版装帧等各类载体构建与转译万能青年旅店的视觉设计语言（美学偏向于《冀西南林路行》）。当用户提及“万青设计”、“万能青年旅店风格”、“石刻拓片”、“经折装排印”、“矿物墨色”、“唱片视觉设计”时触发。

Real artistic colour palettes with provenance, made into working UI colour systems: Sanzo Wada's A Dictionary of Color Combinations, Heian kasane no irome layered patterns and palettes sampled from…

Builds distinctive frontend UI with SvelteKit/Bun/Hono. Triggers on: web pages, dashboards, landing pages, apps, artifacts, styling, theming, fonts, animations, charts, dark/light modes.

Experto en accesibilidad digital basado en los estándares oficiales W3C WAI (https://www.w3.org/WAI/). Úsalo SIEMPRE que el usuario mencione: accesibilidad, WCAG, A11y, contraste de color, lectores de…

Direct and render polished short motion-graphics reels, brand films, and kinetic showcases in code. Use for a punchy product or identity reel, or when existing animation feels static, sparse,…

Triggers when the user says things like "help me tweak [component]", "I want to fine-tune [style]", "adjust the [property] of this element". Generates a live preview + full control panel; after the…

Verified 2026 implementation cookbook for Awwwards-grade front ends (474 recipes, type-checked and browser-audited). Covers motion and easing tokens, GSAP ScrollTrigger + Lenis choreography (pin,…

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

Create a 3D spinning coin/medal effect from any logo image using React Three Fiber. Auto-detects the logo's outline, removes solid backgrounds (white, black or any flat colour), builds a chrome-rimmed…

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants,…

Turn a logo, brand mark, or existing IP into a consistent set of playful die-cut paper stickers. Use for brand character extensions, logo personification, website sticker assets, or sticker variations…

Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does…

Plan and deliver complete websites with adaptive discovery, industry research, client-specific UI/UX, frontend, backend, authentication, persistent data, local preview, and evidence-based acceptance.…

Apply these opinionated rules whenever CSS is written, refactored, or reviewed, so agents and people write it consistently. They sit on top of the Modern Web Guidance skill and settle the choices it…

Build 3D and WebGL experiences in React using react-three-fiber (R3F) — Canvas setup, useFrame/useThree hooks, JSX Three.js elements, geometry/materials/lighting, scroll-driven 3D storytelling, and…

Generates or regenerates a project's brand assets (logo, favicon and their variants) through the brand toolchain, faithfully. Use when the user wants to "regenerate the logo / the favicon", "add an…

Generate slop-free Android UI in Jetpack Compose + Material 3 Expressive (Android 14+ / API 34+). Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component,…

Accessibility review for web and mobile UI, including contrast, keyboard/touch interaction, semantics and motion.

Build PowerPoint-style 16:9 slide decks as a single self-contained HTML file in which every sensitive value (client names, figures, KPIs, dates, deal terms) is a variable holding DUMMY data; the user…

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and…

Build, redesign, review, polish, and QA frontend UI/UX, React/Next/Vite components, landing pages, dashboards, forms, design systems, responsive layouts, accessibility, visual hierarchy, and…

Build product UI in Turnip UI, the DeFi Summer farm language: cool-gray canvas, Nunito extra-bold, 3D mascot heroes, magenta pill CTAs, cream selection cards, whisper borders, centered 920px column.…

Audits a finished deck against the brand and template and returns a flagged list of every off-brand and off-template element.

Design a page or UI on request that follows professional web interface guidelines and does not look AI-generated. Use when asked to design, build, or mock up a page, landing page, screen, component,…

Reviews accessibility mid-design, not as a compliance audit, but as a craft challenge. Use when designing, describing, or building a UI component. Trigger on "I'm designing a component", "does this…

World-class UI/UX design intelligence — Tvastar v4.0. TRIGGER on: /design /preview /approved /apply /review /ship /component /heal /tokens /dark /a11y /cro /color /typography /motion /extract…

Diagnoses and fixes the entry experience of Solana products, wallets, DEXs, aggregators and lending apps, using components calibrated on a heuristic study of 13 apps. Use when the user is designing,…

Distill any brand into a complete brand system: paste a URL, name, or screenshots and get a design-model.yaml (single source of truth), a script-rendered brandbook.html (tokens, type, voice, imagery…

Magazine Article (Open Design) — use only when explicitly invoked, not for general design requests