‹ 首页

design-context

@wellapp-ai · 收录于 5 天前 · 上游提交 1 个月前

Refresh UI/UX context from design system, Storybook, and codebase

场景设计系统维护ui开发

适合你，如果你需要保持设计与代码一致

/ 下载安装
https://github.com/wellapp-ai/well/tree/main/cursor-rules/skills/design-context ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add wellapp-ai/well/design-context
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- wellapp-ai/well/design-context
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify wellapp-ai/well/design-context
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
340GitHub stars
~517上下文体积 · 单文件
索引托管

怎么用

商店整理自技能原文 · 版本 782601c · 表述以原文为准
它做什么

装上后，Claude会先读取设计系统文档，再查找Storybook组件故事，然后搜索代码库中类似模式，最后输出一个结构化的表格，列出设计系统、Storybook、代码库和库文档中相关的模式及可复用的组件与设计令牌。

什么时候触发

在线框图阶段（DIVERGE模式）之前、实施UI更改之前，或每次DIVERGE循环时触发。用户也可手动用“use design-context skill”调用。

装好后可以这样说
Claude会执行全套流程并返回表格。
Claude会检查现有模式并给出建议。
技能原文 SKILL.md作者撰写 · MIT · 782601c

Design Context Skill

Ensures wireframes and UI decisions leverage existing patterns from the design system, Storybook, and codebase.

When to Use
  • Before presenting wireframes (Ask mode DIVERGE)
  • Before implementing UI changes (Agent mode)
  • At every DIVERGE Loop to stay grounded in existing patterns
Instructions
Phase 1: Design System Check

Read the design system documentation:

Read /docs/design-system/components.md
Read /docs/design-system/spacing.md
Read /docs/design-system/colors.md (if color decisions needed)
Read /docs/design-system/interactions.md (if interaction patterns needed)

Note applicable:

  • Design tokens (h-13, px-4, gap-3)
  • Component patterns (Button variants, DataTable, Dialog)
  • Spacing conventions (p-4 for cards, gap-6 for sections)
Phase 2: Storybook Patterns

Find existing component stories:

Glob **/*.stories.tsx

Identify:

  • Components matching current wireframe needs
  • Existing variants and props
  • Documented states (loading, error, empty)

Key story locations:

  • /src/stories/ - General component stories
  • /features/*/components/*.stories.tsx - Feature-specific stories
Phase 3: Codebase Search

Search for similar UI patterns:

SemanticSearch "How is [pattern] implemented in the codebase?"

Look for:

  • Similar features already built
  • Reusable hooks and utilities
  • Existing layout patterns
Phase 4: Library Documentation (Context7 MCP)

Query library docs for unfamiliar patterns:

1. resolve-library-id with libraryName (e.g., "radix-ui")
2. query-docs with libraryId and specific question

Common libraries:

  • /radix-ui/primitives - Dialog, Dropdown, Select patterns
  • /tanstack/query - Data fetching patterns
  • /tanstack/table - Table patterns
Output Format

After running this skill, output:

## Design Context

| Source | Relevant Patterns |
|--------|-------------------|
| Design System | [tokens, components] |
| Storybook | [stories that apply] |
| Codebase | [existing implementations] |
| Libraries | [patterns from docs] |

### Applicable Components
- [Component]: [How it applies to current wireframe]

### Design Tokens to Use
- Spacing: [tokens]
- Colors: [tokens]
- Typography: [tokens]
Invocation

Invoke manually with "use design-context skill" or follow Ask mode DIVERGE loop which references this skill's phases.

Related Skills
  • problem-framing - Run before design-context
  • competitor-scan - Compare with external patterns
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…