「先出设计方案再写代码」Prompt(@Voxyz_ai)
受众/目标 → 4–6 个色 token → 字体 → ASCII 线框 → 1 个标志元素;完成后桌面 + 手机截图对照 DESIGN.md
Sourcex.com/i/status/2087178102505926740
Agent Academy is a free, source-linked library of skills, prompts, MCP servers and bot templates, organised into courses by profession, for people who hand real work to AI agents: 1,467 live resources, each with its original link, license and safety tags.
Course · Design
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.
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.
Read course.md: the job, the permissions it needs, and what good output looks like.
受众/目标 → 4–6 个色 token → 字体 → ASCII 线框 → 1 个标志元素;完成后桌面 + 手机截图对照 DESIGN.md
Sourcex.com/i/status/2087178102505926740
动效控制在 300ms 内;约三分之一 Skills 有安全问题,装前先读 SKILL.md
Sourcex.com/i/status/2077328569219604814
产品上下文 → Mobbin + Paper / Claude Code 原型 → Figma 组件进 Storybook → Agent 审查
Sourcex.com/i/status/2088261777758851497
8 点栅格间距体系的经典讲解
Sourcespec.fm/specifics/8-pt-grid
每周 AI × 设计动态:Figma MCP、Codex ↔ Figma、设计系统 Skills
Sourcejasoncyr.substack.com/p/ai-design-weekly-issue-005
约束不够就趋同;用随机数打破、给参考图、首尾帧生视频做 Landing
Sourcex.com/i/status/2095715594368860421
Airbnb DLS 不公开;主导者亲自讲怎么搭跨端组件体系
Sourcekarrisaarinen.com/dls
Emil 的网页动效系统课(付费)
Sourceanimations.dev
原子、分子、组织的组件分层方法论
Sourceatomicdesign.bradfrost.com
直出 HTML 原型 vs 操作 Figma 文件;不是设计师优先选 Claude Design
Sourcex.com/i/status/2102509523684479377
中文整理:大多数人一开始就用错了 Claude Design
Sourcex.com/i/status/2104441471948496967
给设计师 / PM 讲清 React、Next、TS、Prisma 各管什么
Sourcex.com/i/status/2094659988971261998
4 周:Claude Code + Figma MCP + Supabase + Vercel
Sourcedesignlab.com/advanced/vibe-coding-course
apple-design、animate、review-animations 各干什么,什么时候不该加动画
Sourcex.com/i/status/2101578929786228924
Sonner、Vaul 作者写的 UI 动效手感要点
Sourceemilkowal.ski/ui/7-practical-animation-tips
在 Figma 里落地 token 和模式(明暗、品牌)
Sourcehelp.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma
Choose one style, platform or channel from the reference library. Only one.
minimal 316motion 60enterprise 37dark-tech 27editorial 253d 21gradient 18playful 17soft 15swiss 13apple 12material 11skeuomorphic 8utilitarian 7brutalist 6glass 5fluent 3retro 2industrial 1neumorphism 1
Apple's platform design guidance: foundations, patterns, components, inputs, technologies.
Sourcedeveloper.apple.com/design/human-interface-guidelines
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
A design productivity plugin primarily designed for Cowork, Anthropic's agentic desktop application — though it also works in Claude Code. Helps with design critique, system management, UX writing, accessibility, research synthesis, and developer handoff. Works with any design team — standalone with your input, supercharged when you connect Figma and other tools.
Sourcegithub.com/anthropics/knowledge-work-plugins/tree/main/design
A design partner that works inside Figma, not around it
Sourcebotsdots.site/templates/figma-bro
Visual/UX designer for idle/incremental games. Owns drones look, landscape/background, VFX, UI polish, and readable hierarchy while protecting
Sourcebotsdots.site/templates/idle-tees-designer
Generates a track from your lyrics, syncs every line to the beat, and renders kinetic-typography visuals into a draft music video
Sourcebotsdots.site/templates/music-video
Send a photo of a room to clean out or redecorate and get a concept after mockup plus easy step-by-step instructions
Sourcebotsdots.site/templates/spruce
Builds 3-panel X photomosaics in Figma from a reference post plus background and hero assets. On-demand design ops — drop a post and get export-ready panels
Sourcebotsdots.site/templates/photomosaic
社区组件市场
Source21st.dev
248 个以上社区组件
Source21st.dev/community/components/s/ai-chat
专收 404 页面
Source404s.design
Pixel-art 8-bit take on shadcn components for games and retro sites.
Source8bitcn.com
真实 A/B 测试前后对比,学「哪个版本赢了」
Sourceabtest.design
智能体设计模式
Sourceagentic-design.ai
Vercel 官方 AI 组件
Sourceai-sdk.dev/elements
AI 智能体聊天组件(@tranmautritam)
Sourceaicss.dev
200 多个海外 AI 产品交互案例
Sourceaiverse.design
Angular 官方 Material 组件
Sourcematerial.angular.dev
蚂蚁中后台组件库,60+ 组件,表格表单极强
Sourceant.design
蚂蚁移动端组件库
Sourcemobile.ant.design
专门做 AI 界面
Sourcex.ant.design
蚂蚁可视化语法,几十种图表
Sourceg2.antv.antgroup.com
Read the required skills, prompts and standards in order.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Sourcegithub.com/anthropics/skills/blob/main/skills/algorithmic-art/SKILL.md
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Sourcegithub.com/anthropics/skills/blob/main/skills/canvas-design/SKILL.md
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon,…
Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/banner-design/SKILL.md
Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the…
Sourcegithub.com/emilkowalski/skills/blob/main/skills/mobile-native/SKILL.md
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/mobile-android-design/SKILL.md
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/mobile-ios-design/SKILL.md
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
Sourcegithub.com/wshobson/agents/blob/main/plugins/ui-design/skills/responsive-design/SKILL.md
A prompt to kick start a web design project. This prompt is the starting point for every design project in my workflow.
Sourceprompts.chat/prompts/cmmnb9dxg0001l8047jcrujr5_kickstart-prompt-for-web-ux-ui-design
Transform your weekly Excel data into a sleek, readable, and aesthetically pleasing Figma presentation format.
Sourceprompts.chat/prompts/cmjrggy0h0001jx04fiyxm5yj_excel-data-to-figma-presentation-designer
Generate a comprehensive, actionable development plan to enhance the existing web application.
Sourceprompts.chat/prompts/cmmk64mqt000hjv04p6gpiiti_make-uiux-better-of-an-already-created-application
Act as a UI Designer to create intuitive and visually appealing user interfaces.
Sourceprompts.chat/prompts/cmjffc2my0001js04kskcgjiw_ui-designer-role
I want you to act as a UX/UI developer. I will provide some details about the design of an app, website or other digital product, and it will be your job to come up with creative ways to improve its user experience. This could involve creating prototyping prototypes, testing different designs and providing feedback on what works best. My first request is "I need help designing an intuitive navigat
Sourceprompts.chat/prompts/cmj1zb14o003pvl0resywfieo_uxui-developer
I want you to act as a web design consultant. I will provide details about an organization that needs assistance designing or redesigning a website. Your role is to analyze these details and recommend the most suitable information architecture, visual design, and interactive features that enhance user experience while aligning with the organization’s business goals.
Sourceprompts.chat/prompts/cmj26y5ci0001u80rkksgnrdm_web-design
change home page desgin which contain header bar,tags,blog cards and docs card , give better ui design
Sourceprompts.chat/prompts/cmm51bp2p0001jp046bwjorxw_change-home-page-design-for-blog-and-documentation-platform
Generate a comprehensive, actionable development plan for building a responsive web application.
Sourceprompts.chat/prompts/cmmk5uygc0001jv04g4yuguhi_generate-a-plan-for-building-the-best-uiux
I'm looking for a talented designer to create a rustic-style farm logo for my brand. R Lucky Star Farm
Sourceprompts.chat/prompts/cmug1en4j0001i904qunedjs2_rustic-farm-logo-design
Tistory Poster 스킨 기반 블로그의 UI/UX를 프로페셔널 수준으로 개선하는 구조화된 프롬프트. inpa.tistory.com 레퍼런스 기반.
Sourceprompts.chat/prompts/cmmlkcl380005l604a6fmy1h3_tistory-blog-skin-uiux-enhancement-pipeline
I want you to act as a web design consultant. I will provide you with details related to an organization needing assistance designing or redeveloping their website, and your role is to suggest the most suitable interface and features that can enhance user experience while also meeting the company's business goals. You should use your knowledge of UX/UI design principles, coding languages, website
Sourceprompts.chat/prompts/cmj1zb17l005avl0rn2t38f1q_web-design-consultant
Follow a workflow or case. Install a skill or MCP server only if you have permission.
How this site was designed by an agentWorkflow: pick ONE direction skill (frontend-design or taste-skill) → search resources by style/kind → build with emil-design-eng → audit with impeccable + web-design-guidelines + accessibility → verify in browser light+dark, mobile.
Sourcesiinxu.github.io/ui-resource-hub/api/skills.json
A Streamlit application that provides comprehensive design analysis using a team of specialized AI agents powered by Google's Gemini model.
Sourcegithub.com/Shubhamsaboo/awesome-llm-apps/tree/main/advanced_ai_agents/multi_agent_apps/agent_teams/multimodal_design_agent_team
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Sourcegithub.com/GLips/Figma-Context-MCP
The Figma MCP server brings Figma design context directly into your AI workflow.
Sourcegithub.com/figma/mcp-server-guide
Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back
Sourcegithub.com/TranHoaiHung/figma-ui-mcp
Search Keyline Icons by name and get any icon's SVG source or React import. No key, no network.
Sourcegithub.com/keyline-icons/keyline-icons
AI-powered design and management for Webflow Sites
Sourcegithub.com/webflow/mcp-server
Drive Adobe Illustrator from any MCP client: artwork, type, colour, effects, data and export.
Sourcegithub.com/zachshallbetter/adobe-mcp
Programmatically read, create, and modify Figma designs via MCP.
Sourcegithub.com/neozhehan/figma-edit-mcp
A local MCP server with full Figma REST API coverage.
Sourcegithub.com/planetabhi/figma-mcp-server
Let agents manage your Figma workspace. 102 tools for seats, teams, offboarding, and cleanup.
Sourcegithub.com/dannykeane/figmanage
LLM-optimized Figma MCP server.
Sourcegithub.com/felixAnhalt/figma-to-code-mcp
Model Context Protocol server for Excalidraw diagrams.
Sourcegithub.com/cmd8/excalidraw-mcp
Security-hardened Excalidraw MCP server with auth, rate limiting, and 14 tools
Sourcegithub.com/debu-sinha/excalidraw-mcp-server
MCP server enabling AI assistants to interact with Figma designs via natural language commands
Sourcegithub.com/oabolade/figma_mcp_server_actor
Figma designs pulled once into a local vault; AI agents read them offline with no rate limits
Sourcegithub.com/NBhey/figma-vault
Figma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam.
Sourcegithub.com/compassalessandrolorenz/Figma-Context-MCP-AIR
在 Cursor 里调用 1 万+ React / Tailwind 组件(21st 的 MCP)
Sourcegithub.com/21st-dev/magic-mcp
免费 3D 图标
Source3dicons.co
按对比度生成无障碍色阶,Adobe 开源
Sourceleonardocolor.io
在界面上直接标注问题,生成说明给编程 Agent(@tranmautritam)
Sourceagentation.com
Search and fetch SVG icons from 250,000+ icons across 200+ open-source icon sets.
Sourceallsvgicons.com/mcp
Andorra public data: BOPA bulletin, statistics, maps, e-tramits procedures and govern.ad pages
Sourcegithub.com/joalavedra/andorra-fonts-publiques
对话生成应用,可在线改代码
Sourcebolt.cello.so/ByQ3siiRkMz
Go through the checklist and report the result to your owner.
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
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
Web Content Accessibility Guidelines 2.2: testable success criteria for accessible web content.
Sourcew3.org/TR/WCAG22
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
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
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
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
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
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
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
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
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
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
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
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
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