Design AI Skills

Create or edit information-dense, componentized, and fully editable Japanese corporate PowerPoint decks (.pptx) and one-page ポンチ絵 in the style of Japanese manufacturers, industry associations,…

Use when Unity UI needs sequential design planning, layout-focused implementation, or repair through `unity-mcp`: attached UI mockup, mockup screenshot, uploaded design image, dropped design image,…

Overkill negative-prompt skill that stops AI-generated UI from looking like "AI slop" in a single glance. Detects and bans the statistical-mean design defaults LLMs emit (purple gradients, Inter,…

Use when a product direction, feature, workflow, experiment, launch, feedback signal, automation, or scale decision needs judgment before execution or the next iteration.

This skill provides a curated set of cross-platform design guideline prompts for building consistent, high-quality UIs. Each guideline defines common rules, component-specific guides, and an…

Forge design system for React. Use when writing any React UI in this project, when picking which component to use, when theming, when creating block templates, or when reviewing UI code for…

Design, build, redesign, or critically review distinctive frontend interfaces with strong composition, domain authenticity, responsive behavior, component coherence, and browser-verified visual…

Create polished competition, product, and technical PPTs through a content-to-template workflow: analyze supplied documents and user goals, lock deck style tokens and image asset roles, map each…

Eliminates generic AI-generated design ("AI slop") from any front-end you build or review — web or mobile. Use whenever generating, reviewing, refactoring, or critiquing a website, landing page,…

Use when Codex needs to work with this repository's local Figma AI Bridge workflow: start or check the localhost bridge, guide Figma Desktop development plugin capture, locate/validate/summarize…

Google Fonts typography system generator. Suggests single fonts (strict mode) and font pairs (contrast mode) with complete typographic scales following Tailwind Typography rhythm concepts. Generates…

Coach a client or team through defining a brand's visual identity from scratch — what it should make people feel, the muses it steals from, the distinct creative concepts, and the latitude it's…

Design-quality skill for AI agents building websites, landing pages, and web app UI. Use whenever creating or restyling any web interface that must read as designed by a senior designer, not…

Build refractive "liquid glass" UI for the web (Apple Liquid Glass style) that renders the same in Chrome, Safari/iOS and Firefox — SVG feDisplacementMap applied through CSS filter to the content…

Authentic Arabic writing, UI/UX microcopy, and RTL engineering. Use when writing, translating, or reviewing Arabic interfaces, dashboards, articles, documentation, or copy. Enforces classical…

Frontend UI design, critique, audit, polish. Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…

Apply or adapt a complete dual-theme UI specification board for product interfaces. Use when Codex should build or restyle dashboard, admin, workspace, settings, or system UI with both light and dark…

Builds sites, pages and components from Lucian UX/UI Prompt (lucianlabs.dev/uxui-prompt), a growing library of polished, dependency-free interactive UI elements with light and dark themes, keyboard…

Use this skill whenever the user asks to build, create, design, redesign, polish, audit, animate, improve, fix, or "make prettier/cleaner/nicer" ANY frontend interface — landing pages, dashboards,…

Use when generating, redesigning or reviewing any UI — landing page, dashboard, app screen, component, or design system. Teaches the agent to analyze product and audience first, choose one design…

Design, build, evolve, repair, or review frontend interfaces and code-rendered visual works. Use for apps, pages, components, interaction and visual direction, reference-to-product implementation,…

End-to-end AI design system with 190+ battle-tested styles, AI image generation, and pixel-perfect export. Designs social media posters, carousels, YouTube thumbnails, PDFs, and full websites —…

Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed…

Master advanced tool use patterns including chaining, parallel calls, and error recovery for complex Claude Code workflows

Use when creating, repairing, converting, packaging, or verifying app icons for any platform from briefs, references, brand marks, SVG/logo/text assets, generated concepts, or existing icons; use the…

Use this skill when the user asks for a "high-quality" / "professional" / "Genspark-style" / "投资人级别" / "演示级" deck, or when they reference Genspark, Gamma, beautiful HTML slides, or pixel-perfect…

Strict anti-slop UI design system for scanning, fixing, redesigning, judging, and preventing generic AI-generated frontend work. Use when Codex works on UI/UX, React/Vue/Svelte/HTML/CSS/Tailwind,…

Stop your AI agent from generating Tailwind CSS v3 code. Rules for v4 syntax, CSS-first config, modern utility patterns, and common anti-patterns.

Run repeatable single-track frontend-design benchmark loops for this repo. Use this when creating sequential experiment versions, tuning frontend-design SKILL.md instructions, running Codex from…

Preserve an existing website or app design system when adding, moving, or restyling sections, cards, headings, backgrounds, CTAs, forms, and other UI blocks. Use before frontend changes that affect…

Add a published design source (an article, a guideline page, a study) to the design-brain ledger as reviewable candidates. Use whenever the user shares a link or a passage and says to add it, save it,…

Generate a DESIGN.md from a brand brief. Use when the user wants to create a visual identity, design system, or brand style guide for a web project. Also use when starting a new website from scratch.…

生成现代分享/投屏风格的单文件网页 PPT(横向翻页·专业极简风·干净排版·3 套可切配色)。当用户要做线下分享、演讲、发布会的网页 deck,或提到「modern ppt」「做个分享 PPT」「投屏 deck」「网页 PPT」「把这段做成 slides」时使用。内置 12 个版式 + 交互动效(count-up / Chart.js 图表) + 3 套配色(默认安全橙,可切明亮蓝/柔和粉)+…

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy…

Add GSAP-powered animations, scroll effects, parallax, parallax floating sections, video scrubbing, and typography animations to websites. Use this skill when the user asks to animate elements, add…

Apply this skill whenever building any user interface — component, page, flow, or full product. This is not a style guide. It is a design operating system built from a decade of shipping products for…

专业UI/UX设计师技能。当用户需要设计网站、产品介绍页、落地页、Web应用界面，或需要配色方案、排版设计、视觉风格指导时调用。自动进行市场调研并输出完整设计方案。

Exports an OpenDesigner system to CSS variables, Tailwind, DTCG, Swift, Compose, Figma and Paper, and writes it into Figma or Paper through their MCP servers when connected.

Build agents that generate rich, interactive UIs using Google's A2UI (Agent-to-User Interface) format with Google ADK (Agent Development Kit). Use when building ADK agents that need to render dynamic…

Apply the "Family Values" design philosophy to every UI you build. Use this skill whenever creating frontends, components, apps, landing pages, dashboards, or any user-facing interface. Enforces three…

Builds, reviews, and migrates SwiftUI interfaces that use Apple's Liquid Glass design on iOS, iPadOS, macOS, watchOS, and tvOS 26 and 27. Covers glassEffect and the Glass variants,…

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

한 문장 요청에서 완성된 웹페이지를 만든다. 컬러 팔레트 93세트·서체 페어링·업종별 사진 레시피를 내장하고, 제작 4트랙·검수 3트랙을 병렬로 돌린 뒤 안티패턴 디텍터로 AI 티를 기계 검사한다. 완성 후에는 상호명·전화번호 같은 실제 정보를 직접 물어 채우고 사진 교체 여부를 확인한다. "카페 사이트 만들어줘", "필라테스 스튜디오 페이지",…

Generate style-consistent frontend code using a saved design system (tokens.json + DESIGN.md) from the global library or a local DESIGN.md. Loads the design system + semantic roles + essence,…

Production-grade UX audit and design guidance skill. Transforms vague design feedback into actionable, implementable recommendations. Two modes: `guide` (principles + do/don't rules for modern…

Diagnose or restore the figma-console Desktop Bridge with a minimal state-based action and verified pairing. Recovery is session-safe; macOS scripts, restart and persistent helpers keep their own…

Build frame-exact motion graphics — animated logos, kinetic typography, brand videos, animated titles and social clips — as a single HTML file driven by a paused Web Animations timeline, then export…

Senior product-design workflow for web and mobile UI that avoids generic "AI slop" and produces token-based, accessible, platform-correct design with a deliberate visual anchor. Use when asked to…

Award-winning SaaS UI/UX design persona reconstructed from the claude-fable-5 model. Apply to any web/UI work — websites, landing pages, SaaS surfaces, components, design systems — even when "design"…

Make real, accurate maps as one self-contained HTML, SVG and PNG. Choropleths by country, state, province or US county, or by any boundaries in the user's own GeoJSON, TopoJSON or KML (districts, ZIP…

Inject aesthetic principles from painting, photography, graphic design, and Eastern visual tradition into any visual/design decision. Use when reviewing UI/UX, making typography/color/layout/spacing…