Design AI Skills

Load this skill whenever the project contains charts, graphs, data visualizations, infographics, or any visual representation of data (bar charts, line charts, pie charts, scatter plots, dashboards).…

When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,'…

Reads /vector/research/assumptions/, prioritizes unvalidated assumptions by risk (Impact × Confidence), and generates a stage-appropriate validation plan. Use at the start of a sprint or before major…

Distill any book/text into a self-contained HTML page with 5-layer structure (overview / per-chapter / book-soul / action-checklist / credibility-grading). Zero external dependencies, embedded mermaid…

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

Use this skill as the main entry point whenever the user wants to build, plan, or evolve an interactive teaching website / course microsite / workshop landing page — from a blank slate, from existing…

Use for frontend code and UI fixes. Triggers: CSS, responsive, animation, React, Vue, Svelte, Tailwind, redesign, anti-slop, 프론트엔드, UI 작업, 반응형, 디자인 수정.

Make the environmental cost of AI usage visible — floor estimates built from published per-prompt figures, rendered as lightbulb time (💡), with an optional weekly energy budget that informs but never…

文戏的表演因果、动作的受力因果以及从上游表演交接到镜头的适配。

Designs detailed experimental protocols to validate research hypotheses. Each protocol includes independent variable, dependent variable, controls, sample size with power analysis, timeline, and…

Use when the user asks to create a custom post type, build a portfolio, set up case studies, add team members, events, or podcast episodes, or says 'scaffold a CPT'. Creates the post type plus…

Power Platform Critic and Quality Reviewer (Razor). Use when: reviewing architecture, reviewing code, code review, accessibility audit, WCAG compliance check, UX review, ALM review, Dataverse schema…

Theme Bullframe CSS with token overrides, dark or system builds, and a short project stylesheet. Use when branding colours or fonts, picking a dark or prefers-color-scheme build, or adding custom.css…

Use when turning a project — a repo, an app, a product, a website — into a short launch or promo video (15–25 s, mp4): "make a launch video", "brag about this", "make a promo for what we built", "turn…

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy,…

Audit a design against Nielsen's ten usability heuristics, tying every finding to a specific element with a specific fix. Use on a built screen or a detailed mockup.

Write a complete, render-ready Remotion video script as structured JSON: analyze the user's codebase or product, break the video into timed scenes, specify every visual element, animation, transition,…

Use when building an apple.com-style marketing/product page — the landing-page formula (sticky translucent nav, product-as-hero, full-bleed feature sections, bento grids, fat footer), scroll-driven…

Product launch and marketing decks. Benefit-led, customer-voice, visual-anchor heavy. Use when the user asks for 'product launch deck', 'marketing deck', 'feature launch', 'go-to-market deck',…

Official Anthropic skills for frontend design, artifact creation, and presentation. Covers UI/UX development tools, complex HTML artifacts, visual art in PNG/PDF, professional theme application,…

figma-agent — the CLI bridge to the Figma file already open in the designer's Figma desktop app, over a local WebSocket broker. SessionStart MAY have already run figma-agent status --peek and left its…

Use when designing, critiquing, or improving an interface for usability, including affordances, feedback, constraints, error prevention, navigation clarity, or task flow.

Apply a brand's defined visual system to a real, conversion-focused website — designing and building it in custom code, with real copy given its proper emphasis. Use when the user mentions 'website…

Guidelines and instructions for Agent memory persistence store setups

Android design conventions, Material Design patterns, and Google platform-specific design.

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js),…

Review the craft and technical precision of a requested Figma scope with project canon, measures and visual evidence; classify swap/snap/ask while respecting existing correction authorization.

Anti-slop UI review for generated or generic frontend work. Use after LLM UI output, or for requests to remove AI tells: purple gradients, pill CTAs, default type, centered heroes, three-card grids,…

Briefing, concept development, wireframing, prototyping, visual design, review, and handoff -- the structured path from requirements to finished design.

Experimental DryUI layout-only skill that extracts responsive page structure from design images as abstract colored blocks with strict shell areas, fixed page container queries, and visual…

Use when a web project needs business goals, audience, information architecture, conversion priorities, content hierarchy, constraints, or design CTQs clarified before visual design begins.

Create original quiet-living visuals from any theme, object, product, article, event, space, or supplied photograph using natural materials, restrained color, functional typography, asymmetric…

Quick design score card covering 12 dimensions with the top 5 improvements, in under 2 minutes. Use when the user asks for a design score, to score their design, to rate their UI, or for a quick…

Mobile app design for iOS (Human Interface Guidelines, SF Symbols, Liquid Glass era), Android (Material 3 / Expressive) and cross-platform (React Native, Flutter, SwiftUI, Jetpack Compose) - screen…

Color master skill. Audits every color decision across the product — balance, hierarchy, harmony, temperature, saturation, shadow construction, hover states — and corrects them using HSB color theory.…

动效文档微观层生成器——把 MOTION-SPEC.md 宏观清单 + 帧序列图 + 具体组件翻译为 LoadingScreen 风格的代码级实现 prompt（Theme tokens / 字体引用 / 组件签名 / 逐元素规格 / 父组件行为 / 时序总表）。产出喂 Agent 写 framer-motion 代码，一组件一份，住在…

Use when creating, editing, theming or building design tokens - colour ramps, type scale, spacing, radius, elevation, motion values, light/dark and multi-brand themes, DTCG JSON authoring, and…

字体系统与色彩系统的具体建法：比例字号阶梯、流体字号、字体配对、中英混排、负字距与行高规则、中性色阶与单一强调色、表面层级代替边框、阴影配方、对比度。当页面看起来「平」「灰」「闷」「没有重点」，或需要建立设计令牌/design tokens 时使用。

Book cover design with genre-specific conventions, typography rules, and AI image generation. Covers fiction and non-fiction genres, sizing, thumbnail testing, and iteration workflows. Use for:…

Creates the visuals for a LinkedIn profile or Page (profile photo, personal banner, company logo, company cover) at LinkedIn's official dimensions. Use when the user wants a "LinkedIn profile photo",…

A measurable control surface that dictates concrete design decisions using tunable 1-10 metrics.

Unifies mismatched icons into one consistent system in the brand style, matching weight, fill, corner, and color.

Extract, create, or refine an implementation-ready design system for a website or web app. Use when an agent needs semantic tokens, component anatomy, variants, interaction states, responsive rules,…

Kami Parchment Document (Open Design) — use only when explicitly invoked, not for general design requests

Edit or retouch an existing image with a connector - background removal, generative fill/expand, cleanup, recolor, or compositing. Use when modifying a photo or asset rather than generating from…

Use when deciding how a surface looks or moves: landing, particle/WebGL hero, scrubbed motion, drift, dashboard, admin/internal tool UI, mobile screen, deck, tokens, light/dark theme. RU: дизайн…

Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing,…

Turn mobile UX, wireframe, UI, and platform contracts into a testable interaction prototype plan, a standalone browser review runner, or an implementation handoff. Use when Codex needs navigation…

UI shell and component semantics. Use when building a product page (list, dashboard, settings, detail, agent-admin), or when the wrong template and Badge-Tag pairing is about to be coded.

Shape product object models, navigation, hierarchy, labels, and status language. Use before screen layout when users, content relationships, wayfinding, or information structure are unclear.

Bootstraps a design system for a GREENFIELD project that has none - no Figma, no tokens, no component library. Takes a brand input (primary color + optional secondary + tone tags + target framework)…