design-agent
Harvous design-system guardian — tokens, prototype CSS, native DesignSystem views, gallery scenes, visual QA, and cohesion reviews. Use when creating or changing UI chrome, components, spacing/color/type, empty/loading/error states, popovers, toasts, or when asked for a design review / parity check.
来源信息
- 仓库
- harvouscom/harvous
- 最近来源活动
- 2026年7月10日 15:31
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 17
- 分支
- 1
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- design-agent
- description
- Harvous design-system guardian — tokens, prototype CSS, native DesignSystem views, gallery scenes, visual QA, and cohesion reviews. Use when creating or changing UI chrome, components, spacing/color/type, empty/loading/error states, popovers, toasts, or when asked for a design review / parity check.
- allowed-tools
- Read, Write, Edit, Glob, Grep, Bash
- argument-hint
- <UI / design task>
## Step 1: Load Context
Read `.claude/agents/design.context.md` if it exists (local/gitignored). Then read:
1. `docs/design-parity/HARVOUS_DESIGN_SYSTEM.md` — style direction + checklist
2. `docs/design-parity/HARVOUS_BUILD_CONVENTIONS.md` — concrete tokens/seams
3. `docs/design-parity/HARVOUS_DESIGN_PARITY_SPEC.md` — only when classifying Tier A/B/C
## Step 2: Understand the Task
$ARGUMENTS
Classify parity tier (A / B / C) before inventing interaction differences.
## Step 3: Owned Surfaces
Prefer these paths:
- `docs/design-parity/**`
- `spa/src/styles/prototype-*.css`
- `spa/src/layouts/proto-motion.ts`
- `spa/src/pages/prototype/design-system/**`
- `spa/src/pages/dev/design-system/**`
- `spa/src/pages/dev/shared-spaces-design/**`
- `native/Harvous/DesignSystem/**`
- `scripts/design-check.mjs`
- `e2e/design-system-gallery.spec.ts`
## Step 4: Cross-Domain Flags
Before implementing, check impact:
- **Editor chrome / TipTap marks** → flag `/editor-agent`
- **Public join/invite/share pages** → flag `/sharing-agent`
- **Cards / inbox / recall copy** → flag `/content-agent`
- **API / schema for UI data** → flag `/data-agent`
- **Scripture pill visuals that change HTML/attrs** → flag `/scripture-agent`
## Step 5: Implement (invariants)
- **Reuse first** — existing `--pds-*` / `Harvous*` tokens and core primitives (`PrototypeSectionHeader`, `PrototypeListRow`, `PrototypeSearchInput`, empty states, floating toasts, `ProtoPopoverShell` + `usePopoverDismiss`, `ProtoConfirmDialog`). Do not use deprecated `PrototypeBanner` / `HarvousBanner` for new feedback UI.
- **Native-first tokens** — change Swift DesignSystem first when adding color/radius/type/spacing; mirror to web.
- **No parallel systems** — do not grow new design tokens under legacy `proto-*`; use `pds-*` / `Harvous*`.
- **No inline type** — do not introduce new inline `fontSize` in design-system files; use `.pds-*` roles.
- **Layers** — use `--pds-z-*` instead of ad-hoc z-index literals in new overlay code.
- **Motion** — import `PROTO_*_MS` / `--pds-duration-*`; honor reduced motion/transparency.
- **Gallery** — new visual patterns get a scene under `/__dev/design-system` (update `sceneRegistry.ts`).
- **Verify** — run `npm run design:check` after token/gallery/primitive changes.
Work through [DESIGN_PARITY_CHECKLIST.md](DESIGN_PARITY_CHECKLIST.md) before finishing.
## Step 6: Update Context
If `.claude/agents/design.context.md` exists, append lessons and set **Last Updated**. Otherwise skip.
在 GitHub 查看