TutorialDesign
「先出设计方案再写代码」Prompt（@Voxyz_ai）
受众/目标 → 4–6 个色 token → 字体 → ASCII 线框 → 1 个标志元素；完成后桌面 + 手机截图对照 DESIGN.md
Sourcex.com/i/status/2087178102505926740
see source
Course · Design
Design engineer
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.
68resources
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
Bot templateDesignFramecraft
Builds and cleans Figma frames for product designers: library components, CSS-style autolayout, pixel-accurate spacing from inspected properties. Keeps
Sourcebotsdots.site/templates/framecraft
template belongs to its creatorDesign 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 onlyStyle libraryDesignUI Hub (Incidental AI UI resource hub) — llms.txt / api
Curated multilingual directory of ~2,391 public UI resources with visual-style (vs) facets, design KB (specs, skills), JSON endpoints and a recommended design-skill workflow.
Sourcesiinxu.github.io/ui-resource-hub/llms.txt
aggregator; per-item licenseLearn the rules
Read the required skills, prompts and standards in order.
SkillDesignfrontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Sourcegithub.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Apache-2.0SkillDesignweb-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Sourcegithub.com/anthropics/skills/blob/main/skills/web-artifacts-builder/SKILL.md
Apache-2.0SkillDesignbrandkit
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups,…
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/brandkit/SKILL.md
MITSkillDesigndesign-taste-frontend
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you…
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
MITSkillDesigndesign-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2), which is a new skill. Use this v1 install name only if you need exact backward compatibility.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill-v1/SKILL.md
MITSkillDesigndesign-taste-frontend-v2-experimental
Old v2 (experimental) of taste-skill, the single-file dial-driven version, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2). Use this install name only if you need the earlier behavior. Anti-slop frontend rules for landing pages, portfolios, and redesigns, with real design systems when applicable, audit-first redesigns and a strict pre-flight check.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill-v2-experimental/SKILL.md
MITSkillDesignfull-output-enforcement
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/output-skill/SKILL.md
MITSkillDesigngpt-taste
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/gpt-tasteskill/SKILL.md
MITSkillDesignhigh-end-visual-design
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/soft-skill/SKILL.md
MITSkillDesignimage-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid…
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/image-to-code-skill/SKILL.md
MITSkillDesignimagegen-frontend-mobile
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, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By…
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-mobile/SKILL.md
MITSkillDesignimagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant /…
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
MITSkillDesignindustrial-brutalist-ui
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 dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/brutalist-skill/SKILL.md
MITSkillDesignminimalist-ui
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/minimalist-skill/SKILL.md
MITSkillDesignredesign-existing-projects
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md
MITSkillDesignstitch-design-taste
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
Sourcegithub.com/Leonxlnx/taste-skill/blob/main/skills/stitch-skill/SKILL.md
MITSkillDesignpick-ui-library
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
Sourcegithub.com/emilkowalski/skills/blob/main/skills/pick-ui-library/SKILL.md
MITSkillDesignprototype
Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.
Sourcegithub.com/emilkowalski/skills/blob/main/skills/prototype/SKILL.md
MITSkillDesignnextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
Sourcegithub.com/wshobson/agents/blob/main/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md
MITSkillDesignreact-native-architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
Sourcegithub.com/wshobson/agents/blob/main/plugins/frontend-mobile-development/skills/react-native-architecture/SKILL.md
MITSkillDesignreact-state-management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
Sourcegithub.com/wshobson/agents/blob/main/plugins/frontend-mobile-development/skills/react-state-management/SKILL.md
MITSkillDesignweb-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/web-component-design/SKILL.md
MITSkillDesigndesign-handoff
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.
Sourcegithub.com/anthropics/knowledge-work-plugins/blob/main/design/skills/design-handoff/SKILL.md
Apache-2.0PromptDesigndesign-bridge
Use this agent when you need to translate a DESIGN.md from the VoltAgent/awesome-design-md repository into polished Claude Code instructions for building user interfaces that faithfully match the chosen brand. Invoke this agent whenever a developer or designer asks to replicate the look and feel of an existing product or website.
Sourcegithub.com/VoltAgent/awesome-claude-code-subagents/blob/main/categories/01-core-development/design-bridge.md
MITSkillDesign0xdesign/design-lab
设计探索流程：访谈、出多个方案、按反馈迭代
Sourceui-skills.com/skills/0xdesign/design-lab
see sourceSkillDesignaccessibility（Addy Osmani）
无障碍设计
Sourceui-skills.com/skills/addyosmani/accessibility
see sourceSkillDesignadapt（Paul Bakaus）
响应式适配
Sourceui-skills.com/skills/pbakaus/adapt
see sourceSkillDesignaddyosmani/agent-skills
Addy Osmani 的工程 Skill 集，含前端性能和质量类
Sourcegithub.com/addyosmani/agent-skills
see sourceSkillDesignAnt Design for Agents（MCP + Skill）
蚂蚁官方：antd mcp、antd setup --client cursor/claude/codex，一条命令装好 MCP 和 Skill
Sourceant-design.antgroup.com/docs/react/for-agents
see sourceSkillDesignanthropics/canvas-design
Anthropic 官方，生成海报和视觉设计
Sourceui-skills.com/skills/anthropics/canvas-design
see sourceSkillDesignanti-slop
反 AI slop 设计 Skill
Sourcegithub.com/miqdadbadjuber/anti-slop
see sourceSkillDesignapple-design（Emil Kowalski）
苹果风格设计
Sourceui-skills.com/skills/emilkowalski/apple-design
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 agentWorkflowDesignui-design
Guided component creation with proper patterns
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/commands/create-component.md
MITMCP serverDesignFigma MCP Server
The Figma MCP server brings Figma design context directly into your AI workflow.
Sourcegithub.com/figma/mcp-server-guide
not statedMCP serverDesignStorybook MCP Addon
Help agents automatically write and test stories for your UI components.
Sourcegithub.com/storybookjs/mcp
MITMCP serverDesignExcalidraw Architect
Generate beautiful Excalidraw architecture diagrams with auto-layout and component styling
Sourcegithub.com/BV-Venky/excalidraw-architect-mcp
MITMCP serverDesignTailwind Shades
Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults
Sourcegithub.com/bourhaouta/vscode-tailwindshades
MITMCP serverDesignio.github.sunhome243/figma-mcp-express
Compact Figma MCP with validated batch ops through a local plugin bridge.
Sourcegithub.com/sunhome243/figma-mcp-express
MITMCP serverDesignio.github.felixAnhalt/Figma-Context-MCP
LLM-optimized Figma MCP server.
Sourcegithub.com/felixAnhalt/figma-to-code-mcp
MITMCP serverDesignio.github.kolganovr/figma-mcp-bridge
Write to a live Figma canvas, get a screenshot back, and roll back mistakes. Zero deps, free plan.
Sourcegithub.com/kolganovr/figma-mcp-bridge
MITMCP serverDesignfigma-mcp
Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.
Sourcegithub.com/Mehmoodqureshi/figma-mcp
MITMCP serverDesignio.github.jmshinhwa/tailwind-v4-upgrade-blocker-lint
19 rules that find the Tailwind v3 syntax Tailwind v4 removed or silently redefined, in the file you
Sourcegithub.com/jmshinhwa/readystack-themes
proprietaryMCP serverDesignDraw40
Draw40 is an independent diagram workspace with an interactive MCP Apps canvas. OAuth sign-in.
Sourcedraw.404040.net
not statedMCP serverDesignTailwind App
Tailwind MCP server — list Pinterest accounts and create, schedule, and manage Pinterest posts.
Sourceapi-docs.tailwind.ai/mcp
not statedSelf-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