elegant-design by rand/cc-polymath
npx skills add https://github.com/rand/cc-polymath --skill elegant-design世界级的设计是深思熟虑的、易于访问且令人愉悦的。每个元素都有其目的,每次交互都感觉自然,体验能在不同情境下优雅地适应。
核心原则:
在以下情况使用此技能:
遵循此工作流以获得最佳结果:
绘制用户体验图:
# 使用 Graphviz 创建流程图
cat > user-flow.dot << 'EOF'
digraph UserFlow {
Start -> "Observe State"
"Observe State" -> "Orient Understanding"
"Orient Understanding" -> "Decide Action"
"Decide Action" -> "Act Execute"
"Act Execute" -> "Observe State" [label="OODA loop"]
}
EOF
dot -Tpng user-flow.dot -o user-flow.png
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
OODA 循环映射: 针对每个主要的用户目标,优化以下循环:
记录状态:
列出可供性: 识别所需的每个 UI 元素:
在构建自定义组件之前:
建立视觉系统:
阅读详细的基础指南:
foundation/typography.md - 字体选择(Geist, JetBrains Mono)、比例、加载foundation/colors-and-spacing.md - 调色板、间距系统、深色模式foundation/layout-patterns.md - 网格、容器、留白、响应式断点快速参考:
对于复杂的交互功能,请参考专门的指南:
聊天与消息传递:
interactive/chat-and-messaging.md终端与代码显示:
interactive/terminals-and-code.md流式传输与加载:
interactive/streaming-and-loading.md差异与日志:
interactive/diffs-and-logs.md构建组件:
implementation/components-and-accessibility.md 了解组件架构和 WCAG 合规性优化性能:
implementation/performance.md 了解 Core Web Vitals 优化测试与优化:
implementation/testing-and-qa.md 了解全面的测试方法发布前检查清单:
需要了解基础知识? → 首先阅读 foundation/ 下的文件
构建聊天或消息传递功能? → 阅读 interactive/chat-and-messaging.md
构建终端或代码编辑器? → 阅读 interactive/terminals-and-code.md
需要流式传输或加载状态? → 阅读 interactive/streaming-and-loading.md
构建差异或日志查看器? → 阅读 interactive/diffs-and-logs.md
准备开始实现? → 阅读 implementation/ 下的文件
需要工具或想避免错误? → 阅读 reference/ 下的文件
shadcn/ui (https://ui.shadcn.com) - 首选
daisyUI (https://daisyui.com)
HeroUI (https://heroui.com)
详细比较和使用模式请参见 reference/design-systems.md。
仅使用以下字体:
切勿混合使用多种无衬线字体或多种等宽字体。
完整指南请参见 foundation/typography.md。
研究这些网站以获取设计模式:
避免以下错误:
<div>完整列表及解释请参见 reference/anti-patterns.md。
对于简单界面(单页,少量组件):
对于复杂界面(多功能,交互元素多):
对于开发者工具或技术界面:
如果不确定从哪里开始:
如果感觉设计不对劲:
如果实现进度缓慢:
elegant-design/
├── SKILL.md (你在这里)
├── foundation/
│ ├── typography.md (字体、比例、加载)
│ ├── colors-and-spacing.md (调色板、间距系统、深色模式)
│ └── layout-patterns.md (网格、容器、响应式)
├── interactive/
│ ├── chat-and-messaging.md (聊天界面、流式消息)
│ ├── terminals-and-code.md (终端、语法高亮)
│ ├── streaming-and-loading.md (渐进式加载、骨架屏)
│ └── diffs-and-logs.md (版本控制界面、日志查看器)
├── implementation/
│ ├── components-and-accessibility.md (架构、WCAG)
│ ├── performance.md (Core Web Vitals、优化)
│ └── testing-and-qa.md (测试清单、工具)
└── reference/
├── design-systems.md (shadcn, daisyUI, HeroUI 详情)
├── tools-and-libraries.md (完整工具列表)
└── anti-patterns.md (不应做的事情,含解释)
世界级的设计是无形的。 用户不应注意到你巧妙的解决方案——他们应该只是轻松地完成目标,并可能在此过程中会心一笑。
从简单开始,基于实际使用迭代。 不要一次性构建所有东西。构建需要的部分,测试它,优化它,然后进入下一个功能。
无障碍性不是可选项。 从一开始就为键盘导航、屏幕阅读器和足够的对比度进行设计。事后补救要困难得多。
性能很重要。 一个漂亮但缓慢的界面是一个糟糕的界面。尽早并经常测量性能。
每周安装量
81
代码仓库
GitHub 星标数
83
首次出现
2026 年 1 月 23 日
安全审计
安装于
opencode72
gemini-cli70
codex68
cursor64
claude-code62
github-copilot60
World-class design is intentional, accessible, and delightful. Every element serves a purpose, every interaction feels natural, and the experience adapts gracefully across contexts.
Core Principles:
Use this skill when:
Follow this workflow for optimal results:
Map User Experience:
# Create flow diagrams with Graphviz
cat > user-flow.dot << 'EOF'
digraph UserFlow {
Start -> "Observe State"
"Observe State" -> "Orient Understanding"
"Orient Understanding" -> "Decide Action"
"Decide Action" -> "Act Execute"
"Act Execute" -> "Observe State" [label="OODA loop"]
}
EOF
dot -Tpng user-flow.dot -o user-flow.png
OODA Loop Mapping: For each major user goal, optimize the cycle:
Document States:
List Affordances: Identify every UI element needed:
Before Building Custom Components:
Establish Visual System:
Read the detailed foundation guides:
foundation/typography.md - Font selection (Geist, JetBrains Mono), scales, loadingfoundation/colors-and-spacing.md - Color palettes, spacing systems, dark modefoundation/layout-patterns.md - Grids, containers, white space, responsive breakpointsQuick Reference:
For sophisticated interactive features, reference the specialized guides:
Chat & Messaging:
interactive/chat-and-messaging.md when building conversational interfacesTerminals & Code Display:
interactive/terminals-and-code.md for terminal emulators, syntax highlighting, semantic highlightingStreaming & Loading:
interactive/streaming-and-loading.md for progressive loading, streaming text, optimistic updatesDiffs & Logs:
interactive/diffs-and-logs.md for version control UIs, log viewersBuild Components:
implementation/components-and-accessibility.md for component architecture and WCAG complianceOptimize Performance:
implementation/performance.md for Core Web Vitals optimizationTest & Refine:
implementation/testing-and-qa.md for comprehensive testing approachPre-Launch Checklist:
Need to understand the basics? → Read foundation/ files first
Building chat or messaging? → Read interactive/chat-and-messaging.md
Building terminal or code editor? → Read interactive/terminals-and-code.md
Need streaming or loading states? → Read interactive/streaming-and-loading.md
Building diffs or log viewers? → Read interactive/diffs-and-logs.md
Ready to implement? → Read implementation/ files
Need tools or want to avoid mistakes? → Read reference/ files
shadcn/ui (https://ui.shadcn.com) - PRIMARY CHOICE
daisyUI (https://daisyui.com)
HeroUI (https://heroui.com)
See reference/design-systems.md for detailed comparison and usage patterns.
Use these fonts exclusively:
Geist (https://vercel.com/font) - For ALL interface text
JetBrains Mono (https://jetbrains.com/mono) - For ALL code/technical content
Never mix multiple sans-serif or multiple monospace fonts.
See foundation/typography.md for complete guidance.
Study these for design patterns:
Avoid these mistakes:
<div> for everythingSee reference/anti-patterns.md for complete list with explanations.
For simple interfaces (single page, few components):
For complex interfaces (multiple features, interactive elements):
For developer tools or technical interfaces:
If unsure where to start:
If design feels off:
If implementation is slow:
elegant-design/
├── SKILL.md (you are here)
├── foundation/
│ ├── typography.md (fonts, scales, loading)
│ ├── colors-and-spacing.md (palettes, spacing system, dark mode)
│ └── layout-patterns.md (grids, containers, responsive)
├── interactive/
│ ├── chat-and-messaging.md (chat UIs, streaming messages)
│ ├── terminals-and-code.md (terminals, syntax highlighting)
│ ├── streaming-and-loading.md (progressive loading, skeletons)
│ └── diffs-and-logs.md (version control UI, log viewers)
├── implementation/
│ ├── components-and-accessibility.md (architecture, WCAG)
│ ├── performance.md (Core Web Vitals, optimization)
│ └── testing-and-qa.md (testing checklist, tools)
└── reference/
├── design-systems.md (shadcn, daisyUI, HeroUI details)
├── tools-and-libraries.md (complete tool list)
└── anti-patterns.md (what not to do, with explanations)
World-class design is invisible. Users shouldn't notice your clever solutions - they should simply accomplish their goals effortlessly and maybe smile along the way.
Start simple, iterate based on real use. Don't build everything at once. Build what's needed, test it, refine it, then move to the next feature.
Accessibility is not optional. Design for keyboard navigation, screen readers, and sufficient contrast from the start. Retrofitting is much harder.
Performance matters. A beautiful interface that's slow is a bad interface. Measure performance early and often.
Weekly Installs
81
Repository
GitHub Stars
83
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode72
gemini-cli70
codex68
cursor64
claude-code62
github-copilot60
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装