Design AI Skills

Card component design, content hierarchy within cards, card grids, and interactive card behaviors.

Create polished, self-contained HTML slide presentations — no PowerPoint or Keynote needed. Use this skill whenever the user asks for a presentation, slide deck, slides, or one-pager that will be…

Use this skill when designing pricing tables, plan pickers, tier selectors, or any conversion surface where the choice itself is the conversion event. Trigger when laying out 3-tier or 4-tier pricing,…

Créer un lead magnet pour {{COMPANY_NAME}} — guide PDF charté, outil interactif (calculateur, diagnostic), quiz, template/checklist — avec le circuit de capture complet obligatoire (page de capture →…

Experimental DryUI mobile-density fixture with preview and root-CSS guards for image-to-app layout tests. Use when testing stage 1 page classification, stage 2 runtime-safe DryUI implementation, and…

Explainer video production guide: scripting, voiceover, visuals, and assembly. Covers script formulas, pacing rules, scene planning, and multi-tool pipelines. Use for: product demos, how-it-works…

Design a social media post (X, Instagram, LinkedIn, Xiaohongshu, Stories/Reels, YouTube thumbnail or video) and export upload-ready files — use whenever the user wants something to post on social…

Handoff-first entry point that initializes a cycle from a Claude Design handoff bundle (URL, ZIP, HTML, PDF, or PPTX), skips the explore/plan stages, and routes straight to post-handoff verify. Thin…

Add expo-haptics for tactile feedback on Android (vibration motor). Use when the user says 'add haptics android', 'vibration android', 'tactile feedback android'.

Design minimal cute IP mascot marks readable at 32px.

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML…

Use when implementing animated gradients, complex CSS transitions that involve custom property values, or building a typed design token system where custom property misuse should produce visible…

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing;…

Use when a startup is approached by a prospective partner and someone has to decide should we sign this partner, at what partner tier (referral / reseller / OEM / SI-consulting / strategic alliance),…

Use when tasks involve reading, creating, or reviewing PDF files where rendering and layout matter; prefer visual checks by rendering pages (Poppler) and use Python tools such as `reportlab`,…

Create product backlog items in Why-What-Acceptance format — independent, valuable, testable items with strategic context. Use when writing structured backlog items, breaking features into work items,…

Search Experience Optimization: reads Google SERPs backwards to detect page-type mismatches, derives user stories from search intent signals, and scores pages from multiple persona perspectives.…

For creators explaining science, education, or general knowledge through tactile handmade papercraft visuals. Users provide a topic, core knowledge points, or source material and may specify audience,…

Create or integrate highly detailed 3D models with smooth silhouettes, shaped surfaces, believable bevels, and close-up geometry, then prepare suitable runtime LODs and loading. Use when a user…

Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking…

Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.

A shell for the web. Navigate URLs like directories, query pages with Unix-like commands. Activate on `websh` command, shell-style web navigation, or when treating URLs as a filesystem.

Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use…

根据目标说明生成可直接预览的单文件 HTML 网页，并落到工作区供右侧 viewer 预览。

Audits an app's App Store and Google Play listing against three competitors (title, subtitle, description opening, first screenshots and captions, rating, review themes) and writes a field-by-field…

Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend…

Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability)…

Compare screenshots against the intended design, distinguishing approved references from historical baselines. Use for iterative implementation matching, before/after visual review, objective image…

Understands, edits, and generates Unity uGUI Canvas hierarchies, RectTransforms, Layout Groups, and prefab UI. Use for requests involving Canvas, uGUI, RectTransform, or prefab UI files.

Walk the user through four directional axes (tone register, aesthetic philosophy, audience relationship, sensory ambition) and produce a structured aesthetic brief that downstream content, copy,…

数字生命卡兹克（前UI/交互设计师→AI自媒体人→虚实传媒CEO→AIFUT大会发起人）的AI科技自媒体创作思维——平实直接、数据碾压、自嘲幽默、硬核输出。 触发词：「数字生命卡兹克视角」「像卡兹克那样写」「AI产品实测」「AI工具测评」「干货AI教程」。 擅长：AI产品实测与横评、AIGC创作实验、AI行业大会策展、Slogan式干货输出、数据粉碎型文案、一人对抗内容平台的全栈内容生产。

Framework for rolling out organizational changes without chaos, using ADKAR adapted for startups. Use when announcing a reorg, switching tools, pivoting strategy, killing a product, or managing change…

Design game experience, systems, and levels. Converge the chosen concept into one GAME_DESIGN defining the player promise, core loop, how the world responds, the systems actually needed, level pacing,…

Configure and author rgthree-comfy nodes — Fast Groups Bypasser/Muter (group toggles), Power Lora Loader, Context/Context Big, Seed, Any Switch. Use when a workflow contains rgthree nodes, when asked…

Use when a new Godot system or feature has open design decisions — interrogates them in batched rounds, scope first, each question with a recommended answer, and records the answers before any design…

Transform ordinary snapshots—including daily moments, portraits, objects, pets, food, interiors, streets, architecture, landscapes, travel, and humanistic scenes—into the restrained Shijing Paper Zine…

Tactical DDD — aggregate design rules, entities, value objects, domain events, repositories, domain services, and anti-pattern detection

Build platform-independent design systems and consistent component libraries. Triggers: design system, component library, design tokens default: bkit:pipeline-guide frontend: bkit:frontend-architect

Validates defensive controls with paired authorized action and observation evidence, distinguishing blocked, prevented, detected, responded, and telemetry-gap outcomes. Use for purple-team validation…

DESIGN.md 변경분을 CLAUDE.md / AGENTS.md / .cursor/rules/omd-design.mdc shim 3종에 전파. 'shim 갱신', 'drift 확인', 'ship', 'publish', 「shimを更新」, 「同步 CLAUDE.md」류의 요청에 트리거. DESIGN.md가 수정됐는데 shim이 오래됐을 때 자동 감지해…

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct…

文档开发子类型规范 — 技术文档/API文档/README 编写规范

Make a cinematic 3D title sequence (8-15 seconds) in code with Claude Code and Three.js. A camera moves through a lit scene, such as a rainy street at night with brand names as neon signs, then a big…

Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur…

Creates print-ready HTML that exports to PDF. Use to make a proposal, report, one-pager, newsletter, slides, or flyer.

Turn any video into a cinematic scroll-driven landing page — Apple-style hero where scrolling progresses the visible frame through the video. Use when the user provides a video file and asks for "a…

Structure/sequence file preparation with VenusFactory file tools. Use for FASTA parsing, PDB chain extraction, PDB↔mmCIF conversion (MAXIT), apo checks, batch PDB→FASTA, and UniProt ID from RCSB…

Maxim Brand Intelligence — brand identity, voice architecture, visual identity systems, messaging frameworks, brand consistency enforcement. Activate for brand strategy, brand audits, brand…

仅在用户明确要求操作宜搭原生数据卡片资源时使用，支持创建、读取、配置保存、发布及投放播报。自定义页面展示卡片、仅修改原生卡片引用外层及泛称卡片、指标卡、看板或播报不触发；已明确的原生卡片操作可继续沿用。

Audit how design tokens are defined: tiers, naming, alias chains, raw values, orphans, DTCG readiness. Triggers: audit my tokens, token architecture review, token health check. Not for code consuming…