Token导航 LogoToken导航TokenDH.com
研究检索操作浏览器github未标认证来源可访问许可证需确认审计提醒

design-catalog设计目录

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

465

周安装

19

GitHub Stars

8

下载量

150
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:design-catalog(设计目录)
来源仓库:https://github.com/phrazzld/claude-config
仓库路径:skills/design-catalog
安装命令:
npx skills add https://github.com/phrazzld/claude-config --skill design-catalog
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/phrazzld/claude-config --skill design-catalog

简介

已弃用,推荐使用 /evolve 替代本技能的功能。

  • 原功能为生成 5–8 个视觉设计方案供选择,现已由 evolve catalog viewer 接管。
  • 历史内容保留仅作参考,实际部署应迁移至新一代提案生成系统。
  • 安装需从 GitHub 仓库获取,依赖 npx skills add 命令完成集成。
  • design-catalog 属于研究检索类 Skill,可作为该场景下的辅助能力补充。

SKILL.md

DEPRECATED. Use /evolve instead. /evolve generates populations of proposals (8+ per generation) with anti-convergence enforcement, persistent cross-project taste memory, and multi-provider delegation (Kimi, Codex, Claude, Gemini). The catalog is replaced by the evolve catalog viewer. Original skill content preserved below for reference.

description: Generate visual design proposal catalog with 5-8 options argument-hint: "[route-or-url]"

DESIGN-CATALOG

Generate a catalog of 5-8 design proposals before implementing anything.

MANDATORY: Kimi Delegation

All proposal generation MUST be delegated to Kimi K2.5 via MCP.

Kimi excels at frontend/visual work. Claude orchestrates, Kimi implements:

// Generate proposals in parallel (4.5x faster than sequential)
mcp__kimi__spawn_agents_parallel({
  agents: [
    { prompt: "Generate proposal 1: [DNA code]. Output: .design-catalog/proposals/01-[name]/", thinking: true },
    { prompt: "Generate proposal 2: [DNA code]. Output: .design-catalog/proposals/02-[name]/", thinking: true },
    // ... 5-8 total proposals
  ]
})

Workflow:

  1. Research direction → Gemini (web grounding)
  2. Generate proposals → Kimi (parallel agents)
  3. Validate & review → Claude (quality gates, expert panel)

Why Catalogs

Design is visual and iterative. Showing options before implementing:

  • Prevents commitment to first idea
  • Surfaces unexpected directions
  • Lets user make informed choices

Process

1. Load Design Skills

Skill("frontend-design")      # Philosophy
Skill("aesthetic-system")     # Strategic direction
Skill("ui-skills")            # Implementation constraints

2. Analyze Current State

If $1 provided (route or URL):

  • Screenshot the target via Chrome MCP
  • Analyze existing design DNA (typography, colors, layout, motion)

If no argument:

  • Ask what to design

3. Research via Gemini

gemini "Analyze this [product type] for distinctive design directions.
Research 2025 trends. Anti-convergence: avoid Inter, Space Grotesk,
purple gradients, Tailwind default blue-500."

4. Generate 5-8 Proposals

For EACH proposal:

  1. Build working HTML/React preview
  2. Validate against ui-skills constraints
  3. Run /rams — Must score ≥70/100
  4. Only passing proposals enter catalog

DNA variety rule: No two proposals share >2 axes.

5. Present Catalog

mkdir -p .design-catalog && cd .design-catalog
python -m http.server 8888 &

Open in browser, screenshot, present:

Design Catalog Ready

[N] proposals passed validation. Live: http://localhost:8888

1. [Name] - [soul] - DNA: [code] - RAMS: [score]/100
2. [Name] - [soul] - DNA: [code] - RAMS: [score]/100
...

Browse, compare, tell me which 2-3 resonate.

6. Iterate

User selects favorites → generate hybrids → re-validate.

Anti-Convergence Checklist

Verify NO proposal uses:

  • Inter, Roboto, Space Grotesk, Satoshi as primary fonts
  • Purple gradients on white backgrounds
  • Tailwind default blue-500 (#3B82F6)
  • Centered max-w-4xl container everywhere
  • No animations at all

Output

Catalog ready for user selection. Next: User picks direction → /design-theme.

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Codex

36.59%
按下载量换算55

Claude

30.43%
按下载量换算46

Cursor

19.58%
按下载量换算29

Gemini CLI

10.23%
按下载量换算15

安全审计

Gen Agent Trust Hub

通过

Socket

可疑

Snyk

可疑

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力,使用时可能读取或操作网页内容,需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果,不能写成本站确认安全。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills