Design
UI/UX direction, visual design, and design systems
codebase-visualizer
by kbrdn1
Transforme un dépôt en carte d'architecture isométrique interactive (HTML autonome, thème Claude Dark), publiée en artifact — blocs dimensionnés aux vraies LOC, arêtes dérivées du graphe d'imports mesuré, points de données animés, drill-down "go inside", trace pas-à-pas, mode diff entre deux révisions, plus un dossier technique mesuré (couches, cycles de dépendances, hubs, manifestes, chaîne d'outils, CI, binaires appelés). Déclencheurs — "visualise ce codebase", "carte isométrique du repo", "atlas du codebase", "diagramme visuel de l'architecture", "codebase atlas", /me:codebase-visualizer. Sert aussi à mettre à jour ou étendre une carte existante. Pas pour un schéma de mécanisme isolé dans une réponse en prose (SVG inline), pas pour du Mermaid, pas pour une maquette d'UI produit.
xxd-panel-066
by nevertoday
"Create XXD Panel 066 raster artwork from one image or a directory batch while treating the bundled original style brief as the sole aesthetic authority. Supports one or more top-bottom, left-right, design-only, and four-device wallpaper outputs; multiple ratios or exact sizes; prompt-generated, user-exact, or text-free typography; and inline parameters. Use when the user invokes xxd-panel-066 or requests the exact Panel 066 style."
product-onboarding-activation
by realjaymes
"Designs complete onboarding, activation, retention, and expansion lifecycles for SaaS products. Use when the user mentions 'onboarding lifecycle,' 'activation strategy,' 'user onboarding,' 'time to value,' 'aha moment,' 'onboarding audit,' 'retention lifecycle,' or 'lifecycle design.'"
shape
by educlopez
"Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still ambiguous. Invoke when the user asks for shape on their UI, or mentions 'shape' alongside design / UI / frontend work."
learn-crossover
by Li-Evan
当用户学习或接触一个新概念/新技术/新算法/新领域时使用（尤其感到陌生或有点难时）。用「跨界原则」拿用户已掌握的知识快速撬动新知识——指出他其实已经学过的同一个东西（换了名字）、结构同构的旧知识、能解释新知识的已有知识，并点出新概念体现的跨领域元知识模式。让「学新东西」变成「发现你已经会了一半」。触发场景：学 X、接触 X、这个好难、X 是什么、帮我理解 X。
iarcania-design
by HatachiElGuapo
Use this skill to generate well-branded interfaces and assets for IArcanIA, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
careerchief-design
by Satsuma-Ventures
Use this skill to generate well-branded interfaces and assets for CareerChief, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
inhalt-zu-karussell
by bybaochaule
Verwende diesen Skill, um beliebige Inhalte, Quellen, Notizen oder Themen in strukturierte Social-Media-Karussells zu verwandeln, ohne Design-Tools zu bedienen. Auslösen, wenn der Nutzer aus einem Text, Artikel, Link-Inhalt, Podcast, Video, Thema, Stichpunkten oder einer Idee ein Karussell, Carousel, LinkedIn-Karussell, Instagram-Karussell, Folie-für-Folie-Skript, Karussell-Briefing oder eine Post-Serie erstellen möchte. Nicht verwenden für fertige grafische Gestaltung in Canva, Figma, PowerPoint oder Bildbearbeitung; dieser Skill liefert Text, Struktur, Layout-Hinweise und Exportformate.
Mr.FOX Coding Standards (Web)
by natcharinee
```
gamified-app
by nexu-io
A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".
design-system-ba-ptbd-redesign
by ViktoriaDencheva
Creates implementation-ready design-system guidance derived from local Figma styles in "BA-PTBD-REDESIGN".
figma-prototype-plan
by mohitagw15856
"Plan prototype interactions and flows for user testing in Figma. Use when asked to plan a Figma prototype, set up prototype interactions, define what to prototype for a user test, or prepare a Figma prototype for usability testing. Produces a prototype scope, interaction specification, test task scripts, and Figma setup guide."
spec-vibe-coding
by CheneyNine
"Structured software design before coding. Use when the user wants to build a new project, app, or feature from scratch — including 'I want to build...', 'spec vibe', 'help me plan this project', 'I need a PRD', or any new coding project request. Also triggers when the user jumps straight to 'write me an app that does X' — redirect them to design first."
ThumbGate Brand Voice
by IgorGanapolsky
Make any ThumbGate-facing copy — landing/pricing/compare/guide pages, README, postinstall banners, CLI receipts, Reddit/LinkedIn/Bluesky/Threads posts, docs, outreach drafts, blog/launch content — sound like ThumbGate: direct, technical, honest, anti-hype. Use BEFORE writing or editing customer-facing or marketing text, and when the user says "write a landing page", "draft a Reddit/LinkedIn post", "write the README", "make this on-brand", "punch up this copy", or "review this copy for voice". Do NOT use for code comments, commit messages, internal notes, or non-ThumbGate copy — and never to add fabricated traction or unsupported claims (honesty is the brand).
stitch-wireframe-generator
by Tendonofachillespressrun112
AI-Powered Wireframe Generation via Google Stitch. Reads software description docs → plans all screens → crafts high-quality prompts → generates wireframes via Stitch MCP or direct API script. Supports interactive and batch modes.
agent-browser
by vercel-labs
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
aholiab-ui
by christopheraaronhogg
Provides expert UI/visual design analysis, aesthetic evaluation, and AI slop detection. Use this skill when the user needs visual design audit, typography assessment, or design system review. Triggers include requests for UI review, design audit, or when asked to evaluate visual quality and detect generic AI-generated design patterns. Produces detailed consultant-style reports with findings and prioritized recommendations — does NOT write implementation code.
site-art-direction
by Ianbrogan2
Art direction and anti-"AI-slop" design law for building ianbrogan.com (Ian Brogan's personal site). Use this skill whenever designing, building, styling, or refining ANY page, section, component, or visual element of this website. It enforces a distinctive "Markets & Vineyards" editorial aesthetic, photographic vineyard realism, the use of the owner's real photos, reference-matching, and a hard ban on generic AI defaults.
code-style-typescript
by Perdolique
TypeScript code style guide and formatting conventions. Use when writing TypeScript code, reviewing TypeScript files, refactoring .ts code, formatting TypeScript, or when working with TypeScript interfaces, classes, functions, or any .ts files. Apply these rules during code generation, code review, and when user mentions TypeScript style, formatting, conventions, semicolons, or code quality.
Design System Guardian
by anorbert-cmyk
Enforcer of consistency, accessibility, and scalability for UI components and tokens.
go-to-market-playbook
by Gingiris-1031
A reusable Go-to-Market strategy template for both B2B and B2C launches. Covers positioning, messaging, ICP definition, channel selection, and competitive analysis frameworks. By @WeiYipei.
flowai-live-dashboard-template
by nexu-io
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.
pptx
by manup-bhat
"Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill."
PPT Cognitive Design Skill
by sfyqiu
NOT decoration.