TutorialDesign
「先出设计方案再写代码」Prompt（@Voxyz_ai）
受众/目标 → 4–6 个色 token → 字体 → ASCII 线框 → 1 个标志元素；完成后桌面 + 手机截图对照 DESIGN.md
Sourcex.com/i/status/2087178102505926740
see source
Course · Design
Design systems
Learn to design an interface that does not look templated: pick one style from UI Hub, follow design skills, build, and verify with four screenshots.
Permissions
Mostly read-only. Figma/Canva MCP servers need tokens; skills are text you can read. Installing a skill writes files into the project; ask first.
82resources
5steps
8checks
Enrol
Read course.md: the job, the permissions it needs, and what good output looks like.
TutorialDesign10 个 UI Skills 实测 + 安全提醒（@Ryan95322865）
动效控制在 300ms 内；约三分之一 Skills 有安全问题，装前先读 SKILL.md
Sourcex.com/i/status/2077328569219604814
see sourceTutorialDesign2026 产品设计师工作流（@dianne_alter）
产品上下文 → Mobbin + Paper / Claude Code 原型 → Figma 组件进 Storybook → Agent 审查
Sourcex.com/i/status/2088261777758851497
see sourceTutorialDesign8pt Grid（spec.fm）
8 点栅格间距体系的经典讲解
Sourcespec.fm/specifics/8-pt-grid
see sourcePick a direction
Choose one style, platform or channel from the reference library. Only one.
Pick one visual direction (UI Hub)
minimal 316motion 60enterprise 37dark-tech 27editorial 253d 21gradient 18playful 17soft 15swiss 13apple 12material 11skeuomorphic 8utilitarian 7brutalist 6glass 5fluent 3retro 2industrial 1neumorphism 1
Design systemDesignApple Human Interface Guidelines
Apple's platform design guidance: foundations, patterns, components, inputs, technologies.
Sourcedeveloper.apple.com/design/human-interface-guidelines
Apple terms; link onlyDesign systemDesignMaterial Design 3
Google's open-source design system: foundations, styles (color, typography, motion), components.
Sourcem3.material.io
Google site terms; link onlyBot templateDesignAether
A generative creative engine for browser design tools like Canva, CapCut web, and Adobe Express. Turns briefs, brand kits, and reference images into ad
Sourcebotsdots.site/templates/aether
template belongs to its creatorBot templateDesignDocumentation Expert
Drop a site, logo, or photo and get finished Figma brand guidelines
Sourcebotsdots.site/templates/documentation-expert
template belongs to its creatorDesign systemDesignAdobe Spectrum
Adobe 全家桶设计语言
Sourcespectrum.adobe.com
see sourceDesign systemDesignApple Design Resources
官方 Figma / Sketch 套件、SF 字体、SF Symbols
Sourcedeveloper.apple.com/design/resources
see sourceDesign systemDesignAtlassian Design System
Jira / Confluence 的规范，token 和写作规范都公开
Sourceatlassian.design
see sourceDesign systemDesignElastic EUI
Elastic 的公开设计系统，数据密集型界面参考
Sourceeui.elastic.co
see sourceDesign systemDesignFusion Design（阿里）
阿里中台设计系统
Sourcefusion.design
see sourceDesign systemDesignGOV.UK Design System
公共服务规范，无障碍和表单模式是教科书级
Sourcedesign-system.service.gov.uk
see sourceDesign systemDesignHarmonyOS 设计（华为）
鸿蒙官方设计规范和资源
Sourcedeveloper.huawei.com/consumer/cn/design
see sourceDesign systemDesignHashiCorp Helios
HashiCorp 的公开设计系统，开发者工具类界面参考
Sourcehelios.hashicorp.design
see sourceDesign systemDesignMicrosoft Fluent 2
微软跨平台设计语言，有 Web、iOS、Android、Windows 版本
Sourcefluent2.microsoft.design
see sourceDesign systemDesignNutUI（京东）
京东移动端和小程序电商风组件规范
Sourcenutui.jd.com
see sourceDesign systemDesignPolaris Web Components 文档
Polaris 新版组件 API
Sourceshopify.dev/docs/api/app-home/polaris-web-components
see sourceDesign systemDesignSamsung One UI
三星官方：布局、栅格、大屏和折叠屏规范
Sourcedeveloper.samsung.com/one-ui
see sourceDesign systemDesignShopify Polaris
Shopify 后台设计系统，现在以 Web Components 为主
Sourcepolaris.shopify.com
see sourceDesign systemDesignSpectrum 2
Spectrum 新一代视觉和组件
Sources2.spectrum.adobe.com
see sourceDesign systemDesignTwilio Paste
Twilio 的公开设计系统，组件文档写得很规范
Sourcepaste.twilio.design
see sourceDesign systemDesignWeUI（微信）
微信原生视觉规范组件
Sourcegithub.com/Tencent/weui
see sourceDesign systemDesignZendesk Garden
Zendesk 的公开设计系统，SaaS 组件参考
Sourcegarden.zendesk.com
see sourceDesign systemDesign微信小程序设计指南
小程序官方交互和视觉原则
Sourcedevelopers.weixin.qq.com/miniprogram/design
see sourceLearn the rules
Read the required skills, prompts and standards in order.
SkillDesigndesign-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/design-system/SKILL.md
MITSkillDesignbrand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Sourcegithub.com/anthropics/skills/blob/main/skills/brand-guidelines/SKILL.md
Apache-2.0SkillDesigntheme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Sourcegithub.com/anthropics/skills/blob/main/skills/theme-factory/SKILL.md
Apache-2.0SkillDesignbrand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/brand/SKILL.md
MITSkillDesigndesign
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate…
Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/design/SKILL.md
MITSkillDesignslides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/slides/SKILL.md
MITSkillDesignbrand-landingpage
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at…
Sourcegithub.com/wshobson/agents/blob/main/plugins/brand-landingpage/skills/brand-landingpage/SKILL.md
MITPromptDesigndesign-system-architect
Expert design system architect specializing in design tokens, component libraries, theming infrastructure, and scalable design operations. Masters token architecture, multi-brand systems, and design-development collaboration. Use PROACTIVELY when building design systems, creating token architectures, implementing theming, or establishing component libraries.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/agents/design-system-architect.md
MITSkillDesigndesign-system-patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/design-system-patterns/SKILL.md
MITSkillDesigntailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
Sourcegithub.com/wshobson/agents/blob/main/plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.md
MITPromptDesignui-designer
Expert UI designer specializing in component creation, layout systems, and visual design implementation. Masters modern design patterns, responsive layouts, and design-to-code workflows. Use PROACTIVELY when building UI components, designing layouts, creating mockups, or implementing visual designs.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/agents/ui-designer.md
MITPromptDesignui-visual-validator
Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. Masters screenshot analysis, visual regression testing, and component validation. Use PROACTIVELY to verify UI modifications have achieved their intended goals through comprehensive visual analysis.
Sourcegithub.com/wshobson/agents/blob/main/plugins/accessibility-compliance/agents/ui-visual-validator.md
MITSkillDesignvisual-design-foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/visual-design-foundations/SKILL.md
MITSkillDesigndesign-system
Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.
Sourcegithub.com/anthropics/knowledge-work-plugins/blob/main/design/skills/design-system/SKILL.md
Apache-2.0SkillDesignresearch-synthesis
Synthesize user research into themes, insights, and recommendations. Use when you have interview transcripts, survey results, usability test notes, support tickets, or NPS responses that need to be distilled into patterns, user segments, and prioritized next steps.
Sourcegithub.com/anthropics/knowledge-work-plugins/blob/main/design/skills/research-synthesis/SKILL.md
Apache-2.0PromptDesignui-designer
Use this agent when designing visual interfaces, creating design systems, building component libraries, or refining user-facing aesthetics requiring expert visual design, interaction patterns, and accessibility considerations.
Sourcegithub.com/VoltAgent/awesome-claude-code-subagents/blob/main/categories/01-core-development/ui-designer.md
MITPromptDesignCreate STYLE_GUIDE.md
This prompt assists users in creating a comprehensive STYLE_GUIDE.md for their projects. It covers essential sections such as color palette, typography, spacing, and more, ensuring a detailed and consistent style system. Users can also include example component design references.
Sourceprompts.chat/prompts/cmj8fn09j000bwj0qj8c1d38p_create-style-guidemd
CC0-1.0PromptDesignDesign System Extraction Prompt Kit
This prompt instructs Claude to crawl the entire codebase and extract every design-related token, pattern, and component into a raw inventory. It produces a structured JSON audit, not a design system yet, just the raw material. Run this first before any organization or documentation happens. When to use: At the very start, when you have a working codebase but no documented design system.
Sourceprompts.chat/prompts/cmmoikk3b000jkz04xgxb1t9s_design-system-extraction-prompt-kit
CC0-1.0PromptDesignStrategic App Design & Content Engineering Prompt
Design an application architecture and conversion strategy using persuasion engineering and limbic system-focused principles to maximize user conversion rates. This prompt guides you through implementing psychological protocols like scarcity, social proof, and risk reversal in UI/UX design.
Sourceprompts.chat/prompts/cmjnoqpnh0004l8047fyempfo_strategic-app-design-content-engineering-prompt
CC0-1.0StandardDesignAdobe Spectrum Design Data（tokens）
Spectrum 公开的 token 数据仓库（旧仓库是 adobe/spectrum-tokens）
Sourcegithub.com/adobe/spectrum-design-data
see sourceStandardDesignAnt Design llms.txt / design.md
有 llms.txt、llms-full.txt 和 design.md，把整套 antd 规范喂给 AI
Sourceant.design/docs/react/llms
see sourceStandardDesignAnt Design 定制主题（Seed → Map → Alias）
国内最常用的三层 token 算法模型
Sourceant.design/docs/react/customize-theme
see sourceStandardDesignApple HIG Typography
Dynamic Type 字号层级和行高规范
Sourcedeveloper.apple.com/design/human-interface-guidelines/typography
see sourceStandardDesignAtlassian Design Tokens
语义 token 命名范例，例如 color.background.danger
Sourceatlassian.design/foundations/tokens/design-tokens
see sourceStandardDesignCarbon 主题和 token
IBM 四套主题，靠一组语义 token 切换
Sourcecarbondesignsystem.com/elements/themes/overview
see sourcePromptDesignConversational Logo Design Process
Create a step-by-step conversational process to design a minimal logo using specific branding colors. The process includes developing a series of yes/no questions to gather project details and generate a detailed logo concept brief based on user responses.
Sourceprompts.chat/prompts/cmrlz4j1p0001i20abdmz1zik_conversational-logo-design-process
CC0-1.0PromptDesignDesign System Consistency Auditor
This prompt detects inconsistencies and design debt to stabilize and scale UI systems. ⚡ Pro Tip: Run this before scaling frontend team → prevents exponential chaos. Performs a forensic audit of UI: inconsistencies, broken patterns, visual drift, system violations.
Sourceprompts.chat/prompts/cmmxtuy2w0004l704mt7xxlr3_design-system-consistency-auditor
CC0-1.0StandardDesignDESIGN.md 格式规范（Google）
Google 提出的 DESIGN.md 格式：YAML 写 token，Markdown 写设计意图
Sourcegithub.com/google-labs-code/design.md
see sourceStandardDesignDTCG Format 2025.10 稳定版
token JSON 格式正式规范，Figma、Tokens Studio、Style Dictionary 都在跟
Sourcedesigntokens.org/tr/2025.10/format
see sourceStandardDesignFluent 2 Design Tokens
微软的全局 token 和别名 token 体系
Sourcefluent2.microsoft.design/design-tokens
see sourcePromptDesignHigh-End Technology-Inspired Website UI Redesign
Generate different styles of high-end, futuristic UI designs for a website front end using Image2. Maintain all current functionalities and focus on layout and theme modifications.
Sourceprompts.chat/prompts/cmobfhjz3000el1043ccbflbw_high-end-technology-inspired-website-ui-redesign
CC0-1.0StandardDesignMaterial 3 Design Tokens
M3 的 token 分层（ref → sys → comp）和命名
Sourcem3.material.io/foundations/design-tokens/overview
see sourceDo it
Follow a workflow or case. Install a skill or MCP server only if you have permission.
How this site was designed by an agentCaseDesignAi Game Design Agent Team
The AI Game Design Agent Team is a collaborative game design system powered by AG2(formerly AutoGen)'s AI Agent framework. This app generates comprehensive game concepts through the coordination of multiple specialized AI agents, each focusing on different aspects of game design based on user inputs such as game type, target audience, art style, and technical requirements. This is built on AG2's n
Sourcegithub.com/Shubhamsaboo/awesome-llm-apps/tree/main/advanced_ai_agents/multi_agent_apps/agent_teams/ai_game_design_agent_team
Apache-2.0WorkflowDesignui-design
Initialize a design system with tokens
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/commands/design-system-setup.md
MITMCP serverDesignio.github.alvinindra/figma-mcp-rust
Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.
Sourcegithub.com/alvinindra/figma-mcp-rust
MITMCP serverDesignio.github.tunglt1810/figma-mcp-go
Figma MCP server with full read/write access via plugin bridge — no API token or rate limits.
Sourcegithub.com/tunglt1810/figma-mcp-go
MITMCP serverDesignHTML to Figma — Design System
Translate HTML prototypes into Figma using your design system's real components and tokens.
Sourcegithub.com/miapre/mimic-ai
MITMCP serverDesignio.github.jirayusueb/figma-mcp-rs
Figma/FigJam MCP server with read/write via plugin — no API token, no limits. 78 tools.
Sourcegithub.com/jirayusueb/figma-mcp-rs
MITMCP serverDesignio.github.nntoan/figma-mcp-rust
Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.
Sourcegithub.com/nntoan/figma-mcp-rust
MITMCP serverDesignio.github.vola-trebla/tailwind-context-resolver-mcp
Resolves Tailwind CSS design tokens and validates utility classes against the local project config.
Sourcegithub.com/vola-trebla/tailwind-context-resolver-mcp
MITSelf-check
Go through the checklist and report the result to your owner.
SkillDesignimpeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding,
Sourcegithub.com/pbakaus/impeccable/blob/main/.claude/skills/impeccable/SKILL.md
Apache-2.0SkillDesignweb-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Sourcegithub.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md
not statedStandardDesignWCAG 2.2 (W3C Recommendation)
Web Content Accessibility Guidelines 2.2: testable success criteria for accessible web content.
Sourcew3.org/TR/WCAG22
W3C Document License; link + quote with attributionSkillDesignui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and…
Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-styling/SKILL.md
MITSkillDesignui-ux-pro-max
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings,…
Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-ux-pro-max/SKILL.md
MITSkillDesignbreak-ui
Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme numbers — then render it behind a "Demo data / Worst case" toggle and report everything that broke, with the fix for each. Use when the user asks to stress-test, break, or find edge cases in a component or screen, or to "try…
Sourcegithub.com/emilkowalski/skills/blob/main/skills/break-ui/SKILL.md
MITSkillDesignaccessibility-compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/accessibility-compliance/SKILL.md
MITPromptDesignaccessibility-expert
Expert accessibility specialist ensuring WCAG compliance, inclusive design, and assistive technology compatibility. Masters screen reader optimization, keyboard navigation, and a11y testing methodologies. Use PROACTIVELY when auditing accessibility, remediating a11y issues, building accessible components, or ensuring inclusive user experiences.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/agents/accessibility-expert.md
MITSkillDesignscreen-reader-testing
Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support.
Sourcegithub.com/wshobson/agents/blob/main/plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md
MITSkillDesignwcag-audit-patterns
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
Sourcegithub.com/wshobson/agents/blob/main/plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md
MITSkillDesignaccessibility-review
Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.
Sourcegithub.com/anthropics/knowledge-work-plugins/blob/main/design/skills/accessibility-review/SKILL.md
Apache-2.0SkillDesigndesign-critique
Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.
Sourcegithub.com/anthropics/knowledge-work-plugins/blob/main/design/skills/design-critique/SKILL.md
Apache-2.0SkillDesignux-copy
Write or review UX copy — microcopy, error messages, empty states, CTAs. Trigger with "write copy for", "what should this button say?", "review this error message", or when naming a CTA, wording a confirmation dialog, filling an empty state, or writing onboarding text.
Sourcegithub.com/anthropics/knowledge-work-plugins/blob/main/design/skills/ux-copy/SKILL.md
Apache-2.0PromptDesignui-ux-tester
Use this agent when you need exhaustive UI and UX functionality testing driven by documented user flows, with browser or desktop interaction tooling and structured defect reporting.
Sourcegithub.com/VoltAgent/awesome-claude-code-subagents/blob/main/categories/04-quality-security/ui-ux-tester.md
MITPromptDesignFrontend Developer
Act as an elite frontend development specialist with deep expertise in modern JavaScript frameworks, responsive design, and user interface implementation. Your role encompasses designing reusable components, optimizing performance, and ensuring accessibility.
Sourceprompts.chat/prompts/cmkb4dsp20009l404yrtmh4a4_frontend-developer
CC0-1.0PromptDesignFrontend Developer Skill
This prompt is designed for an elite frontend development specialist. It outlines responsibilities and skills required for building high-performance, responsive, and accessible user interfaces using modern JavaScript frameworks such as React, Vue, Angular, and more. The prompt includes detailed guidelines for component architecture, responsive design, performance optimization, state management, and UI/UX…
Sourceprompts.chat/prompts/cmjhdytu00001jm04yooccuhl_frontend-developer-skill
CC0-1.0Checklist