Design / 设计

Design intelligence for AI-generated UI — principles, patterns, content, brand, design tokens.

Frontend design system utilities with component libraries, theme management, responsive design tools, and accessibility features.

基于文档内容自动生成配图。AI 智能分析文档结构，归纳核心要点， 为每个主题生成符合特定风格的配图。支持封面图生成和自定义图片比例。 使用场景：当用户需要为文档、文章、笔记生成配图时。 关键词：配图、插图、illustration、generate images、document images

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, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects…

Forensic accessibility and UI/UX front-end audit tool for web apps.

AI personas navigate your web app in real browsers, find bugs and UX issues. No scripts needed.

Automated design token builder producing clean CSS and Sass assets.

Automated design system token generator and export utility.

Visual UI/UX scanner auditing websites for heuristic compliance.

Search real-world UI & UX design references for mobile apps, web apps, and websites with Mobbin.

MCP server for VertaaUX.ai — run UX & accessibility audits from your LLM or IDE

MCP Server for Optics Design System documentation and token usage.

Generate design token systems from a hex color — OKLCH-derived, WCAG-validated, multi-format

Diagnoses and fixes common frontend issues including Ant Design deprecations and API failures. Invoke when user reports console warnings, UI crashes, or requests project maintenance.

Run E2E tests or interactive browser verification. Triggers on: 'run e2e', 'e2e test', 'browser test', 'check in browser', 'verify UI', 'interactive test'.

Generate, validate, and interpret static A2UI v0.8 JSON for interactive UI surfaces. Use when an agent needs to call publish_a2ui, author A2UI messages, check whether generated A2UI JSON is valid, or handle normalized userAction replies from interactive UI callbacks.

Cinematic short with skeuomorphic UI mockups (terminals, code editors, browser frames, device frames, postcards, dashboard tiles) animated in HTML+CSS — the photofilm's product-y cousin. Self-contained HTML player same as photofilm. Used for product demos, UI walkthroughs, technical explainers. CSS…

Build chat interfaces and agent management UIs with Castella. Create chat components, display tool calls, manage multiple agents, and build agent hubs.

Provides UX capabilities to enhance the design output and understanding of AI systems.

Implements HTMX interactions, configures swap behaviors, debugs hx-* requests, and builds hypermedia-driven UI components. Use when tasks involve hx-* attributes, HTMX AJAX requests, swap strategies, server-sent events, WebSockets, or hypermedia-driven UIs.

Design and implement distinctive, production-grade frontend interfaces for web pages, components, and apps. Use when users ask for UI design, layout polish, landing pages, dashboards, React components, HTML/CSS styling, or visual redesign. Trigger phrases include "design this UI", "build a landing …

CRITICAL: Use for Makepad font and text rendering. Triggers on: makepad font, makepad text, makepad glyph, makepad typography, font atlas, text layout, font family, font size, text shaping, makepad 字体, makepad 文字, makepad 排版, makepad 字形

Analyzes a Stitch project to generate a DESIGN.md file -- documents the design system in semantic, natural language to support consistent UI generation. Triggers on: Stitch, design system, DESIGN.md, Stitch design analysis. NOT for: React component conversion, code implementation.

Study a merged or shipped tdmcp implementation and extract reusable learnings: code improvements, runtime/UX lessons, test gaps, docs updates, roadmap items, and harness changes. Use when the user asks to learn from a completed feature/project/PR/build, analyze what can be improved from an implemen…

Convert Android XML layouts to Jetpack Compose. Use when asked to migrate XML layouts, convert views to composables, or help with Compose migration. Handles layouts, widgets, attributes, styles, and resource references.

辅助小白用户进行Vibecoding全流程。当用户说"我想做一个产品"、"帮我做一个工具"、"我有个想法"、"帮我vibecoding"、"帮我做个app/网页/工具"时触发。通过三个Agent角色（需求收集→PRD梳理→UI+技术架构）引导用户从模糊想法到可以直接交给Cursor/Trae开发的完整文档包。

Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout.

Convert markdown documents to PDF with optional illustrations. Can automatically call illustration-generator if images are missing. Supports Chinese fonts and custom styling.

Ready-to-use wireframe templates for common page types and layouts. Use when searching for wireframe templates, page layouts, or design inspiration.

AI image generation skill powered by Google Gemini, enabling seamless visual content creation for UI placeholders, documentation, and design assets.