菜单
Design review checklists, accessibility standards, and UX patterns. Use when: "review design", "check accessibility", "design critique", "UX audit"
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use Firecrawl for markdown-first web scraping, crawling, and site mapping. Use when: "firecrawl", "crawl docs", "scrape website to markdown", "map website", "rag crawl".
ThoughtMap pipeline, output interpretation, and MCP vector search tools. Use when: "thoughtmap", "thought clusters", "search thoughts", "what am I thinking about", "semantic search notes", "knowledge base", "vector search", "find context in notes", "cluster distances", "topic map", "thinking patterns".
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.
Interact with Obsidian vaults using the Obsidian CLI to read, create, search, and manage notes, tasks, and properties. Also supports plugin and theme development. Use when the user asks to interact with their Obsidian vault from the command line, manage notes, search vault content, or develop and debug Obsidian plugins and themes.
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.
| name | design-review |
| description | Design review checklists, accessibility standards, and UX patterns. Use when: "review design", "check accessibility", "design critique", "UX audit" |
Checklists and standards for reviewing interfaces.
Before deep review, answer:
| Rule | Standard |
|---|---|
| Base unit | 8px grid |
| Touch targets | 44px minimum |
| Breathing room | Adequate around interactive elements |
| Grouping | Related = close, unrelated = far |
| Standard | Requirement |
|---|---|
| WCAG AA text | 4.5:1 contrast ratio minimum |
| WCAG AA large text | 3:1 contrast ratio |
| Color meaning | Consistent (red=danger, green=success) |
| Accessibility | Color not the only indicator |
Every interactive element needs:
| State | Purpose |
|---|---|
| Default | Normal appearance |
| Hover | Desktop feedback |
| Focus | Keyboard navigation (accessibility) |
| Active/Pressed | Click feedback |
| Disabled | Unavailable + explanation why |
| Loading | Processing feedback |
| Error | What went wrong + how to fix |
| Issue | Problem |
|---|---|
| Unlabeled icons | Users shouldn't guess |
| Walls of text | Nobody reads blocks |
| Disabled without explanation | User deserves to know why |
| Inconsistent patterns | Breaks learned behavior |
| No loading states | User doesn't know if action worked |
| Hostile error messages | "Error 500" tells nothing |
| Buried primary actions | Hidden in dropdowns/menus |
| Modal overuse | Every modal is an interruption |
| Rule | Standard |
|---|---|
| Duration | Under 300ms for micro-interactions |
| Easing | Natural curves (ease-out for enters, ease-in for exits) |
| Purpose | Guides attention, not decoration |
| Reduce motion | Respect prefers-reduced-motion |
| Resource | Location |
|---|---|
| Design System | Second Brain/Projects/{project}/design-system.md |
| Brand Guide | Project-specific brand documentation |
"Every interface is a conversation. Make it feel human."
