菜单
Run before implementing UI — research real product patterns (Refero/Mobbin MCP), pick a design direction, and output tokens or a short DESIGN.md before writing code.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | decisions-ui-ideation |
| description | Run before implementing UI — research real product patterns (Refero/Mobbin MCP), pick a design direction, and output tokens or a short DESIGN.md before writing code. |
I am running research and direction-setting so the user gets designed UI, not generic AI layout.
Do this before the first line of UI code unless the ticket already includes an approved design spec.
| Source | How |
|---|---|
| Refero MCP | Search screens/flows; pull DESIGN.md tokens (color, type, spacing). Pro plan. |
| Mobbin MCP | Pattern search for mobile/web; OAuth once. Pro plan. |
| Aceternity UI | Open https://ui.aceternity.com component page; copy or adapt the shown React/Tailwind/Motion code. |
| Godly | Browse https://godly.website; attach 1–3 screenshot links the user (or you) picked as mood references. |
| Repo | Read existing pages/components — match patterns before importing new visual systems. |
If MCPs are not configured, say so once, then use Aceternity URLs + Godly screenshots + repo patterns. Do not block on paid tools.
Optional: install Refero’s agent methodology: npx skills add https://github.com/referodesign/refero_skill
Produce a short artifact (comment in ticket, DESIGN.md snippet, or result packet section):
Pair with frontend-design or frontend-design-direction for implementation rules.
browser-qa / decisions-playwright after build.See ~/.decisions/harness/mcp-recommendations.json and run ~/.decisions/harness/mcp-setup-design.sh once for Mobbin/Refero CLI hints.
MUST USE when user wants to research/search/look up/find anything on the internet — e.g. "research this topic", "do a deep dive on X", "search the web for X", "see what people say about X", "look this up". Also MUST USE when user mentions any platform or shares any URL/link: Twitter/X, Reddit, Facebook, Instagram, YouTube, GitHub, Bilibili, XiaoHongShu, Xiaoyuzhou Podcast, LinkedIn/jobs/recruiting, V2EX, Xueqiu (stocks), RSS. 15 platforms, multi-backend routing (OpenCLI / per-platform CLIs / APIs). Zero config for 6 channels. Run `agent-reach doctor --json` to see which backend serves each platform right now. NOT for: writing reports/analysis/translation (this skill only FETCHES internet content); posting/commenting/liking (write operations); platforms that already have a dedicated skill installed (prefer that skill).
Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
Research what people actually say about any topic in the last 30 days. Pulls posts and engagement from Reddit, X, YouTube, TikTok, Hacker News, Polymarket, GitHub, and the web.
Turn ordinary text plans into rich interactive visual plans with diagrams, file maps, annotated code, open questions, and UI/prototype review when useful.
Turn a PR, branch, commit, or git diff into an interactive visual recap with diagrams, file maps, API/schema summaries, annotated diffs, and focused review notes.
Pick a design aesthetic from awesome-design-skills — bundled minimal/professional/enterprise/shadcn/bento; full catalog in reference for on-demand load.